基础日期选择器,结束日期(和时间)不能早于开始日期(和时间)

时间:2016-04-27 05:26:55

标签: javascript jquery datetime datepicker zurb-foundation

我正在使用Foundation-Datepicker,因此用户只能选择当前日期之后的开始日期(即无法选择所有其他值)。

我希望结束日期与用户只能在开始日期之后选择日期的方式相同。

我的日期(天)有效,即如果开始日期是2016年1月3日,则用户无法选择2016年1月1日作为结束日期。

我的第一个问题是由于我不能让开始日期与结束日期相同,其次因为我也在使用时间我希望它在开始日期/时间之后禁用所有选择结束日期/时间弹出窗口。

即。用户可以选择2016年1月1日,13:00作为开始,1月1日,14:00结束。

我的代码如下:

// Get Date of today
var newDate = new Date();
// Prase newDate
var now = new Date(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), 0, 0, 0, 0);
// Initialize datepicker with restricted date
var startDate = $('.has-datepicker').fdatepicker({
    format: "dd/mm/yyyy - hh:ii",
    pickTime: true,
    onRender: function (date) {
        return date.valueOf() < now.valueOf() ? 'disabled' : '';
    }
}).on('changeDate', function (e) {
    if (e.date.valueOf() > endDate.date.valueOf()) {
        var newDate = new Date(e.date);
        newDate.setDate(newDate.getDate() + 1);
        endDate.update(newDate);
    }
}).data('datepicker');

var endDate = $('.has-datepicker2').fdatepicker({
    format: "dd/mm/yyyy - hh:ii",
    pickTime: true,
    onRender: function (date) {
        return date.valueOf() <= startDate.date.valueOf() ? 'disabled' : '';
    }
}).on('changeDate', function(e) {

}).data('datepicker');

1 个答案:

答案 0 :(得分:0)

// implementation of disabled form fields
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#dpd1').fdatepicker({
    onRender: function (date) {
        return date.valueOf() < now.valueOf() ? 'disabled' : '';
    }
}).on('changeDate', function (ev) {
    if (ev.date.valueOf() > checkout.date.valueOf()) {
        var newDate = new Date(ev.date)
        newDate.setDate(newDate.getDate() + 1);
        checkout.update(newDate);
    }
    checkin.hide();
    $('#dpd2')[0].focus();
}).data('datepicker');
var checkout = $('#dpd2').fdatepicker({
    onRender: function (date) {
        return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
    }
}).on('changeDate', function (ev) {
    checkout.hide();
}).data('datepicker');

尝试这样..更好地浏览网站和文档