初期化後のブートストラップdatetimepickerの変更が無効になった

datetimepickerが初期化された後に無効な日数を変更しようとしました。初期化後のブートストラップdatetimepickerの変更が無効になった

私はこれをajax呼び出しで行いますが、コードを単純化しようとしました。試しましたFUNCTIONのために$('#datetimepicker').data("DateTimePicker").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>

出典

2017-06-27 Texellab

はdisabledDates状態：

は、値の[string又はDate又はmoment]を取り、それらの日を選択することをユーザに許可しません。

あなたがstringsの配列を渡す場合、各要素は、DateTimePickerのformatオプション（nlロケールのDD-MM-YYYY HH:mmであるあなたのケースでは、デフォルトL LT）と互換性があります。

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

（2017-06-21するのではなく、無効）2021-06-20として入力文字列を解析している：

問題は、日付ピッカーdisabledDates機能がないということです。

moment(String)解析関数を使用して、配列文字列をモーメントオブジェクトの配列に変換できます（入力文字列はISO 8601に準拠した形式で認識されます）。

ここで働いサンプル：

$('#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([ 
 
    moment('2017-06-21'), 
 
    moment('2017-06-22') 
 
    ]); 
 
    //alert('functie is uitgevoerd !'); 
 
}

<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"/> 
 

 
<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"></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="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<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>

問題を解決する別の方法は正しく解析するためにどのようにコンポーネントを伝えるためにDateTimePickerの設定にextraFormats: ['YYYY-MM-DD']オプションを追加することであるような文字列'2017-06-21'および'2017-06-22'。

出典

2017-06-27 22:02:01 VincenzoC

素晴らしい！どうもありがとうございました。しかし、私は "2017-07-11T00：00：00.0000000"のような私のjson webserviceからの日付を取得します、どうすればこれらを使うことができますか？ – Texellab

答えに書かれているように、瞬間を使って日付を解析するか（ '瞬間（" 2017-07-11T00：00：00.0000000 "'）、 'extraFormats：['YYYY-MM-DDTHH：mm：ss.SSSSSSS'] '。 – VincenzoC

申し訳ありません私は働くことはありません。 '2017-06-29 00：00：00Z'のようなwebserviceから値を取得します.minとmaxValuesは正しく設定されていますが、disabledDatesは設定されていません。 datetimepickerでは、フォーマット：（ "DD-MM-YYYY"）、ロケール： 'nl'、extraFormats：['YYYY-MM-DDTHH：mm：ss.SSSSSSS']のフォーマットを設定しました。（ 'DateTimePicker'）。disabledDates（pDisabledDays）; ' – Texellab

初期化後のブートストラップdatetimepickerの変更が無効になった

答えて

関連する問題