物化日期选择器 SelectOnClose 不起作用答案

【问题标题】：Materialize datepicker SelectOnClose not working物化日期选择器 SelectOnClose 不起作用
【发布时间】：2015-04-05 21:06:09
【问题描述】：

我正在尝试使用 Materialize 创建一个日期选择器。根据documentation，当用户选择日期时，日期选择器应该关闭。

这在我的页面中不起作用。我在 Windows 上使用最新的 Chrome 浏览器。我试过IE浏览器，但是整个日期选择器没有显示...

Click here for my page（输入 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()
});

谁能帮我修复这些日期选择器？

【问题讨论】：

我觉得是因为开发者改了github.com/Dogfalo/materialize/commit/…

标签： datepicker cross-browser materialize

【解决方案1】：

请在您的代码中添加以下几行..

onSet: function (ele) {
   if(ele.select){
          this.close();
   }
}

【讨论】：

我想知道为什么closeOnSelect 选项不再正常工作？它仍然被记录在案。

【解决方案2】：

var datePicker = $('.datepicker').pickadate({
    onSet: function () {
        this.close();
    }
});

【讨论】：

这个解决方案的问题是，只要我点击日期选择器上的任意位置，它就会执行并关闭，不仅仅是在我选择日期时，而是在我更改月份或年份时

【解决方案3】：

materialize 的开发者认为，如果它没有根据这个 issue 关闭 select，它会匹配谷歌的日期选择器：

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

但是如果你不介意你可以改变materialize的源代码，像这样：

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

【讨论】：

【解决方案4】：

更好的解决方案：使用if ( 'select' in arg ) 条件，这样当您选择月份或年份时，日期选择器对话框就不会隐藏。

$('.datepicker').pickadate({
    onSet: function( arg ){
        if ( 'select' in arg ){ //prevent closing on selecting month/year
            this.close();
        }
    }
});

【讨论】：

虽然这段代码可能有助于解决问题，但它并没有解释为什么和/或如何回答问题。提供这种额外的背景将显着提高其长期教育价值。请edit您的答案添加解释，包括适用的限制和假设。

【解决方案5】：

我遇到了同样的问题，我是这样解决的：

 $('.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: 函数（在日期选择器打开时调用）在日期选择器再次打开时清除输入，在用户输入错误日期时很有用。如果不使用此功能，日期选择器无法导航不同的月份，年份关闭..

希望这能解决您的问题。

【讨论】：

这个解决方案的问题是，只要我点击日期选择器上的任意位置，它就会执行并关闭，不仅仅是在我选择日期时，而是在我更改月份或年份时。

【解决方案6】：

如果 "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();
                      });
});

希望这能解决您的问题。

【讨论】：

【解决方案7】：

在 materializecss 1.0.0 上测试：使用 onSelect 回调

$('.datepicker').datepicker({
    autoClose: true,
    today: 'Today',
    clear: 'Clear',
    close: 'Close',
    format: 'dd/mm/yyyy',
    //perform click event on done button
    onSelect: function () {
        $('.confirmation-btns .datepicker-done').click();
    }

});

【讨论】：