マテリアライズ日付ピッカーマテリアライズの日付ピッカーの開始日

Question

前に終了日を防ぐため、私はマテリアライズの日付ピッカーのための最小値と最大値のオプションを発見したが、次のように相互に関連して使用される2 datepickersを設定する方法がわからない：

1. ユーザーは開始日を選択します。
2. ユーザーは終了日を選択する必要がありますが、開始日より前の日付を選択することはできません。
3. ユーザーが終了日を最初に選択した場合、その終了日以降に開始日を選択できなくてすみます。

私はjavascriptプログラマーではないので、これを始める方法もわかりません。私の推測からは、各日付ピッカーのonSetイベントにコードを記述する必要があります。

私はタイムピッカーのために同じことをしようとしています：​​。

誰かがこのコードまたは別の解決策を手助けできますか？

Answer 1

サーバー側の検証用に整理されています。マテリアライズプラグインでクライアント側でこれを行う方法はないようです。

Answer 2

以下のコードはクライアント側で行います。 - ちょうど2つのIDを更新するようにしてくださいあなたはdatepickersが使用されているページにこれを追加することができますhttp://codepen.io/amsul/pen/nGckA

var from_$input = $('#input_from').pickadate(), 
    from_picker = from_$input.pickadate('picker') 

var to_$input = $('#input_to').pickadate(), 
    to_picker = to_$input.pickadate('picker') 


// Check if there’s a “from” or “to” date to start with. 
if (from_picker.get('value')) { 
    to_picker.set('min', from_picker.get('select')) 
} 
if (to_picker.get('value')) { 
    from_picker.set('max', to_picker.get('select')) 
} 

// When something is selected, update the “from” and “to” limits. 
from_picker.on('set', function(event) { 
    if (event.select) { 
    to_picker.set('min', from_picker.get('select'))  
    } 
    else if ('clear' in event) { 
    to_picker.set('min', false) 
    } 
}) 
to_picker.on('set', function(event) { 
    if (event.select) { 
    from_picker.set('max', to_picker.get('select')) 
    } 
    else if ('clear' in event) { 
    from_picker.set('max', false) 
    } 
}) 

：

$('.datepicker').pickadate({ 
     selectMonths: true, // Creates a dropdown to control month 
     closeOnSelect: true, 
     closeOnClear: true, 
     format: 'yyyy-mm-dd', 
     onSet: function (ele) { 
      if(ele.select){ 
        this.close(); 
      } 

      var d1 = $('#startdate').val(); 
      var d2 = $('#enddate').val(); 

      var date1 = new Date(d1); 
      var date2 = new Date(d2); 

      var date1_ms = date1.getTime(); 
      var date2_ms = date2.getTime(); 

      if((date2_ms -date1_ms) <0) 
      { 
       alert('End date cannot be a previous date!'); 
       $('#startdate').val(d2); 

      } 

     } 

     }); 

Answer 3

マテリアライズの日付ピッカーは、以下のソリューションを提供している、pickadate.jsを使用しています（#input_fromと#input_to）は、開始日のの終了日のidsと一致します。