自定义可以在“日历”弹出窗口中单击的日期


10

我正在使用表单API在Drupal 7中创建一个表单。现在,我可以使用以下代码创建一个普通的日历输入字段:

   $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>',
  );

现在,我可以显示漂亮的日历弹出窗口了。我要达到的目的是根据以下规则启用或禁用某些日期:禁用所有星期六和星期日;甚至根据国定假日列表从特定日期删除点击状态...

这是可以用PHP编码实现的,还是需要用jQuery完成?万一jQuery是解决方案,我将不胜感激有关该操作的任何提示...日历是一个表,但是表单元格没有ID或可以帮助我根据规则查找和禁用它们的东西。 ..

谢谢。


1
此“ [如何禁用周末] [1]”答案将帮助您禁用周末和某些日子。[1]:stackoverflow.com/questions/501943/...
Nikit

Answers:


8

您可以通过“ #datepicker_options”键将一些Datepicker选项从php传递给date_popup元素:

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

使用此方法,您可以传递除接受函数作为值的选项之外的几乎所有选项,例如beforeShowDay,这是根据Nikit引用的答案来限制周末或假日的选项:https ://stackoverflow.com/questions/501943/can- 使jQuery UI DatePicker禁用周六周日和假期

因此,需要javascript。首先,您需要从模块代码中包含一个自定义js文件:

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

并提供一些代码,FOO.js以使用我们自己的选项扩展date_popup模块设置的设置。

以下是添加基本选项以禁用页面中所有日期选择器小部件的周末的示例:

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

延长假期供读者练习:)

注意:FOO在我的示例中,这三种情况并不一定要使用相同的文字,即:您可以提供from中的BAZ行为。BAR.jsFOO.module

更新:将以上内容扩展为自定义日期的可用性,只需添加一个函数,以返回参数所收到的日期的true / false。

(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);

您可以在“ 日期限制”模块中找到更完整的示例。


谢谢乔纳森!我已经成功设置了minDate,并且禁用了所有过去的日子。对我来说,这是一个伟大的开始。我想知道是否可以设置诸如maxDate之类的东西,因为我只想启用15天左右的范围。我可以看到这里有一个'fromTo'属性,但是没有任何线索。我的想法是禁用过去的所有日期(完成)和将来的所有日期(距now()约15天)。在中间,我将检查日期选择器javascript文档,以了解如何分别禁用某些开放日。
Marcos Buarque 2013年

1
是的,还有一个maxDate:api.jqueryui.com/datepicker/#option-maxDate
jonhattan

谢谢,由于某种原因,当我查看date_popup字段的文档时,找不到关于maxDate选项的信息。这对我有用,并将日历限制为maxDate:'#datepicker_options'=> array('minDate'=> 0,'maxDate'=> 30,),
Marcos Buarque 2013年

jonhattan,很抱歉再次询问。我拉头发试图执行自定义功能。我已经实现了您的模型,对我来说非常有用。但是现在我想执行一个自定义函数以仅允许特定日期。我看到您建议把假期作为读者的练习;-)这位读者试图解决这个问题几乎疯了。如果这对您来说不是繁琐的工作,那么您介意发布解决方案吗?不用担心细节,我只需要一个整体帮助即可对customFunction(date)进行调用。谢谢!
Marcos Buarque

Marcos,我用一个自定义函数用法的简单示例更新了我的答案。
jonhattan

0

我已经使用了日期限制模块。提供并提供选项来限制日期(例如固定日期,相对日期等)的数量。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.