Twitter bootstrap 启动日期时间选择器更改在初始化后禁用天_Twitter Bootstrap_Eonasdan Datetimepicker

Twitter bootstrap 启动日期时间选择器更改在初始化后禁用天

twitter-bootstrap

Twitter bootstrap 启动日期时间选择器更改在初始化后禁用天,twitter-bootstrap,eonasdan-datetimepicker,Twitter Bootstrap,Eonasdan Datetimepicker,我尝试在初始化datetimepicker后更改禁用的天数我使用ajax调用来实现这一点，但我试图简化代码。我尝试了$'datetimepicker'.dataDateTimePicker.FUNCTION 对于我尝试的函数.disableddates、.setDisabledDates 第一个删除了以前声明的禁用日期，但没有添加新的日期 <html> <head> <link rel="stylesheet" href="https://maxcd

我尝试在初始化datetimepicker后更改禁用的天数

我使用ajax调用来实现这一点，但我试图简化代码。我尝试了$'datetimepicker'.dataDateTimePicker.FUNCTION 对于我尝试的函数.disableddates、.setDisabledDates

第一个删除了以前声明的禁用日期，但没有添加新的日期

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker-standalone.css" >
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" ></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js" type="text/javascript" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/nl.js"></script>
    <script src="/Scripts/bootstrap-datetimepicker.min.js" ></script>
  </head>
  <body>

    <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 class="row">
        <button class="btn button-default" onclick="ChangeDate()" >Change disabled days</button>
      </div>
    </div>

    <script type="text/javascript">
      $(function () {
        $('#datetimepicker1').datetimepicker({
          locale:"nl",
          defaultDate: "2017-06-25",
          disabledDates: ['2017-06-26','2017-06-27','2017-06-28'],
          debug: false                    
        });
      });

      function ChangeDate(){
        alert('ChangeDate geklikt !');
        $('#datetimepicker1').data("DateTimePicker").disabledDates(['2017-06-21','2017-06-22']);
        alert('functie is uitgevoerd !');
      }
    </script>
  </body>
</html>

正如文件所述：

获取[字符串或日期或时刻]值，并禁止用户选择这些日期

如果传递一个字符串数组，则每个元素都应与datetimepicker选项兼容，在您的情况下，默认的L LT为DD-MM-YYYY HH:MM，表示nl语言环境

问题在于datepicker disabledDates函数执行以下操作：

moment('2017-06-21', 'DD-MM-YYYY HH:mm')

将输入字符串解析为2021-06-20禁用，而不是2017-06-21

您只需使用解析函数将数组字符串转换为矩对象数组。请注意，您的输入字符串采用矩识别的符合ISO 8601的格式

这里是一个工作示例：

$'datetimepicker1'.datetimepicker{ 地点：nl，违约日期：2017-06-25，禁用日期：['2017-06-26'、'2017-06-27'、'2017-06-28']，调试：false }; 功能更改日期{ //警报“ChangeDate geklikt！”； $'datetimepicker1'.dataDateTimePicker.disabledDates[ 时刻'2017-06-21'，时刻'2017-06-22' ]; //警报“功能为uitgevoerd！”； } 更改禁用天数

伟大的非常感谢你，这让我忙了好几天。但是我从我的json Web服务中获取日期，比如2017-07-11T00:00:00.0000000，我如何使用这些日期？您可以使用回答moment2017-07-11T00:00:00.0000000中描述的Moments解析日期，或者添加额外格式：['YYYY-MM-DDTHH:MM:ss.sssss']。对不起，我无法工作。我从Web服务中获取值，如“2017-06-29 00:00:00Z”。最小值和最大值设置正确，但未设置禁用数据。disabledDates是一个日期格式相同的数组。在datetimepicker中，我将格式设置为'format:DD-MM-YYYY，locale:'nl'，extraFormats:['YYYY-MM-DDTHH:MM:ss.SSSSSSS']，`初始化后，我执行jQuery'datepicker2'。dataDateTimePicker.DisableDDatesDisabledDays；由于您得到的值类似于“2017-06-29 00:00:00Z”，因此我建议在您的情况下，对数组的每个元素使用类似于矩的值。utc的“2017-06-29 00:00:00Z”。您的意思是我必须将整个数组重新格式化为DisabledDays:[矩。utc2017-06-29 00:00:00Z，矩。utc2017-06-30 00:00:00Z，…]等？datetTimepicker在数组中接受什么格式？