jquery datetime picker set minDate dynamic

Question

I guys i'm using a datetimepicker by trentrichardson.com.

I have a form with two input fields : from and to and i want to be able to set dynamically a minDate to my "to" field equal to the value of my "from" field.

I know i should use a beforShow option but don't know how to implement the function.

$('.from,.to').datetimepicker({

    beforeShow: customRange

});

EDITED/SOLUTION

function customRange(input) {   
if (input.id == 'to') {     
var x=$('#from').datepicker("getDate");
$( ".to" ).datepicker( "option", "minDate",x ); 
} 
else if (input.id == 'from') {     
var x=$('#to').datepicker("getDate");
$( ".from" ).datepicker( "option", "maxDate",x ); 
} }

score 33 · Accepted Answer · answered Mar 21 '11 at 08:45

33

you can set and get minDate dynamically with setter and getter:

//getter
var minDate = $( ".selector" ).datepicker( "option", "minDate" );
//setter
$( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) );

explained here

answered Mar 21 '11 at 08:45

felixsigl

2,870
21
16

i need that the input field "to" is at least equal of any date value inside "from" field – luca Mar 21 '11 at 08:52

score 18 · Answer 2 · answered Nov 15 '13 at 20:53

If you have two textboxes with corresponding IDs from and to and you want the minDate of to to be the selected date of from then do the following:

$("#from").datepicker({
    minDate: 0, // to disable past dates (skip if not needed)
    onClose: function(selectedDate) {
        // Set the minDate of 'to' as the selectedDate of 'from'
        $("#to").datepicker("option", "minDate", selectedDate);
    }
});

$("#to").datepicker();

andyb · Answer 3 · 2011-03-21T09:11:31.817

3

You can restrict the datepicker range.

But you want to set this range on creation of the datepicker on the "from". I made you a demo which seems to work OK as far as I understand the question.

edited Mar 21 '11 at 09:11

answered Mar 21 '11 at 09:05

andyb

42,062
11
113
146

Hi@andyb, thanks for your code. But after selecting the "from" and "to" date once,then come back to re-select again "from" date". Then the "to" date cannot update according to newly selected "from" date. Do you have any solution? – Héléna Oct 29 '15 at 09:10
@Elena I do not see this issue with the demo. After setting both dates, then changing the "from" to be further in the past or to after the "to" then the opening the "to" date selector shows more dates in the past or it is set to the "from" date. Can you elaborate on the problem or if you can create a demo, then maybe ask a new question? – andyb Oct 29 '15 at 10:30
hi, in your demo it works perfectly. But when I inserted these lines into my jquery month picker ("to" date select part). Then it occurs problem as I described in first part. Please see I posted the code in this link:http://stackoverflow.com/questions/33411152/django-jquery-month-picker-the-to-date-not-always-updated-as-later-than-from. Thanks in advance. – Héléna Oct 30 '15 at 01:26

score 2 · Answer 4 · answered Feb 17 '12 at 05:14

luca: A small addition to your answer...

Using the function you suggested the time component is ignored the first time the datetimepicker is displayed. If you close the datetimepicker and reopen it again, the time component mysteriously reappears. I'm not quite sure what is causing this, but it can be fixed with a bit of a hack:

function setMinMaxDate ( element )
{
    // Store current date - setting max/min date seems to destroy time component
    var val = $(element).val();

    if (element.id == 'endDate') 
    {     
        var x=$('#startDate').datetimepicker("getDate");
        $( element ).datetimepicker( "option", "minDate",x ); 
    } 
    else if (element.id == 'startDate') 
    {     
        var x=$('#endDate').datetimepicker("getDate");
        $( element ).datetimepicker( "option", "maxDate",x ); 
    }

    // Restore date
    $(element).val(val);
}

score 1 · Answer 5 · answered Sep 30 '15 at 12:40

None of the above answers helped me at all. It either didn't work or gave some kind of error.

So I merged them all together and made my own one. I used moment.js as mentioned above, just download it and include it in your page.

$("#start_date").datetimepicker({
    format: 'Y-m-d H:00:00',
    onChangeDateTime: function(dp, $input){
        var dt2 = $('#end_date');
        var minDate = $('#start_date').val();
        var currentDate = new Date();
        var targetDate = moment(minDate).toDate();
        var dateDifference = currentDate - targetDate;
        var minLimitDate = moment(dateDifference).format('YYYY/MM/DD');
        var endDate = moment(dt2.val()).toDate();
        if((currentDate - endDate) >= (currentDate - targetDate))
            dt2.datetimepicker({
                'value': minDate
            });
        dt2.datetimepicker({
            'minDate': '-'+minLimitDate
        });
    }
});
$("#end_date").datetimepicker({
    format: 'Y-m-d H:00:00'
});

I am sure there is a better way to do this but I couldn't find it. So I hope this helps someone in the future.

your solution should be in the top to help others. – Kvvaradha Oct 25 '19 at 10:17 — Kvvaradha, Oct 25 '19 at 10:17

score 1 · Answer 6 · answered Mar 18 '19 at 12:28

In jQuery UI datepicker there is many Functions which are helpful to set minDate or maxDate dynamically like onSelect, onClose.

demo of onClose is already provided in @Tanvir's answer see here: datepicker onClose example

So i will give you example of onSelect.

before it i will tell you difference between onSelect and onclose, as Name suggests onSelect fire just after user selects a date and onClose fire when datepicker closes after date selection, that's all.

here we have two datepicker pickupdate1 and pickupdate2, and we want to set selected date of pickupdate1 to be minDate of pickupdate2 and it should be dynamic, so here's the code:

$("#pickupdate1").datepicker({
    dateFormat: "dd-mm-yy",
    onSelect: function (selectedDate) {                                           
         $('#pickupdate2').datepicker('option', 'minDate', selectedDate);
    }
});
$("#pickupdate2").datepicker({
   dateFormat: "dd-mm-yy",
});

score 0 · Answer 7 · answered Jun 28 '18 at 05:05

0

This worked for me

<input type="date" name="cname" value=""  min="<?php echo date("Y-m-d") ?>"/>

answered Jun 28 '18 at 05:05

Raghuram db

1,331
3
10
16

score 0 · Answer 8 · answered Sep 02 '20 at 11:07

Please use latest version of bootstrap.min.js

$("#from").datepicker( {
        format: "dd-mm-yyyy",
        endDate: '+0d',
        autoclose: true,
    }).on('changeDate', function(e) {
    
        var oldDate = $('.datepicker-current').val();
    
        $('#to').data('datepicker').setEndDate(oldDate);
    
    });

score 0 · Answer 9 · answered Jan 23 '12 at 10:10

0

There is an example on trentrichardson.com. They are using "onSelect". For me it's not working perfert. When setting minDate or MaxDate the time component is set to 0 and only the date remains. And I had to solve some localization problems.

answered Jan 23 '12 at 10:10

uli78

1,004
1
19
27

jquery datetime picker set minDate dynamic

9 Answers9

Linked

Related