在materializecss中设置最小日期＆＃34;日期选择器

Question

有人知道如何设置＆＃34; materializecss＆＃34;日期选择器？ 官方网站没有关于它的内容信息。

Answer 1

Material Design中的

datepicker在内部使用pickadate.js。这方面的文档是可用的here。所以这应该有效：

$('.datepicker').pickadate({
  min: new Date(2015,3,20),
  max: new Date(2015,7,14)
});

如上所述here。

以下是一个工作示例：https://jsfiddle.net/ashishanexpert/oxdbyk7t/

Answer 2

对于Materialize版本1，情况已更改：

<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/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<input type="text" class="datepicker" placeholder="click and pick">

<script>
jQuery('.datepicker').datepicker({ // intitiate datepicker for each element with class name "datepicker"
  minDate: new Date('2020-01-13'), // set minimum date to "self explanatory"
  maxDate: new Date(), // set maximum date to "today"
  autoClose: true // [optional] enable date picking on a very small window
})
</script>

参考文献

• Materialize Date Picker
• Date

Answer 3

您可以使用：

$('.datepicker').datepicker({
    onOpen: function () {
        var instance = M.Datepicker.getInstance($('.datepicker'));
        instance.options.minDate = new Date(YOUR_DATE);
    }
});