Set default "To Date" based on user-entered "From Date"

This has been discussed here: #127200: Allow user to specify duration (relative) or end time (absolute)
Approaches may vary, but in the end, I think the user would/should see the same thing.

IMO, this issue should be marked as a duplicate of #127200, but I will leave that up to you, nadavoid....

Subscribing. Does this functionality exist currently in the jQuery UI datepicker? I haven't been able to find any information on it.

Also, this looks like a duplicate of #300329: Enhance UI for 'to date'.

Bump.
+1 for this feature.

Also marked #300329: Enhance UI for 'to date' as a duplicate of this issue.

The jQuery UI datepicker has lots of features that haven't been tapped into. I don't know if it will do this specific thing or not, but someone can research that and see what has to be done to get it working.

Subscribing. I was surprised to see this hadn't been implemented yet.

how do i subscribe to this thread? I want to know if there's any progress

I had the same question. As you may have discovered, simply adding a comment to an issue thread will make it visible is your 'My issues' link.

+1 .. this would be a great usability improvement

+1

I'd like the 'to date' to default to the 'from date +2 hours'

+1 on this, though this seems related to some of the other threads about duration.

FWIW, it seems to me that the interface should have three elements, and when the field is defined the admin can choose to hide one or more of them. The three fields would be:

Start Time

Duration

End Time

Once a user sets the start time, if a duration has been set (or if a default is defined) the end time could be set automatically. If the user is able to set the end time, doing so would show the duration. I think this will make it much easier to create dates, and would also help to eliminate user error (since unusually long dates would be made obvious).

When setting up a date field in this way, an admin could choose to hide the duration field, so that the date field would continue to function the way it currently does (though if a default duration had been set it could still auto-populate the end date).

The admin could choose to hide the end but expose the duration, so users would specify the start date and the duration.

Finally, and admin could define a date field with a default duration and no access to the duration or end date fields. Users would specify a start date and the end date would be automatically set based on the predefined duration.

To me this seems like it could work as a single approach that would solve a large number of feature requests and be extremely flexible.

subscribing, great interface proposals

Subscribing.

subscribing.

+1 for the making the To date default to the From date.

sub

im using date_popup and i need exactly the same . i use the patch overrideSettingsArray.patch that drasgardian wrote at http://drupal.org/node/510464 .sure its not the best option but maybe i can use ahah propety i want to mean:

today -2010-09-29

FROM DATE SELECTED - 2010-10-10
TO DATE : ?

If i have the diference in days i can create a date_popup(TO DATE) field using ahah with:

'#settings' => array(
'changeMonth' => false,
'changeYear' => false,
'minDate' => $mindays,
),

$mindays is the diference between 2010-10-10 and 2010-09-29.

Then normally when you click TO DATE you have the good options we want .... then in validation we can check the hours ...

Just the idea.

I need to do something like that if someone have others ideas??

:)

really dont know if possible like this

date fields hasnt ahah property

This would make entering dates so much easier. In my experience with events that use these fields, it's very frustrating to have to select the date again on the 'To:' date. Most of the dates I enter are on a single day with a 'From:' and 'To:' time. I use the Repeat fields for events that run over multiple days.

Plain and simple it just slows me down when entering events.

If the default behavior was to create the 'To:' when you click on it (the field receives focus), based on the set 'From:' date (with defaults added - or not). That way if your 'To:' date is optional, there is no value until you click on (or tab to) the 'To:' field. If there is no From date set yet, then the default could be set to 'now' ($rightnow=getdate();). I used to do this in Flash a lot with strings using the TextField.onSetFocus method for textfields, but I'm not familiar enough with jquery and it's date objects to suggest a snippet.

Has anyone had any progress with this feature?
It would greatly help the end-user experience.

Thank you

As Drupalista's we get used to the dysfunction of the date field when entering data. I have a new Drupal client that is concerned that entering dates is such a cumbersome operation. I'll follow this thread, and bring this up for code sprints here in the Twin Cities. Thanks!

