0

La implementación básica del Datepicker de Bootstrap funciona correctamente, lo que no funciona es el datesDisabled (desactivar fechas):

Mi forms.py:

class BookForm(forms.ModelForm):
class Meta:
    dateTimeOptions = {
    'format': 'dd/mm/yyyy',
    'autoclose': True,
    'startDate': datetime.now().strftime("%d/%m/%Y"),
    'datesDisabled': ['20/02/2017']
    }
    
    model = Reserva
    fields = ['fecha_entrada','fecha_salida']   
    widgets = {
        'fecha_entrada': DateWidget(attrs={'id':"start",'readonly':'readonly','class':'datepicker'}, usel10n = True, bootstrap_version=3, options = dateTimeOptions),
        'fecha_salida': DateWidget(attrs={'id':"end",'readonly':'readonly','class':'datepicker'}, usel10n = True, bootstrap_version=3, options = dateTimeOptions)
    }

Básicamente lo que hace este form es insertar un script por cada input tal que así:

$("#start").datetimepicker({
  format: 'dd/mm/yyyy',
  autoclose: true,
  startDate: '28/01/2017',
  startView: 2,
  minView: 2,
  language: 'es'
}).find('input').addClass("form-control");
<link href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>


<script src="https://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>



<input id="start" class="datepicker">

Este script es lo que requiere Bootstrap en el .html para su funcionamiento. El problema surge cuando le inserto el datesDisabled: ['20/02/2017'] por ejemplo, tal y como pone la documentación de Bootstrap y parece ser que le da igual, ningún tipo de error, simplemente no lo lee. Tengo última versión de Bootstrap, JavaScript y jQuery.

2
  • Podrías mostrar como lo estás insertando en el template por favor?
    – Genarito
    Commented el 29 ene. 2017 a las 1:45
  • Se implementa insertando {{ bookForm }} en el HTML siendo bookForm = BookForm(). Utilizo esta implementación: github.com/asaglimbeni/django-datetime-widget ya que te genera automáticamente el código JavaScript. Si conoces algun otro método no me importaría utilizarlo, aunque sea a pelo, solo quiero poder desactivar determinadas fechas en el datepicker.
    – Jota
    Commented el 30 ene. 2017 a las 14:22

2 respuestas 2

1

A ver si planteandolo de esta otra forma lo hacemos funcionar:

var disableddates = ["20-02-2017", "21-02-2017"];

function DisableSpecificDates(date) {
  var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
  return [disableddates.indexOf(string) == -1];
}

$("#start").datepicker({
  beforeShowDay: DisableSpecificDates
});
<link href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>


<script src="https://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>



<input id="start" class="datepicker">

Espero que te sea de ayuda

0

No veo el datesDisabled en el código de Javascript, pero a priori la diferencia que veo está en que faltarían los dos puntos.

$("#start").datetimepicker({
  format: 'dd/mm/yyyy',
  autoclose: true,
  startDate: '28/01/2017',
  datesDisabled: ['20/02/2017'],
  startView: 2,
  minView: 2,
  language: 'es'
}).find('input').addClass("form-control");
<link href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>


<script src="https://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>



<input id="start" class="datepicker">

Espero que te sea de ayuda

1
  • Disculpa, lo escribí mal en el post, lo tengo tal y como tu indicas: datesDisabled: ['20/02/2017'], No funciona :(
    – Jota
    Commented el 30 ene. 2017 a las 14:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.