Dostosuj dni, które można kliknąć w wyskakującym kalendarzu


10

Tworzę formularz w Drupal 7 z interfejsem API formularza. W tej chwili mogę utworzyć zwykłe pole wprowadzania kalendarza z następującym kodem:

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

W tej chwili mogę wyświetlić piękne okienko kalendarza. To, co próbuję osiągnąć, to włączyć lub wyłączyć niektóre daty w oparciu o zasadę: wyłącz wszystkie soboty i niedziele; a nawet usunąć stan kliknięcia z określonych dat na podstawie listy świąt państwowych ...

Czy jest to coś, co można osiągnąć za pomocą kodowania PHP, czy też należy to zrobić za pomocą jQuery? W przypadku, gdy jQuery jest rozwiązaniem, byłbym wdzięczny za wszelkie wskazówki, jak to zrobić ... Kalendarz jest tabelą, ale komórki tabeli nie mają identyfikatora ani czegoś, co mogłoby pomóc mi je znaleźć i wyłączyć na podstawie reguły. ..

Dziękuję Ci.


1
Ta odpowiedź „[Jak wyłączyć weekendy] [1]” pomoże ci wyłączyć weekendy i niektóre dni. [1]: stackoverflow.com/questions/501943/…
Nikit 30.01.2013

Odpowiedzi:


8

Możesz przekazać niektóre opcje Datepicker'a z php do elementu date_popup poprzez klucz '#datepicker_options':

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

Dzięki tej metodzie możesz przekazać prawie każdą opcję, z wyjątkiem tych, które akceptują funkcję jako wartość, jako taką beforeShowDay, która była potrzebna do ograniczenia weekendów lub świąt zgodnie z odpowiedzią wymienioną przez Nikit: /programming/501943/can- the-jquery-ui-datepicker-be-made-to-disable-saturdays-and-Sunday-and-holid

Dlatego wymagany jest javascript. Najpierw musisz dołączyć niestandardowy plik js z kodu modułu:

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

i podaj trochę kodu, FOO.jsaby rozszerzyć ustawienia ustawione przez moduł date_popup o nasze własne opcje.

Oto przykład, który dodaje podstawową opcję wyłączenia weekendów dla wszystkich widżetów datepicker na stronie:

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

Przedłużenie wakacji pozostawia się czytelnikowi jako ćwiczenie :)

Uwaga: trzy wystąpienia FOOw moich przykładach nie muszą być tym samym dosłownym, tzn .: możesz podać BAZzachowanie BAR.jsz FOO.module.

Aktualizacja: aby rozszerzyć powyższą dostępność dni niestandardowych, po prostu dodaj funkcję zwracającą wartość prawda / fałsz dla dnia otrzymanego przez parametry.

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

Pełniejszy przykład można znaleźć w module Ograniczenia daty .


Dziękuję, Jonhattan! Pomyślnie ustawiłem minDate i wyłącza wszystkie poprzednie dni. To dla mnie świetny początek. Zastanawiam się, czy mogę ustawić coś takiego jak maxDate, ponieważ chcę mieć włączony zakres około 15 dni. Widzę, że istnieje atrybut „FromTo”, ale nie mam żadnych wskazówek na temat tego, co zamierza zrobić. Moim pomysłem jest wyłączenie wszystkich dat w przeszłości (zrobione) i wszystkich dat w przyszłości (około 15 dni od teraz ()). W środku sprawdzę dokumentację javascript selektora dat, aby zobaczyć, jak indywidualnie wyłączyć niektóre dni otwarte.
Marcos Buarque

1
tak, istnieje również maxDate: api.jqueryui.com/datepicker/#option-maxDate
jonhattan

Dzięki, z jakiegoś powodu, kiedy przeglądałem dokumentację pola date_popup, nie mogłem znaleźć informacji na temat opcji maxDate. To działało dla mnie i ograniczyło kalendarz do maxDate: '#datepicker_options' => tablica ('minDate' => 0, 'maxDate' => 30,),
Marcos Buarque

jonhattan, przepraszam, że pytam ponownie. Ciągnę za włosy, próbując wykonać niestandardową funkcję. Wdrożyłem Twój model i działa on dla mnie świetnie. Ale teraz chcę wykonać niestandardową funkcję, aby zezwolić tylko na określone daty. Widzę, że zaproponowałeś wakacje jako ćwiczenie dla czytelnika ;-) Ten czytelnik jest prawie szalony, próbując rozwiązać ten problem. Jeśli nie jest to dla ciebie ogromna dodatkowa praca, czy możesz napisać, jak to rozwiązać? Nie przejmuj się szczegółami, potrzebuję tylko ogólnej pomocy, aby zadzwonić do funkcji niestandardowej (data). Dziękuję Ci!
Marcos Buarque

Marcos, zaktualizowałem swoją odpowiedź prostym przykładem użycia funkcji niestandardowej.
jonhattan

0

Użyłem modułu Ograniczenia daty. Zapewnia to i opcję ograniczenia daty pod względem liczby parametrów, takich jak stała data, data względna itp.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.