¿Limitar el bootstrap-datepicker a los días de semana solamente?

¿Hay alguna forma de permitir solo las selecciones del día de la semana en el datepicker de arranque que se encuentra a continuación? https://github.com/eternicode/bootstrap-datepicker/

Estoy creando una instancia del selector de fecha de esta manera:

$('#datepicker').datepicker(); /* Update datepicker plugin so that MM/DD/YYYY format is used. */ $.extend($.fn.datepicker.defaults, { parse: function (string) { var matches; if ((matches = string.match(/^(\d{2,2})\/(\d{2,2})\/(\d{4,4})$/))) { return new Date(matches[3], matches[1] - 1, matches[2]); } else { return null; } }, format: function (date) { var month = (date.getMonth() + 1).toString(), dom = date.getDate().toString(); if (month.length === 1) { month = "0" + month; } if (dom.length === 1) { dom = "0" + dom; } return month + "/" + dom + "/" + date.getFullYear(); } }); 

Gracias por cualquier ayuda.

La última versión de https://github.com/eternicode/bootstrap-datepicker ya tiene una opción para desactivar la selección de determinados días de la semana. De los documentos :

daysOfWeekDisabled

String, Array. Defecto: ”, []

Días de la semana que deberían estar deshabilitados. Los valores son 0 (domingo) a 6 (sábado). Los valores múltiples deben estar separados por comas. Ejemplo: deshabilitar los fines de semana: '0,6' o [0,6] .

En otras palabras, solo crea una instancia de tu marcador de fecha así:

 $('#datepicker').datepicker({ daysOfWeekDisabled: [0,6] }); 

Aquí hay un jsfiddle que demuestra esto: http://jsfiddle.net/vj77M/1/

** ACTUALIZACIÓN **

Bootstrap datepicker ahora tiene una opción daysOfWeekDisabled . Vea la respuesta de @fin a continuación.

** ANTIGUA RESPUESTA **

Aquí hay una demostración funcional

Suponiendo que tus semanas comiencen el domingo:

 $(function() { function disableWeekends($this) { var $days = $this.find('.datepicker-days tr').each(function() { var $days = $(this).find('.day'); $days.eq(0).addClass('old').click(false); //Sunday $days.eq(6).addClass('old').click(false); //Saturday }); } $('#dp1').datepicker({ format: 'mm-dd-yyyy' }); // get instance of the jQuery object created by // datepicker var datepicker = $('#dp1').data('datepicker').picker; // disable weekends in the pre-rendered version disableWeekends(datepicker); // disable weekends whenever the month changes var _fill = datepicker.fill; datepicker.fill = function() { _fill.call(this); disableWeekends(this.picker); }; });​ 

Si no, simplemente cambie $ days.eq (…) a los índices correctos.

Por supuesto, esto solo cubre el evento click y te lleva en la dirección correcta. Estoy bastante seguro de que otras cosas como la navegación por el teclado pueden necesitar ser abordadas.


EDITAR

Para la última versión, use este código cuando corresponda

 // get instance of the jQuery object created by datepicker  var datepicker = $('#dp1').data('datepicker'); // disable weekends in the pre-rendered version disableWeekends(datepicker.picker); // disable weekends whenever the month changes var _fill = datepicker.fill; datepicker.fill = function() {{ _fill.call(this); disableWeekends(datepicker.picker); }}; 

también puedes intentarlo.

 onRender: function(date) { return date.getDay() == 0 || date.getDay() == 6 ? 'disabled' : ''; } 

Espero que ayude a alguien. 🙂

 $(document).ready(function(){ var date_input=$('input[name="date"]'); var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body"; date_input.datepicker({ format: 'dd/mm/yyyy', container: container, weekStart: 0, daysOfWeekDisabled: "0,1,2,3,4,5", daysOfWeekHighlighted: "6", todayHighlight: true, autoclose: true, }) }) 
Intereting Posts