7

マテリアライズで日付ピッカーを作成しようとしています。ドキュメントによると、ユーザーが日付を選択すると、日付ピッカーは閉じる必要があります。

それは私のページでは機能しません。Windows で最新の Chrome ブラウザを使用しています。私はIEブラウザを試しましたが、日付ピッカー全体が表示されていません...

マイページはこちら（入力3と4は日付ピッカー）

私のJavaScript：

$('#due_date').pickadate({
  monthsFull: [ 'januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december' ],
  monthsShort: [ 'jan', 'feb', 'maa', 'apr', 'mei', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec' ],
  weekdaysFull: [ 'zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag' ],
  weekdaysShort: [ 'zo', 'ma', 'di', 'wo', 'do', 'vr', 'za' ],
  today: 'vandaag',
  clear: 'verwijderen',
  close: 'sluiten',
  firstDay: 1,
  format: 'dd-mm-yyyy',
  formatSubmit: 'yyyy/mm/dd',
  closeOnSelect: true,
  selectMonths: true, // Creates a dropdown to control month
  selectYears: 3, // Creates a dropdown of 15 years to control year
  min: new Date()
});

これらの日付ピッカーを修正するのを手伝ってくれる人はいますか?

4

7 に答える 7

2

マテリアライズの開発者は、この問題に従って選択時に閉じない場合、Google の日付ピッカーと一致すると考えました。

https://github.com/Dogfalo/materialize/issues/870

ただし、よろしければ次のようにマテリアライズのソース コードを変更できます。

https://github.com/Dogfalo/materialize/commit/db0629d30a9d3e5ac06a019955a8e10062f91833

于 2015-05-07T12:08:27.093 に答える
1

私は同じ問題を抱えていて、このように解決しました：

 $('.datepicker1').pickadate({
    selectMonths: true, // Creates a dropdown to control month
    selectYears: 15, // Creates a dropdown of 15 years to control year
    min: true,
    onOpen: function () {
      this.clear();
    },
    onSet: function () {
      var x,y,year,date,month;
      x = $('.datepicker1').pickadate().val().toString();
      y = x.split(/[ ,]+/);
      date = y[0];
      month = y[1];
      year = y[2];
      console.log(y[0]+" "+ y[1]+ " "+ y[2]);
      if(date && month && year){
        this.close();
      }
    }
  });
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Materialize Datepicker</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
</head>
<body>
  <form class="col s6">
   <label for="To" >To : </label> 
   <input type="date" id="To" class="datepicker1">
  </form>
  
  <script src="site.js"></script>
</body>
</html>

onSet: 関数 (日付が設定されたときに呼び出されます) は、日付、月、年が入力されていることを確認し、日付が設定されている場合にのみ閉じます。

onOpen: 関数 (datepicker が開いたときに呼び出されます) は、datepicker が再度開かれたときに入力をクリアします。これは、ユーザーが間違った日付を入力した場合に役立ちます..

これで問題が解決することを願っています。

于 2015-06-03T21:20:41.453 に答える
0

「closeOnSelect: true」が機能しない場合は、閉じるボタンのクリック イベントを呼び出すことができます。

入力要素の HTML コード:

<input type='text' id='purchase_date'/>

要素の Js コード:

jQuery(document).ready(function(){
   $('#purchase_date').pickadate({format: 'yyyy-mm-dd'})
                      .on('change', function(){
                              $(this).next().find('.picker__close').click();
                      });
});

これで問題が解決することを願っています。

于 2016-09-11T12:27:57.883 に答える