Developer-x released a nice little module that addresses some of this:
http://drupal.org/project/datetweaks

Date Range on the jquery datepicker works how we expect this to work http://jqueryui.com/demos/datepicker/#date-range

Is is possible to implement that one instead :S

Any update on this for D7 Date-version?

Subscribing.
Need to have this function.

any update on this? if not does anyone know how to set jquery to automatically make the to date + 12 hours from the start date? thanks in advance!!

+ #19, I would love this feature.

This functionality exists on the regular date fields, just not on date popup. In the meantime stick this somewhere within your theme as a .js file -- it's simply altered from the select javascript to work with pop-up fields instead :)

Thank you Renee for your response. I added this file to my theme folder... also added the script in my theme.. wasn't sure if I was adding it right but didn't see any difference... I was responding to #19:

"it's very frustrating to have to select the date again on the 'To:' date. Most of the dates I enter are on a single day with a 'From:' and 'To:' time."

Even if I change widget type to "Select list" and a user selects July 15 in From Date..... To Date does not change to July 15. If user leaves it empty a warning comes back, 'invalid response'.

I got the basic end-date-updates-to-start-date idea working by attaching this to the form that contains my date fields. It's drawing on the minDate option from the jQuery UI datepicker (http://api.jqueryui.com/datepicker/#option-minDate) to limit the available end dates.

