Standardowo 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:
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.
- Przejdź na stronę http://keith-wood.name/datepickRef.html i pobierz paczkę jQuery Datepicker (na dole strony znajdziesz go także w załączniku).
- Rozpakuj pobrana paczkę i skopiuj wszystkie pliki o rozszerzeniu .js katalogu webroot\js. Możesz także utworzyć dodatkowy katalog na skrypty.
- Skopiuj plik jquery.datepick.css do katalogu webroot\css.
- 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.
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.
848total visits,2visits today
