使用 jquery 触发另一个日期时间选择器

Question

我想在另一个选择器中选择日期后打开datepicker选择器。 为此，我们可以在datepicker看到如此多的建议和答案，但我找不到datetimepicker解决方案。 我在项目中使用的默认datetimepicker是这样的

$('.datepicker').datetimepicker({
    format: 'MM/DD/YYYY',
    icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-chevron-up",
        down: "fa fa-chevron-down",
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-screenshot',
        clear: 'fa fa-trash',
        close: 'fa fa-remove',
        inline: true
    }
});

试试

$( "#QuoteDate" ).datepicker({
    minDate: 0, 
    changeMonth: true,
    changeYear: true,
    maxDate: "+2Y",
    onSelect: function( selectedDate ) {
        $( "#DueDate" ).datepicker("option", "minDate", selectedDate );
        setTimeout(function(){
            $( "#DueDate" ).datepicker('show');
        }, 16);
    }
});
$( "#DueDate" ).datepicker({
    changeMonth: true,
    changeYear: true,
    maxDate: "+2Y",
});

如果我尝试像onSelect一样编码：就像在datepicker一样，它不接受。 请任何人帮助我找到解决方案。 此选择器中的onSelect日期将调用另一个选择器。

Answer 1

如果您需要链接日期时间选择器，请查看文档中的链接选择器示例。

您必须向dp.change事件添加一个监听器，因为 datetimepicker 没有onSelect选项。 请注意dp.change ：

当日期改变时触发。

参数：

 e = { date, //date the picker changed to. Type: moment object (clone) oldDate //previous date. Type: moment object (clone) or false in the event of a null }

您可以使用show()函数打开第二个日期时间选择器。

这是一个完整的现场示例：

 var icons = { time: "fa fa-clock-o", date: "fa fa-calendar", up: "fa fa-chevron-up", down: "fa fa-chevron-down", previous: 'fa fa-chevron-left', next: 'fa fa-chevron-right', today: 'fa fa-screenshot', clear: 'fa fa-trash', close: 'fa fa-remove', //inline: true }; $('#QuoteDate').datetimepicker({ format: 'MM/DD/YYYY', useCurrent: false, minDate: moment().startOf('day'), maxDate: moment().add(2, 'years'), icons: icons }).on('dp.change', function(e){ console.log('change', e.date, e.oldDate); if( ( e.date && !e.oldDate ) || ( e.date && e.oldDate && !e.date.isSame(e.oldDate, 'day') ) ){ setTimeout(function(){ $('#DueDate').data("DateTimePicker").show(); }, 16); } $('#DueDate').data("DateTimePicker").minDate(e.date); }); $('#DueDate').datetimepicker({ format: 'MM/DD/YYYY', useCurrent: false, minDate: moment().startOf('day'), maxDate: moment().add(2, 'years'), icons: icons }).on('dp.change', function(e){ $('#QuoteDate').data("DateTimePicker").maxDate(e.date); });

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script> <div class='col-sm-6'> <div class="form-group"> <div class='input-group date' id='QuoteDate'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class='col-sm-6'> <div class="form-group"> <div class='input-group date' id='DueDate'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div>

由于您使用的是 datetimepicker，您可以使用minDate: moment().startOf('day')而不是minDate: 0和maxDate: moment().add(2, 'years')而不是maxDate: "+2Y" (有关更多信息，请参阅时刻startOf()和add()文档）。

正如Linked Pickers示例中所建议的，您必须使用useCurrent: false选项。

Answer 2

我认为您正在寻找change事件，因此当您在其中一个 datepicker 中选择了一个日期时，您可以触发一个回调它已更改，然后在 openAnotherDatePicker 函数中，您可以尝试从事件中获取选定的值使用 jquery .val()函数并将所选日期传递给下一个日期选择器

更新：这是 xdan datetimepicker 的实时和工作示例：

 var setMinDate = function( currentDateTime ){ this.setOptions({minDate:currentDateTime}); }; $('#QuoteDate').datetimepicker({ format:'dmY h:i', onChangeDateTime:openAnotherDatePicker, closeOnDateSelect:true }); $('#DueDate').datetimepicker({ format:'dmY h:i', onShow:setMinDate, closeOnDateSelect:true }) function openAnotherDatePicker( selectedDate ) { $( "#DueDate" ).val($( "#QuoteDate" ).val()); $( "#DueDate" ).datetimepicker('show'); }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js"></script> <p> Start <br /><input id="QuoteDate" type="text" value="12-11-2017 06:24"> <br /> End <br /><input id="DueDate" type="text" value="13-11-2017 06:24"> </p>