Set datePicker to think it's a day in the future

Question

By default, if we say

{minDate: 4}

in the options, the minimum selected date will be four days from Today.

Is it possible to change the date() to be set in the future?

so, say we have a second date picker but we want the second date to assume that Today is a date set in a previous date picker element. We'll say it's 05/03/2020

Is there any way that we can set the next datepicker input to be set to as if it was that day, so that I can use the {minDate: 4} and it will adjust the settings in relation to the previously selected date?

Maybe something like this:

$('.date_to_do_something').eq(1).datepicker({
   setTheDate : '05/03/2020',
   minDate : 5,
   maxDate: 10
})

probably explained a little better:

By default, the datepicker knows what today is and applies the custom options i.e. {minDate:5} in relation to today. I would like to change the Today for the second date picker so that it thinks that the date set in the previous field is today. So if we set it to 05/03/2020 the next date picker will have have minimum date of 05/08/2020 I hope that makes sense!

Not sure I get it! Are you trying to set the second datepicker so that when selecting a date in the first datepicker, the second datepicker will update and automatically select a date four days ahead of the first datepicker ? — adeneo, May 24 '13 at 02:03
Hi Adeneo, I do admit, it's pretty difficult to explain so I'll try again hopefully this helps: By default, the datepicker knows what today is and applies the custom options i.e. `{minDate:5}` in relation to today. I would like to change the Today for the second date picker so that it thinks that the date set in the previous field is **today**. So if we set it to `05/03/2020` the next date picker will have have minimum date of `05/08/2020` I hope that makes sense! — Philll_t, May 24 '13 at 02:09
let me know if you have any remaining questions, if my answer has fully answered your questions, please mark it accordingly — monkeyhouse, Jun 17 '13 at 01:36

monkeyhouse · Accepted Answer · 2013-05-24T02:44:37.737

yes, add the date picker so that the second is updated in relation to the first - use the on close event,

edit: also set the default date of the to to +5d to meet the it must start 5 days ahead of now requirement

see

http://jsfiddle.net/sz6jN/2/

HTML

<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />

SCRIPT

$(function() {
$( "#from" ).datepicker({
  changeMonth: true,
  minDate: "+0d",
  onClose: function( selectedDate ) {
      var minDate = $.datepicker.parseDate('mm/dd/yy', selectedDate);
      minDate.setDate(minDate.getDate() + 5);                    
      $( "#to" ).datepicker( "option", "minDate", minDate);          
  }
});
$( "#to" ).datepicker({minDate : "+5d"});
});

This works! Although it's not as lavish of an approach as I had foolishly thought it would be, it get s the job done. Thank you sir. — Philll_t, May 24 '13 at 03:40

score 1 · Answer 2 · answered May 24 '13 at 02:38

I'm still not sure I get it, but to just set the minDate five days ahead of another datepicker, you could do this:

$(function() {
    $("#from_date").datepicker({
        minDate   : 5,
        onSelect: function() {
            var minDate = $(this).datepicker('getDate');
            minDate.setDate(minDate.getDate()+5);
            $("#to_date").datepicker( "option", "minDate", minDate);
        }
    });

    $("#to_date").datepicker({
        minDate: (function() {
            var minDate = $("#from_date").datepicker('getDate');
            minDate.setDate(minDate.getDate()+5);
            return minDate;
        }())
    });
});

FIDDLE

This also autoupdates the minDate when a date is selected in the first datepicker, but that can be removed.

score 0 · Answer 3 · answered May 24 '13 at 01:43

0

try this

  $( ".date_to_do_something" ).datepicker( "setDate", "05/03/2020" );

answered May 24 '13 at 01:43

COLD TOLD

13,513
3
35
52

Hi Cold, thank you for your response. I used `setDate` method as you suggested, but it seemed to have only changed the selected date. When I went to apply the options after setting the date, the options were still in relation to today. What it did do, however was set the selected date to `05/03/2020` Any other suggestions? – Philll_t May 24 '13 at 02:04
do you only have to use jquery ui datepicker – COLD TOLD May 24 '13 at 02:11
have you tried this $( "#datepicker" ).datepicker("option", "defaultDate", +8); basically instead of 8 you will get the difference in date and apply this number – COLD TOLD May 24 '13 at 02:13
Looks like this only changed the default highlighted date. hmm I wonder if I have to create a new instance of the `datepicker()` method and change it's date() context manually. I don't see any options in the documentation that can let me do this, the closest thing here is changing the min date, but this will be quite a nuisance if we have dates that are in the years apart – Philll_t May 24 '13 at 02:19

Set datePicker to think it's a day in the future

3 Answers3