Plugin bootstrap-material-datetimepicker disable days of the week

Question

I’m using the Timepicker plugin called bootstrap-material-datetimepicker:

(https://github.com/T00rk/bootstrap-material-datetimepicker).

I’d like to be able to shut down some days of the week, or just turn on Wednesdays and Fridays, but I’m not getting it, so can someone give me a hand? thank you

Answer 1

Updating

I made a pull request to add this option to the plugin, the authors validated and added the version that is already available on the date 04/05/2016.

Add option to enable specifi days #98

As the above mentioned, there is no such behavior, but you can easily customize and add your behaviors to any plugin, just understand how it works.

Example:

Pass the days that remained enabled by parameter.

$('#date').bootstrapMaterialDatePicker({
      time: false,
      clearButton: true,
      enableDays: [3, 5]
});

Starting with index 0 [3,5] are equivalent to Fourth and Sixth.

Now open the file: bootstrap-material-datetimepicker.js

Add the following behavior:

enableDays: function() {
  var enableDays = this.params.enableDays;
  if (enableDays) {
    $(".dtp-picker-days tbody tr td").each(function() {
      if (!(($.inArray($(this).index(), enableDays)) >= 0)) {
        $(this).find('a').css({
          "background": "#e3e3e3",
          "cursor": "no-drop",
          "opacity": "0.5"
        }).off("click");
      }
    });
  }
}

Thus remaining:

Now you need to trigger this behavior when the modal opens,in this example I added at the end of onFocus:

The result looks like this:

Answer 2

This plugin does not support this feature. To do this you need to change the plugin code or find another alternative. I made a change to the plugin’s constructHTMLCalendar function to perform this check you requested:

constructHTMLCalendar: function(date, calendar)		{
var _template = "";

...
if(calendar.days[i] != 0)
{
	if(this.isBeforeMaxDate(moment(calendar.days[i]), false, false) === false || this.isAfterMinDate(moment(calendar.days[i]), false, false) === false)
	{
		_template += '<span class="dtp-select-day">' + moment(calendar.days[i]).locale(this.params.lang).format("DD") + '</span>';
	}
	else
	{
		var quarta = 3;
		var sexta = 5;
			if(moment(calendar.days[i]).locale(this.params.lang).format("DD") === moment(this.currentDate).locale(this.params.lang).format("DD"))
			{
				if(new Date(calendar.days[i]._d).getDay() == quarta || new Date(calendar.days[i]._d).getDay() == sexta){
					_template += '<a href="javascript:void(0);" class="dtp-select-day selected">' + moment(calendar.days[i]).locale(this.params.lang).format("DD") + '</a>';	
				}else{
					_template += '<a class="selected">' + moment(calendar.days[i]).locale(this.params.lang).format("DD") + '</a>';
				}
			}
			else
			{
				if(new Date(calendar.days[i]._d).getDay() == quarta || new Date(calendar.days[i]._d).getDay() == sexta){
					_template += '<a href="javascript:void(0);" class="dtp-select-day">' + moment(calendar.days[i]).locale(this.params.lang).format("DD") + '</a>';
				}else{
					_template += '<a disabled="disabled">' + moment(calendar.days[i]).locale(this.params.lang).format("DD") + '</a>';	
				}
			}
	}

		_template += '</td>';
	}
}
_template += '</tr></tbody></table>';

return _template;
},

You can see that I created two variables fourth and sixth and use them in if to remove or not the class 'dtp-select-day' (which is used to identify the days that can be selected) and the href of the day that is being built in the calendar. If you want you can apply it to your bootstrap-material-datetimepicker.js and see if it suits you.

Answer 3

Using Bootstrap 3 Datepicker v4 do eonasdan, they already implement the functionality to disable specific dates, for the user not to select.

Follow the plugin: https://eonasdan.github.io/bootstrap-datetimepicker/

Enabled/Disabled Dates

$('#datetimepicker5').datetimepicker({
   defaultDate: "11/1/2013",
   disabledDates: [
      moment("12/25/2013"),
      new Date(2013, 11 - 1, 21),
      "11/22/2013 00:53"
    ]
});

In this case, the dates 21 and 22 of the month 11 of the Year 2013 are disabled.

Answer 4

Looking at their Git documentation, they don’t have this feature. What you can do is open an "Issue" for them: https://github.com/T00rk/bootstrap-material-datetimepicker/issues

Until then, what you can do is look for another tool or wait for their response.

Here are some examples of other tools:

http://www.material-ui.com/#/Components/date-Picker

https://github.com/ripjar/material-datetime-picker