主页 / 问题 / 708849
Accepted
Nikolay Baranenko
Asked:2020-08-22 07:50:18 +0800 CST2020-08-22 07:50:18 +0800 CST

如何动态更改 datetimepicker 中的 minDate 和 maxDate 边界？

  • 772

你好。

我在表格上有 2 个日期时间选择器

我用 document.create 像这样定义它们

$(document).ready(function()
    {
        $('#datetime_from').datetimepicker(
            {
                maxDate: tdatetime,
                onSelect: function(selected,evnt) {
                    updateDateTime_from(selected);
                }
            }
        ).datetimepicker("setDate", fdatetime);

        $('#datetime_to').datetimepicker(
            {
                minDate: fdatetime,
                onSelect: function(selected,evnt) {
                    updateDateTime_to(selected);
                }
            }
        ).datetimepicker("setDate", tdatetime);
});

在我定义 updateDateTime_from、updateDateTime_to 之外，以处理其中日期和时间选择的更改我尝试调整 minDate 和 maxDate 选项

function updateDateTime_from(value){
$("#datetime_to").datetimepicker("option", "minDate", value);
};
function updateDateTime_to(value){
$("#datetime_from").datetimepicker("option", "maxDate", value);
};

事实上，动态转移到值传递正确，但 minDate 和 maxDate 的变化不会发生....

错误是什么以及如何解决？

模拟https://jsfiddle.net/drno/ahvLcexq/

在 datetime_from 中更改时间 - C

在此处输入图像描述

datetime_to 中的 minData 正在发生变化

在此处输入图像描述

但是它应该将 datetime_to 中的最小时间和日期选择字段移动到 ON，但它不会移动

在此处输入图像描述

javascript

1 个回答

  1. Best Answer

    下午好！

    老实说，我并没有完全理解到底发生了什么，但我可以肯定地说两件事：

    1. 刷新不会帮助您解决问题。
    2. 问题是您正在分配此控件（DateTimePicker）不理解的值

    解决方案是以javascript 日期格式分配 mindate 或 maxdate，这是一件可怕的事情，因为不同的浏览器处理它的方式不同。🙂

    因此，您可以使用句柄解析您的值变量，或者不浪费时间并转向为您执行此操作的库。我强烈推荐 momentJS 库，它可以很好地处理不同的浏览器。

    这是该怎么做

    function updateDateTime_from(value) {
      //value -> трансформировать в объект javascript Date

      $("#datetime_to").datetimepicker("option", "minDate", ВАШ_ОБЪЕКТ);
      //$("#datetime_to").datetimepicker("refresh");
    };

    在 MomentJS 的帮助下，可以这样解决：

    var rr = moment(value, "DD.MM.YYYY HH:mm"); //rr это ОБЪЕКТ_МОМЕНТ
$("#datetime_to").datetimepicker("option", "minDate", rr.toDate()); //rr.toDate() это ВАШ_ОБЪЕКТ - javascript Date

    您的代码如上所述工作（为我自己格式化了一下）。

    https://jsfiddle.net/pvkovalev/2eq01b28/

    同样，我有点不明白，但一切似乎都有效。希望能帮助到你。祝你好运🙂

    更新 2017-08-21 22:07

    因此，基于搜索引擎 bootstrap-datetimepicker 提供给我的组件的替代解决方案位于http://eonasdan.github.io/bootstrap-datetimepicker

    它带有很多库，并按以下顺序安装：

    1. jQuery
    2. Moment.js
    3. 引导程序.js
    4. 引导日期选择器脚本
    5. 引导 CSS
    6. 引导日期选择器 CSS
    7. 瞬间的语言环境

    更多在这里

    接下来，复制示例并稍微调整代码：

    HTML

    <div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <div class='input-group date' id='datetimepicker1'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

    JS

    $(document).ready(function() {
  $('#datetimepicker1').datetimepicker({
    locale: 'ru',
    minDate: moment('21.08.2017 08:23', 'DD.MM.YYYY HH:mm'),
    maxDate: moment('21.08.2017 14:53', 'DD.MM.YYYY HH:mm')
});
});

    似乎工作正常。

    一个完整的工作示例可以在这里找到

    我没有其他选择🙂我希望这个可以帮助你。祝你好运🙂

    • 1

相关问题