如何在 MaterializeCSS 日期选择器中禁用特定日期答案

【问题标题】：How to Disable Specific Dates in MaterializeCSS datepicker如何在 MaterializeCSS 日期选择器中禁用特定日期
【发布时间】：2016-08-11 06:37:58
【问题描述】：

尝试在 materializeCSS 日期选择器中禁用某些特定日期，但没有任何方法来实现此功能。

【问题讨论】：

标签： javascript angularjs datepicker materialize

【解决方案1】：

Materializecss datepicker 只是 pickadate.js 的包装器

所以你可以这样做：

$('.datepicker').pickadate({
  disable: [
    new Date(2015,3,13),
    new Date(2015,3,29)
  ]
})

您可以在此处阅读更多信息：http://amsul.ca/pickadate.js/date/#disable-dates

【讨论】：

如果我有一个 ["10/2/2018", "29/6/2018"] 形式的动态更新数组怎么办。我将如何使用此列表来禁用日期？

【解决方案2】：

这是一个如何接收允许日期的 JSON 并在时间选择器中显示它们的示例。

var $input = $('.datepicker').pickadate()
var picker = $input.pickadate('picker');

picker.stop();
picker.start();

$.get("/dates",
    { id: this.value },
    function(data) {

        let value=[];
        $.each(data, function(key, element) {
            let fecha=new Date(element.date);
            value.push([fecha.getFullYear(),
                fecha.getMonth(),
                fecha.getDate()+1]);
        });
        picker.set('disable', value);
        picker.set('disable', 'flip');
        picker.open(false);

    });

【讨论】：

【解决方案3】：

$('.datepicker').pickadate({
  disable: [
    {from: [2017,5,12], to: [2017,5,12]}
  ]
})

【讨论】：

在堆栈溢出时通常会感谢一些解释。

【解决方案4】：

JavaScript 原版 在 Materialise - 日期选择器中禁用一个或多个特定日期

disableDayFn:function (date) {

            let disableListDate = [new Date('2018,12,5').toDateString(),new Date('2018,12,6').toDateString()];

                if(disableListDate.includes(date.toDateString())) {
                    return true
                }else{
                    return false
                }

            }

【讨论】：

【解决方案5】：

var iptalTarih = ['04/18/2019', '05/20/2019']; // Your Dates Here in 'mm/dd/yyyy'

function disableDates(iptalTarih) {
    for (var i = 0; i < iptalTarih.length; i++) {
            var 
            fullDisabledDate    = new Date(iptalTarih[i]),
            getDisabledMonth    = fullDisabledDate.getMonth(),
            getDisabledDay      = fullDisabledDate.getDate(),
            getDisabledYear     = fullDisabledDate.getFullYear();

            $('.datepicker-modal.open').find('button.datepicker-day-button[data-year="'+getDisabledYear+'"][data-month="'+getDisabledMonth+'"][data-day="'+getDisabledDay+'"]').parent('td').addClass('is-disabled');

    }
}

在哪里初始化你的日期选择器：

    $('.datepicker').datepicker({
        // ... some your settings
        format          : 'mm/dd/yyyy',
        onDraw          : function() {disableDates(iptalTarih);}
        onOpen          : function() {setTimeout(function() {disableDates(iptalTarih)},300)},
    })

【讨论】：