Szeretnénk elérni, hogy a dátum mezőket ki lehessen választani a népszerű módon úgy, hogy “feljön” egy kis naptár egy ún. popup ablakban, ahol rákattintunk a kívánt napra, és a kivlasztott dátum bemásolódik a beviteli mezőnkbe a megadott formátumban.
Ehhez le kell tölenünk a jQuery UI-t a https://jqueryui.com/download/all/ webcímről, majd az assets könyvtárunk megfelelő js, css és css/image könyvtáraiba kell bemásolnunk a megfelelő file-okat.
A jQuery UI ún. datepicker – dátumválasztó widget-ét fogjuk használni. Leírása itt https://jqueryui.com/datepicker/.
A views/layouts/menu_layout.php sablonunkba a fejlécben (<head>) fell kell vegyük a jquery-ui.css illetve jquery-ui.js file-okat.
<!-- jquery ui -->
<link rel="stylesheet" href="<?php echo $my_base_url?>assets/css/jquery-ui.css">
<!-- jquery ui -->
<script src="<?php echo $my_base_url?>assets/js/jquery-ui.js"></script>Ezek után a views/booking_ajax.php view-nkban a <script> részhez az alábbi két új függvényt fűzzük hozzá a $(document).ready(function() rész alá új elemként.
$( "#checkin" ).datepicker({ dateFormat: "yy-mm-dd" });
$( "#checkout" ).datepicker({ dateFormat: "yy-mm-dd" });Itt egy sima inicializálásról van szó ID Selector alapján, a megfelelő ISO 8601 formátumban. Már működik is! 🙂
Lehetne hozzá sőt kell is még írni egy belső validációt, ami mégegyszer ellenőrzi a dátumformátumot adatbázisba írás előtt, de most ettől eltekintunk.
Ugyanígy kimaradtak az form serialize aspektusai is az előző fejezet AJAX űrlapküldésénél, továbbá még két apróság. Ugyanis a kettővel ezelőtti fejezetben nem másoljuk be a mező értékeket abban az esetben a form-unkba, ha valami validációs hiba történik, illetve az előző fejezetben nem töröljük a form mezőket (reset), ha sikeres a foglalás.
Apróságnak tűnnek, de ezek különböztetnek meg egy professzionális weblapot egy kezdetlegesebbtől. 🙂
