Выбор даты и времени в jquery

Ребята, я использую Date timePicker от trentrichardson.com.

У меня есть форма с двумя полями ввода: from и to, и я хочу иметь возможность динамически устанавливать minDate для моего поля "to", равное значению моего поля "from".

Я знаю, что должен использовать опцию beforShow, но не знаю, как реализовать эту функцию.

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

    beforeShow: customRange

});

РЕДАКТИРОВАНИЕ / РЕШЕНИЕ

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 ); 
} }
Источник

7 ответов

Решение

Вы можете установить и получить minDate динамически с помощью setter и getter:

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

объяснил здесь

Источник

Если у вас есть два текстовых поля с соответствующими идентификаторами from а также to и вы хотите minDate из to быть выбранной датой from затем сделайте следующее:

$("#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();
Источник

Вы можете ограничить диапазон выбора даты.

Но вы хотите установить этот диапазон при создании указателя даты на "от". Я сделал вам демо, которое, кажется, работает нормально, насколько я понимаю вопрос.

Источник

Лука: Небольшое дополнение к твоему ответу...

Используя предложенную вами функцию, компонент времени игнорируется при первом отображении выбора даты и времени. Если вы закроете указатель даты и снова откроете его, компонент времени загадочным образом снова появится. Я не совсем уверен, что является причиной этого, но это можно исправить с помощью небольшого взлома:

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);
}
Источник

Используйте последнюю версию 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);
    
    });
Источник

Ни один из приведенных выше ответов не помог мне вообще. Это либо не сработало, либо выдало какую-то ошибку.

Поэтому я объединил их все вместе и сделал свой собственный. Я использовал moment.js, как уже упоминалось выше, просто скачайте его и включите в свою страницу.

$("#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'
});

Я уверен, что есть лучший способ сделать это, но я не смог его найти. Поэтому я надеюсь, что это поможет кому-то в будущем.

Источник

В jQuery UI datepicker Есть много функций, которые полезно установить minDate или же maxDate динамически как onSelect, onClose,

демо onClose уже предоставлено в ответе @Tanvir см. здесь: datepicker onClose пример

Так что я дам вам пример onSelect,

перед этим я скажу вам разницу между onSelect а также onclose как следует из названия onSelect огонь сразу после того, как пользователь выбирает дату и onClose срабатывает, когда указатель даты закрывается после выбора даты, вот и все.

здесь у нас есть два DatePicker pickupdate1 а также pickupdate2 и мы хотим установить выбранную дату pickupdate1 быть мини-датой pickupdate2 и он должен быть динамическим, поэтому вот код:

$("#pickupdate1").datepicker({
    dateFormat: "dd-mm-yy",
    onSelect: function (selectedDate) {                                           
         $('#pickupdate2').datepicker('option', 'minDate', selectedDate);
    }
});
$("#pickupdate2").datepicker({
   dateFormat: "dd-mm-yy",
});
Источник

Это сработало для меня

<input type="date" name="cname" value=""  min="<?php echo date("Y-m-d") ?>"/>
Источник

На trentrichardson.com есть пример. Они используют "onSelect". Для меня это не работает Perfert. При установке minDate или MaxDate компонент времени устанавливается на 0, и остается только дата. И мне пришлось решить некоторые проблемы локализации.

Источник
Другие вопросы по тегам