I think Karen tried this before and then reverted it for some reason...

But I still want to propose positioning the 'End Date' on the same line as the 'Start Date' when it is shown.
I would also like to add the word 'to' between the Start and End elements when the 'End Date' is shown... but that could be a separate issue.

See screenshots.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

dboulet’s picture

Agreed, either that or add in labels for each date to establish that the first date is the start date and the second is the end date.

dboulet’s picture

I opened another issue to help figure out what to do with required field markers if we go with the idea presented above instead of re-instating the labels. See #1248786: Fix appearance of marker for required date fields.

KarenS’s picture

Category: task » feature

I have tried at different times to float the start and end dates next to each other, and when you have select widgets with all those elements it gets ungainly very quickly. Plus I had problems getting the right things to float without running into other css problems (like floating elements that escape their containers in some browsers). So while it seems nice when using small elements (like the popup dates, especially if they don't have any time), it gets ungainly for large ones plus the cross-browser issues begin to get dicey. I'm not sure what is the best answer.

mvonfrie’s picture

Issue summary: View changes
Status: Active » Needs work
FileSize
7.89 KB
8.46 KB

I have the same problem and added following CSS to my theme. I haven't added this to the date_api/date.css because it should be only added to admin / content edit pages but not to the front-end. I have not evaluated if these selectors would have any effect on fronot-end UI, neither if they work with Date Repeat API and Date Repeat Field.

.date-padding,
.date-padding div,
.date-padding label {
  padding:0px !important;
}
.date-no-float {
  clear:none;
  float:left;
  width:auto;
}

.end-date-wrapper .form-item label {
  float: left;
  padding-right: 20px;
  padding-top: 0px;
}

The parts are arranged a bit different than suggested by arlinsandbulte but if it is not ok it should be easy to change.

Date field in desktop view

It is responsive too and nicely wraps on smaller screens and mobiles:

Date field responsive view

Zavs’s picture

Assigned: Unassigned » Zavs
Zavs’s picture

Assigned: Zavs » Unassigned
pobster’s picture

I had a UX improvement request to make this inline, felt like this was an appropriate ticket to attach it to (even though it's only semi-related).

Before selection
After selection

labboy0276’s picture

I know this is an old issue, but if people ever come back and try and do this, this solution is a slight improvement on the css in #4.

I added a hook in a custom module as follows:

/**
 * Implements hook_form_alter().
 */
function YOUR_MODULE_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id === 'YOUR_FORM') {
    // Add the css to help with date range formatting.
    $module = drupal_get_path('module', 'YOUR_MODULE');
    $form['#attached']['css'][] = $module . '/css/date-range.css';
  }
}

And then I added this css to the date-range.css file (adjust the breakpoint as you deem necessary for your setup:

/**
 * Formats the date ranges so they are side by side.
 */

@media (min-width: 992px) {
  .date-padding,
  .date-padding div,
  .date-padding label {
    padding:0 !important;
  }

  .date-no-float {
    clear: both;
    float: left;
    width: auto;
  }

  .date-no-float:last-of-type {
    clear: none;
  }

  .end-date-wrapper .form-item label {
    float: left;
    padding-right: 20px;
    padding-top: 0;
  }
}
darrell_ulm’s picture

#8 works well for me.