Plugin bootstrap-material-datetimepicker disable days of the week

  

Update

     

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   05/05/2016.

     

Add option to enable specified days # 98

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

Example:

Parameter-enabled days that remain enabled.

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

Starting at 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");
      }
    });
  }
}

Looking like this:

Nowyouneedtotriggerthisbehaviorwhenmodalopen,inthisexampleIaddedattheendofonFocus:

Theresultlookslikethis:

This plugin does not support this functionality. To do this you need to change the plugin code or look for another alternative. I made a change to the plugin 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 fourth and sixth variables and use them in if to remove or not the 'dtp-select-day' class (which is used to identify the days that can be selected) and the day's href is being built in the calendar. If you want you can apply it to your bootstrap-material-datetimepicker.js and see if that suits you.

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

Follow the plugin: link

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, dates 21 and 22 of month 11 of Year 2013 are disabled.

Looking at the documentation in their Git, they do not have this functionality. What you can do is open an issue for them: link

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

Here are some examples of other tools:

link

link