CakePHP i JQuery DateTimePicker w widoku

cakephpStandardowo CakePHP3 generuje odrębne pola kombi dla wyboru daty, jednak o wiele wygodniejszym, a przy tym – estetyczniejszym sposobem jest wyświetlenie kalendarza, z którego użytkownik może w sposób wygodny wybrać datę. Ten wpis przedstawia w kolejnych kilku krokach, jak stosować JQuery DateTimePicker.

W generowanych widokach, w przypadku pól typu data, CakePHP generuje standardowy input dla wprowadzania daty:

echo $this->Form->input('data', ['type' => 'date', 'empty' => true]);
lub w nowszych wersjach:
echo $this->Form->control('data', ['empty' => true])

W efekcie wygląd wprowadzania daty wygląda tak:

datacakestandard

Aby zmodernizować wygląd standardowych kontrolek na widok rozwijanego kalendarza, można wykorzystać JavaScript.

Sposób pierwszy:

Dopisz w szablonie domyślnym (np. Template\Layout\default.ctp)

<?= $this->Html->css('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css') ?>
<?= $this->Html->script('http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js') ?>
<?= $this->Html->script('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js') ?>

Następnie w szablonie, na początku wpisz:

<script>
   jQuery(function($){ //on document.ready
   $('#datepicker').datepicker();
   })
 </script>

Zaś pole, które przeznaczone jest do pobrania daty, należy nieco zmodyfikować, dopisując type=text, by CakePHP wyświetlił zwykłe pole tekstowe oraz id:

echo $this->Form->control('data', ['type'=>'text','id'=>'datepicker','empty' => true]);

Pamiętaj, że id jest unikatowe, więc jeśli formularz pobiera kilka dat, należy zmodyfikować skrypt do postaci:

<script>
   jQuery(function($){ //on document.ready
   $('#datepicker').datepicker();
   $('#datepicker2').datepicker();
   $('#datepicker3').datepicker();
   })
 </script>

Sposób drugi – niestety jak zauważyłem, w nowszych wersjach CakePHP na niektórych przeglądarkach czasami zawodzi, stąd polecam sposób 1.

  1. Przejdź na stronę http://keith-wood.name/datepickRef.html i pobierz paczkę jQuery Datepicker (na dole strony znajdziesz go także w załączniku).
  2. Rozpakuj pobrana paczkę i skopiuj wszystkie pliki o rozszerzeniu .js katalogu webroot\js. Możesz także utworzyć dodatkowy katalog na skrypty.
  3. Skopiuj plik jquery.datepick.css do katalogu webroot\css.
  4. Otwórz do edycji plik Default.ctp z katalogu src\Template\Layout i w sekcji head dodaj:
<?= $this->Html->script('http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'); ?>
<?= $this->Html->script('jquery.plugin'); ?>
<?= $this->Html->script('jquery.datepick'); ?>
<?= $this->Html->script('jquery.datepick-pl'); ?>
<?= $this->Html->css('jquery.datepick'); ?>

5. W pliku szablonu .ctp, który służy do edycji akcji w kontrolerze, na początku dodaj kod JavaScript:

<script>
    $(function() {
    $('#datawpisu').datepick();   // deklaracja pola DateTimePicker.
    $('#datadostepu').datepick(); // kolejne pole DateTimePicker - jeśli wymagane.
    });
    }
</script>

6. Teraz, należy zmienić kod generowania pola input w widoku na:

echo $this->Form->input('publishdate', ['type' => 'text', 'id'=>'datawpisu', 'empty' => true]);
echo $this->Form->input('accessdate', ['type' => 'text', 'id'=>'datadostepu', 'empty' => true]);

Od tego momentu, zamiast kilku pól standardowo generowanych przez CakePHP, będzie wyświetlane estetyczna kontrolka wyboru daty z oknem kalendarza.

datetimepickercake12

Nadmieniam, że ten dodatek prawidłowo pracuje z frameworkiem CakePHP i nie powoduje problemów z formatem daty, jak dzieje się to w przypadku innych rozwiązań, które do działania wymagają nieco więcej zabiegów.

695total visits,1visits today

Tagi , , .Dodaj do zakładek Link.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

+ 6 = 8

This site uses Akismet to reduce spam. Learn how your comment data is processed.