Not sure if this is the best Drupal way to do it, but I'm initializing the datepickers on load instead of when the field is clicked, which is what otherwise happens in this module by default - because the date-popup-init class gets added at this point, the onfocus behavior from date_popup.js never happens for datepicker inputs. It was necessary to go ahead and initialize the datepickers because otherwise, the start date onClose function is trying to add a minDate to an end date picker that doesn't exist yet (so it wouldn't do anything unless you happened to have clicked on the end date field before the start date and therefore initialized the picker).

To attach the script to the form, I included it in a custom module and used hook_form_alter() to attach it:

function mymodule_form_FORM_ID_alter(&$form, &$form_state, $form_id) {
	$path = drupal_get_path('module', 'mymodule');
	$form['#attached']['js'][] = $path . '/mymodule.js';
}

..replacing mymodule, FORM_ID, and mymodule.js with the relevant names.

This isn't generalized to apply to any start / end pair - it's targeting two specific fields based on hardcoded ID selectors. I didn't see an obvious uniform way to distinguish between start and end dates, or to tell which start date goes with which end date if there's more than one set - both would need to be possible to do this consistently enough to incorporate into the module. Totally possible there's already some way...

This doesn't do anything with the time at all - just the date.

jQuery(function($){
	
	for (var id in Drupal.settings.datePopup) {
		var datePopup = Drupal.settings.datePopup[id];
		if(datePopup.func == 'datepicker') {
			$('#'+ id)
				.datepicker(datePopup.settings)
				.addClass('date-popup-init');
		}
    }

// replace selector with your field's ID    
	var startDate = $('#edit-field-time-und-0-value-datepicker-popup-0');
// replace selector with your field's ID  
	var endDate = $('#edit-field-time-und-0-value2-datepicker-popup-0');
	if(startDate.length > 0 && endDate.length > 0) {
		startDate.datepicker('option', {onClose: function(selected){
		endDate.datepicker('option','minDate', selected);
			}
		});
	}
	
});

#30 works for me. Thanks, @dooleysarahe. Once the start date is entered, the only available end dates are equal to or greater than the previously selected start date.

However, I need to increment the end date by one day so the only clickable ends dates are a day or more greater than the start date. Not sure at this point how to do it. Any ideas appreciated.

I figured out #31. I made slight adjustment to the solution provided here.

So the js for the solution in #30 now looks like this:

jQuery(function($){
	for (var id in Drupal.settings.datePopup) {
		var datePopup = Drupal.settings.datePopup[id];
		if(datePopup.func == 'datepicker') {
			$('#'+ id)
				.datepicker(datePopup.settings)
				.addClass('date-popup-init');
		}
    }
// replace selector with your field's ID
	var startDate = $('#edit-field-time-und-0-value-datepicker-popup-0');
// replace selector with your field's ID
	var endDate = $('#edit-field-time-und-0-value2-datepicker-popup-0');
	if(startDate.length > 0 && endDate.length > 0) {
		startDate.datepicker('option', {onClose: function(selected){
		var minDate = new Date(Date.parse(selected));
             minDate.setDate(minDate.getDate() + 1);            
            endDate.datepicker( 'option', 'minDate', minDate);		
			}
		});
	}
});

Nice solution #30 i hope the module developers implements this for date_views on exposed filters.

In case someone wants a different option using some logic from the date's date_popup module.

In your custom module (replace 'MY_MODULE' with your module name):

/**
 * Implement hook_field_widget_WIDGET_TYPE_form_alter()
 * This is only applied to the popup date field. 
 */
function MY_MODULE_field_widget_date_popup_form_alter(&$element, &$form_state, $context) {
  //we only want the date combo field which has the from/to options
  if ($element['#type'] == 'date_combo')
  {
    $element['#attached']['js'][] = drupal_get_path('module', 'MY_MODULE') . '/MY_MODULE.js';
  }
}

Code for the MY_MODULE.js file (use a prefix for the functions based on your module)

(function($) {
  function my_date_handler(e) {
  //get the "to" field by just adding "2" to the "value" portion of the "from" field 
    var to = $('#'+ this.id.replace('-value-', '-value2-'));
    // make sure the "to" field exists
    if (!to) return;
    var d = $(this).val();
    /*  The datepicker fields only get initiated with the jquery plugin
    on initial focus. So to start the "to" field is not initialized so 
    we can safely set the "to" date without worrying that we are 
    overwriting a user selected "to" date.
    Once the user clicks in the "to" field we no longer update based
    on "from" field because the datepicker has been initialized and we
    assume the user did so intentionally.

    Caveat. When editing a node that has a date "to", if you change
    the "from" date it will then update the "to" date to the same date
    since the "to" datepicker is not initialize. Alter this behaviour 
    as needed when editing.

    The added benefit here is that when the "to" field is clicked and
    the datepicker is initiated, it will have the "from" date as the
    default value...including the month. This has been an issue for
    our users when they enter a month into the future in the "from"
    field and then forget to do the same in the "to" field because
    logically people assume the popup will be smart enough to know that
    they want the date "to" to be at least the same month as "from"
    */
    if (!to.hasClass('date-popup-init')) { to.val(d); }
  }
  
  Drupal.behaviors.my_date_popup = {
    attach: function (context) {
      for (var id in Drupal.settings.datePopup) {
        //only bind to the "from" value datepicker field
        if (~id.indexOf('value-datepicker')) $('#'+ id).bind('change', Drupal.settings.datePopup[id], pc_date_handler);
      }
    }
  };
})(jQuery);

@tklawsuc looks good for me. I've created a patch from your sample.

Let's enhance this a bit and make it optional, we don't want to force the users to use the new feature.
It would also be nice to make it configurable, so that once can enter some offsets like 1 day or 1 hour etc.

Looks good

I'm interested in this feature for Drupal 8. Any hints how to accomplish this? Is there an issue already or even a module?

Thanks for the patch, we'll try to review it soon.

BTW please try to remember to set the issue status to "needs review" when you upload a patch, that way it triggers the testbot and lets others know that there's something to review.

I've been running this patch for quite a while now with no issues. It has been working well for me.

Hi there

#37 works for me, however only the first time user chooses a date, if they change their mind and change date the end date stays as the first date picked. I don't know if it's an error or supposed to work like this.

Also it'd nice that it works with the time to plus adding a relative option (eg. + 30 minutes)

thanks
Manolo

I think that is intentional. It would be pretty bad UX, if even after you selected your start and end dates, everytime you made an adjustment to start you'd need to go fix the end date. I think it should definitely not adjust the end date everytime the start date changes.