De nombreux datepicker existent notamment avec Bootstrap. Vous en trouverez, de très bon / beau assez facilement.
L’inconvénient qu’ils présentent est qu’ils sont souvent en Javascript, pas toujours compatible avec des navigateurs de smartphones…
Si vous souhaitez palier à ce problème ou tout simplement s’abstraire du Javascript cette solution vous conviendra.
Il s’agit de générer trois champs <select> pour le jour, le mois et l’année. Il est possible de faire de même avec les heures et minutes.
Place au code, notez seulement que cette solution est faite avec du PHP pour faciliter la génération du formulaire. La seconde est uniquement en HTML si vous ne pouvez utiliser d’interpréteur PHP.
Version PHP :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
[...] <select name="day" required="required"> <?php for ($i=1;$i<=31;$i++) { ?><option value="<?php echo $i; ?>"><?php echo $i; ?></option><?php } ?> </select> <select name="month" required="required"> <option value="01">Janvier</option> <option value="02">Fevrier</option> <option value="03">Mars</option> <option value="04">Avril</option> <option value="05">Mai</option> <option value="06">Juin</option> <option value="07">Juillet</option> <option value="08">Aout</option> <option value="09">Septembre</option> <option value="10">Octobre</option> <option value="11">Novembre</option> <option value="12">Decembre</option> </select> <select name="year" required="required"> <?php for ($i=date('Y')-2;$i<=date('Y')+10;$i++) { ?><option value="<?php echo $i; ?>"><?php echo $i; ?></option><?php } ?> </select> [...] |
Version HTML :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
[...] <select name="day" required="required"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> <select name="month" required="required"> <option value="01">Janvier</option> <option value="02">Fevrier</option> <option value="03">Mars</option> <option value="04">Avril</option> <option value="05">Mai</option> <option value="06">Juin</option> <option value="07">Juillet</option> <option value="08">Aout</option> <option value="09">Septembre</option> <option value="10">Octobre</option> <option value="11">Novembre</option> <option value="12">Decembre</option> </select> <select name="year" required="required"> <option value="2013">2013</option> <option value="2014">2014</option> <option value="2015">2015</option> <option value="2016">2016</option> <option value="2017">2017</option> <option value="2018">2018</option> <option value="2019">2019</option> <option value="2020">2020</option> <option value="2021">2021</option> <option value="2022">2022</option> <option value="2023">2023</option> <option value="2024">2024</option> <option value="2025">2025</option> </select> [...] |
Pour le traitement du formulaire en PHP plusieurs actions sont nécessaires, sécuriser les variables pour d’éventuelles utilisation avec des requêtes SQL (Injections). Puis « rassembler » les différentes variables. (Le code ci dessous ne traite que de la partie date du formulaire il vous faudra l’étendre à tout votre formulaire.)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* Prevention des tentatives d'injections SQL */ foreach ($_POST as $key => $value) { $sPOST[$key]=htmlentities($value, ENT_QUOTES); } [...] /* Vérifions si la date qui a été renseignée est bien valide */ if (checkdate($sPOST['month'], $sPOST['day'], $sPOST['year'])) { // Date valide $date_valide=$sPOST['year']."-".sprintf("%02d", $sPOST['month'])."-".sprintf("%02d", $sPOST['day']); [...] } else { // Date invalide [...] } [...] |
Commentaires récents