1

trying to disable some specific dates in materializeCSS datepicker, but not getting any way to implement this feature.

5 Answers 5

2

Materializecss datepicker is just wrapper for pickadate.js

So you can do in that way:

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

You can read more about it here: http://amsul.ca/pickadate.js/date/#disable-dates

Sign up to request clarification or add additional context in comments.

1 Comment

What if I have an array of dynamically updates in the form ["10/2/2018", "29/6/2018"]. How would I use this list to disable the dates?
2

This is an example of how to receive a JSON of allowed dates and show them in the timepicker.

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);

    });

Comments

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

1 Comment

Some words of explanation usually are appreciated on stack overflow.
0

JavaScript Vanilla Disable one or more specific date in Materialize - Date picker

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
                }

            }

Comments

0
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');

    }
}

and where initialize your datepicker :

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.