CODEWITHSUNDEEP
jqueryeonasdan-datetimepicker
crimson589
crimson589

Reputation: 1306

eonasdan bootstrap datetimepicker minDate with exception for some past dates

I want to disable past dates except for some(at least one), this is because my form doesn't allow picking past dates, but when I reload the form containing existing data I need to display that date in the date picker, but since I disable past dates, if the data being loaded is a past date, it just defaults to the date today.

$("#datepicker").datetimepicker({
 format: "YYYY-MM-DD, ddd",
 showClear: true,
 disabledDates: ["2020-06-03"],
 enabledDates: ["2020-06-04"],
 minDate: new Date(),
});

I've been experimenting with the 3 options disabledDates, enabledDates, and minDate, If i add a minDate it just disables past dates and ignore my enabledDates. enabledDates doesn't seem to work without disabledDates, I get an error saying "Uncaught Tried 31 times to find a valid date", is my option to just use disabledDates to disable past dates? what's the most optimal solution for creating an array consisting of the past dates so I can put it into disabledDates?

Upvotes: 0

Views: 288

Answers (1)

jzzheng
jzzheng

Reputation: 1

I ran into this exact scenario; the problem is that en/disabled dates take precedence over each other and over min/maxDate.

If you have a less open-ended range of eligible dates, you can just go all-in on enabledDates, as in this answer.

My project included datetimepicker as a js file, so I wound up adding a new option, alwaysEnabledDate.

First time posting, so here's my best stab at explaining how I did it, entirely within bootstrap-datetimepicker.js:

  1. Under isValid definition, after targetMoment.isValid() check and before checks on disabledDates, enabledDates, etc.:
if (options.alwaysEnabledDate && targetMoment.isSame(moment(options.alwaysEnabledDate), granularity)) {
    return true;
}
  1. After the line beginning $.fn.datetimepicker.defaults = {, add: alwaysEnabledDate: false,, e.g.:
$.fn.datetimepicker.defaults = {
    alwaysEnabledDate: false,
    // ... existing code
}
  1. Under the area with the heading "Public API functions" (where you see definitions for picker.toggle, picker.show, picker.ignoreReadOnly, etc.):
picker.alwaysEnabledDate = function (alwaysEnabledDate) {
    if (arguments.length === 0) {
        return options.alwaysEnabledDate ? options.alwaysEnabledDate.clone() : options.alwaysEnabledDate;
    }

    if ((typeof alwaysEnabledDate === 'boolean') && alwaysEnabledDate === false) {
        options.alwaysEnabledDate = false;
        update();
        return picker;
    }

    if (typeof alwaysEnabledDate === 'string') {
        if (alwaysEnabledDate === 'now' || alwaysEnabledDate === 'moment') {
            alwaysEnabledDate = getMoment();
        }
    }

    var parsedDate = parseInputDate(alwaysEnabledDate);

    if (!parsedDate.isValid()) {
        throw new TypeError('alwaysEnabledDate() Could not parse date parameter: ' + alwaysEnabledDate);
    }

    options.alwaysEnabledDate = parsedDate;
    update();
    return picker;
};

Given the above changes, your usage would then be:

$("#datepicker").datetimepicker({
 format: "YYYY-MM-DD, ddd",
 showClear: true,
 alwaysEnabledDate: '2020-06-04',
 minDate: new Date()
});

In this screenshot, I've initialized with a minDate of 6/12, and an alwaysEnabledDate of 6/3.

(Word of warning: I've only tested this approach with day granularity)

Upvotes: 0

Related Questions