如何在 Materialise 中打开日期选择器时设置初始自定义变量日期

Question

我使用了两个 Materialise 日期选择器。打开日期选择器后，我希望日期选择器显示/使用 html 输入字段中已有的日期。我正在考虑 onOpen 回调并使用原生 .setDate() 函数。但是我有两个日期选择器，没有发现 onOpen 是否接受任何参数。

var datepickerOptions ={
        
  format: 'yyyy-mm-dd',
  autoClose : "true",
  firstDay : 1,
  onOpen : function(arg) {
   console.log(arg)
  }
}  
  
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.datepicker');
    var instances = M.Datepicker.init(elems, datepickerOptions);
  });

我正在使用 Materialise v1.0。正在工作 jsFiddle is here

Answer 1

你可以这样做：

var date_picker_1;
var date_picker_2;
var datepickerOptions = {
  format: 'yyyy-mm-dd',
  autoClose: "true",
  firstDay: 1,
}

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.datepicker');
  var instances = M.Datepicker.init(elems, datepickerOptions);
  date_picker_1 =  M.Datepicker.getInstance(document.getElementById("date_picker_1"));
  date_picker_2 =  M.Datepicker.getInstance(document.getElementById("date_picker_2"));
  date_picker_1.setDate(new Date("2021-05-12"));
  date_picker_2.setDate(new Date("2021-05-25"));
});

这是一个工作示例：https://jsfiddle.net/doz2htv6/34/

Answer 2

如果您想使用 onOpen 和 setDate 方法（可能对日期的设置方式进行更精细的控制，或者处理 value 的格式属性），您可以使用 this.el.value 属性来检索预先配置的日期。这是一个基于您的 fiddle 的工作示例：https://jsfiddle.net/2rLg0c1z/.

var datepickerOptions = {
  format: 'yyyy-mm-dd',
  autoClose: "true",
  firstDay: 1,
  onOpen: function() {
    this.setDate(new Date(this.el.value));
  }
}

否则，自动解析和设置来自 value 属性的日期的更简单方法是使用 setDefaultDate 属性，这在小部件的初始化中基本上会执行相同的操作:

var datepickerOptions = {
  format: 'yyyy-mm-dd',
  autoClose: "true",
  firstDay: 1,
  setDefaultDate: true
}

Answer 3

您可以简单地使用 documentation 中的 defaultDate 和 setDefaultDate 选项，并使用它们来初始化每个日期选择器。

您将 defaultDate 字段设置为从输入值创建的日期对象，并将 setDefaultDate 字段设置为 true 以在打开输入时使用输入中的默认日期。

document.addEventListener('DOMContentLoaded', () => {
    const pickers = document.querySelectorAll('.datepicker');
    pickers.forEach((picker) => {
        const options = {
            format: 'yyyy-mm-dd',
            autoClose : true,
            firstDay : 1,
            defaultDate: new Date(picker.value),
            setDefaultDate: true
        };
        M.Datepicker.init(picker, options);
    });
});

body {
    padding: 3em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<input class="datepicker" type=text value="2021-05-12" />
<input class="datepicker" type=text value="2021-05-25" />

Answer 4

在您的原始示例中添加 setDefaultDate: true 选项就足够了：

var datepickerOptions = {
  format: 'yyyy-mm-dd',
  autoClose : "true",
  firstDay : 1,
  setDefaultDate: true
}

这将自动选取您在 HTML 标记中添加到 input 字段的值。 不需要在JavaScript代码中明确设置日期。

根据您的示例，这是最低限度的工作 Fiddle： https://jsfiddle.net/3j6cezfy/

如何在 Materialise 中打开日期选择器时设置初始自定义变量日期

How to set initial custom variable date upon datepicker opening in Materialize

javascript

materialize