在 materializecss 中设置最小日期”日期选择器

Question

有人知道如何为 "materializecss" 日期选择器设置最短日期吗？官方网站没有相关信息。

Answer 1

Material Design uses pickadate.js internally. And documentation for this is avaialble here 中的日期选择器。所以这应该有效：

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

如前所述here。

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

Answer 2

您可以使用：

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

Answer 3

对于 Materialise 版本 1，事情发生了变化：

.datepicker::placeholder {
  color: #000;
  text-align: center;
}

<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: only today available per setting">

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

在 materializecss 中设置最小日期”日期选择器

Set min date in materializecss" date picker

javascript

jquery

materialize

参考资料