Index: src/bp-xprofile/admin/css/admin-rtl.css
===================================================================
--- src/bp-xprofile/admin/css/admin-rtl.css	(revision 11059)
+++ src/bp-xprofile/admin/css/admin-rtl.css	(working copy)
@@ -284,3 +284,73 @@
 	display: none;
 	visibility: hidden;
 }
+
+/* xProfile Field Type - Date */
+
+.form-table.bp-date-options {
+	margin: 0 8px;
+}
+
+.form-table.bp-date-options th {
+	width: 150px;
+}
+
+.form-table td .date-format-section select {
+	margin-top: -2px;
+}
+
+.date-format-label {
+	display: inline-block;
+	width: 150px;
+}
+
+.date-format-custom-value,
+.date-range-numeric {
+	width: 56px;
+}
+
+.bp-date-range-type-label {
+	float: right;
+	font-style: italic;
+	width: 80px;
+}
+
+.bp-date-range-type-values {
+	margin-left: 25px;
+	padding-right: 100px;
+}
+
+@media screen and (max-width: 782px) {
+	.bp-date-formats .bp-date-format-option:first-of-type {
+		margin-top: 1em;
+	}
+	.bp-range-types .bp-date-format-option {
+		margin-bottom: 1em;
+		margin-top: 1em;
+	}
+	.form-table td input.date-format-custom-value,
+	.form-table td input.date-range-numeric {
+		display: inline-block;
+		margin-left: 10px;
+		width: 56px;
+	}
+	.form-table td .bp-date-range-type-values select {
+		display: inline-block;
+		width: auto;
+	}
+	.bp-date-range-type-label {
+		float: none;
+		width: auto;
+	}
+	.bp-date-range-type-values {
+		padding-right: 0;
+		margin-right: 35px;
+	}
+}
+
+@media screen and (max-width: 480px) {
+	.form-table .bp-range-types label {
+		clear: both;
+		display: block;
+	}
+}
Index: src/bp-xprofile/admin/css/admin.css
===================================================================
--- src/bp-xprofile/admin/css/admin.css	(revision 11059)
+++ src/bp-xprofile/admin/css/admin.css	(working copy)
@@ -285,6 +285,8 @@
 	visibility: hidden;
 }
 
+/* xProfile Field Type - Date */
+
 .form-table.bp-date-options {
 	margin: 0 8px;
 }
@@ -293,6 +295,10 @@
 	width: 150px;
 }
 
