【问题标题】:How to allow maxDate and minDate to be equal on Bootstrap DateTimePicker?如何在 Bootstrap DateTimePicker 上允许 maxDate 和 minDate 相等?
【发布时间】:2020-01-15 14:16:02
【问题描述】:

为了创建报告,我需要能够选择相同的开始日期和结束日期。
我能够做到这一点,但仅限于我第一次选择 maxDate。
之后,我不能选择与 maxDate 相同的 minDate 值。

例如:
浏览器打开。
我选择 01/01/2020 作为开始日期 (minDate)。
我选择 01/01/2020 作为结束日期 (maxDate)。
我将结束日期更改为 2020 年 2 月 1 日。
现在我无法再次选择“01/01/2020”作为结束日期。

我需要能够为 minDate 和 maxDate 选择相同的时刻
我似乎无法在 DateTimePicker 文档中找到解决方案

我尝试在更改事件上设置一些值:

$(".datetimepickerTo").on("dp.change", function (e) {
    $('.datetimepickerFrom').data("DateTimePicker").maxDate(e.date);
});

在 datetimepicker 选择器上:

$('.datetimepickerTo').datetimepicker({
    useCurrent: false
});

【问题讨论】:

  • 您想阻止选择结束日期之后的开始日期吗?
  • @johnSmith 不,我希望能够为开始日期和结束日期选择相同的日期。

标签: javascript jquery bootstrap-datetimepicker


【解决方案1】:

原来是日期格式问题。
出于某种原因,第一次选择日期时,日期输出为:

'2020 年 1 月 1 日星期三 16:39:34 GMT-0300(Horário Padrãode Brasília)'。

“16:39:34”是我选择日期的实际时间。

虽然,在第二次选择时,输出是:

'2020 年 1 月 1 日星期三 00:00:00 GMT-0300(Horário Padrãode Brasília)'

制作两个不同的日期。

我的方法是将日期格式化为我需要的格式。使用此功能:

function formatDate(date) {
    var months = [
        "1", "2", "3",
        "4", "5", "6",
        "7", "8", "9",
        "10", "11", "12"
    ];

    var day = date.getDate();
    var monthIndex = date.getMonth();
    var year = date.getFullYear();

    return day + '/' + months[monthIndex] + '/' + year;
}

输出在哪里:

2020 年 1 月 1 日

然后我只需将格式化的日期传递给 minDate() 和 maxDate() 函数:

$(".datetimepickerFrom").datetimepicker().on("dp.change", function (e) {
    const formattedDate = formatDate(e.date.toDate())
    $('.datetimepickerTo').data("DateTimePicker").minDate(formattedDate);
});

$(".datetimepickerTo").datetimepicker().on("dp.change", function (e) {
    const formattedDate = formatDate(e.date.toDate())
    $('.datetimepickerFrom').data("DateTimePicker").maxDate(formattedDate);
});

【讨论】:

    【解决方案2】:

    我通过在初始化 datetimepicker 之前设置默认时区解决了这个问题:

    moment.tz.setDefault("Europe/Rome")
    
    $('#multi_event_date').datetimepicker({
     ...
    })
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2019-04-11
      • 1970-01-01
      • 1970-01-01
      • 2018-03-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多