Personalice los días en los que se puede hacer clic en una ventana emergente de Calendario


10

Estoy creando un formulario en Drupal 7 con el formulario API. En este momento, puedo crear un campo de entrada de calendario ordinario con el siguiente código:

   $form['services_tab']['schedule_datepicker'] = array(
    '#title' => t('Pick the desired date'),
    '#type' => 'date_popup',
    '#date_year_range' => '0:0',
    '#date_format' => 'Y-m-d',
    '#prefix' => '<div id="datepicker-schedule">',
    '#suffix' => '</div>',
  );

En este momento puedo hacer que aparezca la hermosa ventana emergente del calendario. Lo que intento lograr es habilitar o deshabilitar ciertas fechas en función de una regla como: deshabilitar todos los sábados y domingos; o incluso eliminar el estado de clic de fechas específicas según una lista de feriados nacionales ...

¿Es esto algo que se puede lograr con la codificación PHP, o debe hacerse con jQuery? En caso de que jQuery sea la solución, agradecería cualquier sugerencia sobre cómo hacer eso ... El calendario es una tabla, pero las celdas de la tabla no tienen una ID o algo que pueda ayudarme a encontrarlas y desactivarlas según una regla. ..

Gracias.


1
Esta respuesta "[Cómo deshabilitar los fines de semana] [1]" le ayudará a deshabilitar los fines de semana y algunos días. [1]: stackoverflow.com/questions/501943/…
Nikit

Respuestas:


8

Puede pasar algunas opciones de Datepicker de php al elemento date_popup a través de la tecla '#datepicker_options':

<?php
$form['date'] = array(
  '#title' => t('Pick the desired date'),
  '#type' => 'date_popup',
  '#datepicker_options' => array(
    'minDate' => 0,
  ),
);

Con este método, puede pasar casi cualquier opción, excepto aquellas que aceptan una función como valor, como beforeShowDayla que se necesita para restringir los fines de semana o días festivos de acuerdo con la respuesta a la que Nikit hace referencia: /programming/501943/can- the-jquery-ui-datepicker-be-made-to-disable-saburdays-and-sundays-and-holid

Por lo tanto, se requiere JavaScript. Primero debe incluir un archivo js personalizado del código de su módulo:

<?php
drupal_add_js(drupal_get_path('module', 'FOO') . '/FOO.js');

y proporcione un código FOO.jspara ampliar la configuración establecida por el módulo date_popup con nuestras propias opciones.

Aquí hay un ejemplo que agrega la opción básica para deshabilitar los fines de semana para todos los widgets de selector de fecha en la página:

(function ($) {
Drupal.behaviors.FOO = {
  attach: function (context) {
    for (var id in Drupal.settings.datePopup) {
      Drupal.settings.datePopup[id].settings.beforeShowDay = $.datepicker.noWeekends;
    }
  }
};
})(jQuery);

Extender a las vacaciones se deja como ejercicio para el lector :)

Nota: las tres ocurrencias de FOOen mis ejemplos no necesitan ser el mismo literal, es decir: puede proporcionar un BAZcomportamiento BAR.jsdesde FOO.module.

Actualización: para ampliar lo anterior para la disponibilidad de días personalizados, simplemente agregue una función que devuelva verdadero / falso para el día recibido por los parámetros.

(function ($) {
Drupal.behaviors.FOO = {
  attach: function (context) {
    for (var id in Drupal.settings.datePopup) {
      Drupal.settings.datePopup[id].settings.beforeShowDay = checkDate;
    }
  }
};

function checkDate(date) {
  if ((date.getDate() % 2) == 0) {
    return [false, 'Even days not available'];
  }
  else {
    return [true, 'Odd days are fine'];
  }
}
})(jQuery);

Puede encontrar un ejemplo más completo en el módulo Restricciones de fecha .


¡Gracias Jonhattan! He configurado con éxito el minDate y deshabilita todos los últimos días. Este es un gran comienzo para mí. Me pregunto si puedo configurar algo como un maxDate, ya que quiero mantener solo un rango de unos 15 días habilitado. Puedo ver que hay un atributo 'fromTo', pero no tengo pistas sobre lo que va a hacer. Mi idea es deshabilitar todas las fechas en el pasado (hecho) y todas las fechas en el futuro (unos 15 días a partir de ahora ()). En el medio, revisaré la documentación de JavaScript de pickeer de fecha para ver cómo deshabilitar individualmente algunos de los días abiertos.
Marcos Buarque

1
sí, también hay un maxDate: api.jqueryui.com/datepicker/#option-maxDate
jonhattan

Gracias, por alguna razón, cuando estaba buscando en la documentación del campo date_popup no pude encontrar información sobre la opción maxDate. Esto funcionó para mí y restringió el calendario a maxDate: '#datepicker_options' => array ('minDate' => 0, 'maxDate' => 30,),
Marcos Buarque

jonhattan, lamento volver a preguntar. Me estoy tirando del pelo tratando de ejecutar una función personalizada. He implementado su modelo y funciona muy bien para mí. Pero ahora quiero ejecutar una función personalizada para permitir solo fechas específicas. Veo que has sugerido las vacaciones como un ejercicio para el lector ;-) Este lector está casi loco tratando de resolver este problema. Si no es un gran trabajo adicional para usted, ¿le importaría publicar cómo resolvería esto? No se preocupe por los detalles, solo necesito una ayuda general para hacer la llamada a customFunction (fecha). ¡Gracias!
Marcos Buarque

Marcos, he actualizado mi respuesta con un ejemplo simple del uso de una función personalizada.
Manhattan

0

He usado el módulo de restricciones de fecha. Esto proporciona una opción para restringir la fecha en el número de parámetros como fecha fija, fecha relativa, etc.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.