+.form-table td .date-format-section select {
+	margin-top: -2px;
+}
+
 .date-format-label {
 	display: inline-block;
 	width: 150px;
@@ -302,3 +308,49 @@
 .date-range-numeric {
 	width: 56px;
 }
+
+.bp-date-range-type-label {
+	float: left;
+	font-style: italic;
+	width: 80px;
+}
+
+.bp-date-range-type-values {
+	margin-right: 25px;
+	padding-left: 100px;
+}
+
+@media screen and (max-width: 782px) {
+	.bp-date-formats .bp-date-format-option:first-of-type {
+		margin-top: 1em;
+	}
+	.bp-range-types .bp-date-format-option {
+		margin-bottom: 1em;
+		margin-top: 1em;
+	}
+	.form-table td input.date-format-custom-value,
+	.form-table td input.date-range-numeric {
+		display: inline-block;
+		margin-right: 10px;
+		width: 56px;
+	}
+	.form-table td .bp-date-range-type-values select {
+		display: inline-block;
+		width: auto;
+	}
+	.bp-date-range-type-label {
+		float: none;
+		width: auto;
+	}
+	.bp-date-range-type-values {
+		padding-left: 0;
+		margin-left: 35px;
+	}
+}
+
+@media screen and (max-width: 480px) {
+	.form-table .bp-range-types label {
+		clear: both;
+		display: block;
+	}
+}
Index: src/bp-xprofile/classes/class-bp-xprofile-field-type-datebox.php
===================================================================
--- src/bp-xprofile/classes/class-bp-xprofile-field-type-datebox.php	(revision 11059)
+++ src/bp-xprofile/classes/class-bp-xprofile-field-type-datebox.php	(working copy)
@@ -482,8 +482,8 @@
 
 					<div class="bp-date-format-option">
 						<label for="date-format-elapsed">
-							<input type="radio" name="field_settings[date_format]" id="date-format-elapsed" <?php checked( 'elapsed', $settings['date_format'] ); ?> value="elapsed" />
-							<span class="date-format-label"><?php esc_html_e( 'Time elapsed', 'buddypress' ); ?></span> <?php _e( '<code>4 years ago</code>, <code>4 years from now</code>', 'buddypress' ); ?>
+							<input type="radio" name="field_settings[date_format]" id="date-format-elapsed" <?php checked( 'elapsed', $settings['date_format'] ); ?> value="elapsed" aria-describedby="date-format-elapsed-setting" />
+							<span class="date-format-label" id="date-format-elapsed-setting"><?php esc_html_e( 'Time elapsed', 'buddypress' ); ?></span> <?php _e( '<code>4 years ago</code>, <code>4 years from now</code>', 'buddypress' ); ?>
 						</label>
 					</div>
 
@@ -491,12 +491,14 @@
 						<label for="date-format-custom">
 							<input type="radio" name="field_settings[date_format]" id="date-format-custom" <?php checked( 'custom', $settings['date_format'] ); ?> value="custom" />
 							<span class="date-format-label"><?php esc_html_e( 'Custom:', 'buddypress' ); ?></span>
-							<input type="text" name="field_settings[date_format_custom]" id="date-format-custom-value" class="date-format-custom-value" value="<?php echo esc_attr( $settings['date_format_custom'] ); ?>" /> <span class="screen-reader-text"><?php esc_html_e( 'Example:', 'buddypress' ); ?></span><span class="date-format-custom-sample" id="date-format-custom-sample"><?php if ( $settings['date_format_custom'] ) : ?><?php echo esc_html( date( $settings['date_format_custom'] ) ); endif; ?></span><span class="spinner" id="date-format-custom-spinner"></span>
 						</label>
+						<label for="date-format-custom-value" class="screen-reader-text"><?php esc_html_e( 'Enter custom time format', 'buddypress' ); ?></label>
+						<input type="text" name="field_settings[date_format_custom]" id="date-format-custom-value" class="date-format-custom-value" value="<?php echo esc_attr( $settings['date_format_custom'] ); ?>" aria-describedby="date-format-custom-value-info" /> <span class="screen-reader-text"><?php esc_html_e( 'Example:', 'buddypress' ); ?></span><span class="date-format-custom-sample" id="date-format-custom-sample"><?php if ( $settings['date_format_custom'] ) : ?><?php echo esc_html( date( $settings['date_format_custom'] ) ); endif; ?></span><span class="spinner" id="date-format-custom-spinner" aria-hidden="true"></span>
+
+						<p><a href="https://codex.wordpress.org/Formatting_Date_and_Time"><?php esc_html_e( 'Documentation on date and time formatting', 'buddypress' ); ?></a></p>
 					</div>
+
 				</fieldset>
-
-				<p><a href="https://codex.wordpress.org/Formatting_Date_and_Time"><?php esc_html_e( 'Documentation on date and time formatting', 'buddypress' ); ?></a></p>
 			</td>
 		</tr>
 
@@ -506,54 +508,67 @@
 			</th>
 
 			<td>
-				<fieldset>
+				<fieldset class="bp-range-types">
 					<legend class="screen-reader-text">
 						<?php esc_html_e( 'Range', 'buddypress' ); ?>
 					</legend>
 
 					<div class="bp-date-format-option">
-						<label>
-							<input type="radio" name="field_settings[range_type]" id="range_type_absolute" value="absolute" <?php checked( 'absolute', $settings['range_type'] ); ?> />
+						<div class="bp-date-range-type-label">
+							<label for="range_type_absolute">
+								<input type="radio" name="field_settings[range_type]" id="range_type_absolute" value="absolute" <?php checked( 'absolute', $settings['range_type'] ); ?> />
+								<?php esc_html_e( 'Absolute', 'buddypress' ); ?>
+							</label>
+						</div>
 
-							<?php
-							printf(
-								/* translators: 1: Start year for date range, 2: End year for date range */
-								__( 'From %1$s to %2$s', 'buddypress' ),
-								sprintf( '<input class="date-range-numeric" type="text" name="field_settings[range_absolute_start]" value="%s" />', esc_attr( $settings['range_absolute_start'] ) ),
-								sprintf( '<input class="date-range-numeric" type="text" name="field_settings[range_absolute_end]" value="%s" />', esc_attr( $settings['range_absolute_end'] ) )
-							);
-							?>
-						</label>
+						<div class="bp-date-range-type-values">
+							<label for="field_settings[range_absolute_start]" aria-label="Year"><?php esc_html_e( 'Start:', 'buddypress' ); ?></label>
+							<?php printf( '<input class="date-range-numeric" type="text" name="field_settings[range_absolute_start]" id="field_settings[range_absolute_start]" value="%s" />', esc_attr( $settings['range_absolute_start'] ) ); ?>
+							<label for="field_settings[range_absolute_end]" aria-label="Year"><?php esc_html_e( 'End:', 'buddypress' ); ?></label>
+							<?php printf( '<input class="date-range-numeric" type="text" name="field_settings[range_absolute_end]" id="field_settings[range_absolute_end]" value="%s" />', esc_attr( $settings['range_absolute_end'] ) ); ?>
+						</div>
 					</div>
 
 					<div class="bp-date-format-option">
-						<label>
-							<input type="radio" name="field_settings[range_type]" id="range_type_relative" value="relative" <?php checked( 'relative', $settings['range_type'] ); ?> />
+						<div class="bp-date-range-type-label">
+							<label for="range_type_relative">
+								<input type="radio" name="field_settings[range_type]" id="range_type_relative" value="relative" <?php checked( 'relative', $settings['range_type'] ); ?> />
+								<?php esc_html_e( 'Relative', 'buddypress' ); ?>
+							</label>
+						</div>
 
-							<?php
-							printf(
-								/* translators: 1: "From" year count for date range, 2: "To" year count for date range */
-								__( 'From %1$s to %2$s', 'buddypress' ),
-								sprintf(
-									'<input type="text" class="date-range-numeric" name="field_settings[range_relative_start]" value="%s" /> <select name="field_settings[range_relative_start_type]"><option value="past" %s>%s</option><option value="future" %s>%s</option></select>',
-									esc_attr( abs( $settings['range_relative_start'] ) ),
-									selected( true, $settings['range_relative_start'] <= 0, false ),
-									esc_attr__( 'years ago', 'buddypress' ),
-									selected( true, $settings['range_relative_start'] > 0, false ),
-									esc_attr__( 'years from now', 'buddypress' )
-								),
-								sprintf(
-									'<input type="text" class="date-range-numeric" name="field_settings[range_relative_end]" value="%s" /> <select name="field_settings[range_relative_end_type]"><option value="past" %s>%s</option><option value="future" %s>%s</option></select>',
-									esc_attr( abs( $settings['range_relative_end'] ) ),
+						<div class="bp-date-range-type-values">
+							<label for="field_settings[range_relative_start]"><?php esc_html_e( 'Start:', 'buddypress' ); ?></label>
+							<?php printf( '<input type="text" class="date-range-numeric" name="field_settings[range_relative_start]" id="field_settings[range_relative_start]" value="%s" />',
+								esc_attr( abs( $settings['range_relative_start'] ) )
+								);
+							?>
+							
+							<label class="screen-reader-text" for="field_settings[range_relative_start_type]"><?php esc_html_e( 'Select range', 'buddypress' ); ?></label>
+							<?php printf( '<select name="field_settings[range_relative_start_type]" id="field_settings[range_relative_start_type]"><option value="past" %s>%s</option><option value="future" %s>%s</option></select>',
+								selected( true, $settings['range_relative_start'] <= 0, false ),
+								esc_attr__( 'years ago', 'buddypress' ),
+								selected( true, $settings['range_relative_start'] > 0, false ),
+								esc_attr__( 'years from now', 'buddypress' )
+								);
+							?>
+
+							<label for="field_settings[range_relative_end]"><?php esc_html_e( 'End:', 'buddypress' ); ?></label>
+							<?php printf( '<input type="text" class="date-range-numeric" name="field_settings[range_relative_end]" id="field_settings[range_relative_end]" value="%s" />',
+								esc_attr( abs( $settings['range_relative_end'] ) )
+								);
+							?>
+							<label class="screen-reader-text" for="field_settings[range_relative_end_type]"><?php esc_html_e( 'Select range', 'buddypress' ); ?></label>
+							<?php printf( '<select name="field_settings[range_relative_end_type]" id="field_settings[range_relative_end_type]"><option value="past" %s>%s</option><option value="future" %s>%s</option></select>',
 									selected( true, $settings['range_relative_end'] <= 0, false ),
 									esc_attr__( 'years ago', 'buddypress' ),
 									selected( true, $settings['range_relative_end'] > 0, false ),
 									esc_attr__( 'years from now', 'buddypress' )
-								)
-							);
+								);
 							?>
-						</label>
+						</div>
 					</div>
+
 				</fieldset>
 			</td>
 		</tr>