La date saisie affichée sera au format "Samedi 14 Février 2015" et php contrôle le retour pour avoir une date compatible au format sql du type "2015-02-14"
<?php
$form = filter_input(INPUT_POST, 'ok');
if($form)
{
try
{
if(trim($_POST['date']) == false)
{
throw new Exception('Date_Vide');
}
$date = new DateTime($_POST['date']);
$date = $date->format('Y-m-d');
echo $date;
}
catch(Exception $e)
{
$erreur = $e->getMessage();
echo $erreur == 'Date_Vide' ? 'Date vide' : 'Erreur de date';
}
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Localize calendar</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.11.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(function()
{
var datepicker = function(picker,destination)
{
picker.datepicker({
monthNames: [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre" ],
dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
dayNamesMin: [ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ],
dateFormat: "DD d MM yy"
})
.on('change', function()
{
var date = $(this).datepicker( "getDate" );
date = $.datepicker.formatDate("yy-mm-dd", date);
destination.val(date);
})
}
var form = $('#form1').find("form");
var picker = form.find("input[name=picker]");
var destination = form.find("input[name=date]");
datepicker(picker,destination);
});
</script>
</head>
<body>
<div id = "form1">
<form ation = "#" method="post">
<label><span style="text-decoration:underline">Date</span> <input type="text" name="picker" style="width:180px"></label>
<input name="date" type="hidden" value="">
<input name="ok" type="submit" value = "envoyer">
</form>
</div>
</body>
</html>En production vous aurez intérêt à rapatrier les fichiers jquery sur votre serveur pour ne pas être dépendant de l'extérieur.
Un autre exemple avec plusieurs champs de dates :
<?php
$form = filter_input(INPUT_POST, 'ok');
if($form)
{
foreach ($_POST['date'] as $key => $date)
{
try
{
if(trim($date) == false)
{
throw new Exception('Date_Vide');
}
$d = new DateTime($date);
$d = $d->format('Y-m-d');
echo 'date '.$key.' = '. $d;
echo '<br>';
}
catch(Exception $e)
{
$erreur = $e->getMessage();
echo $erreur == 'Date_Vide' ? 'date '.$key.' = Date vide' : 'date '.$key.' = Erreur de date';
echo '<br>';
}
}
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Localize calendar</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.11.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(function()
{
var datepicker = function(saisie,envoi)
{
saisie.datepicker({
monthNames: [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre" ],
dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
dayNamesMin: [ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ],
dateFormat: "DD d MM yy"
})
.on('change', function()
{
var date = $(this).datepicker( "getDate" );
date = $.datepicker.formatDate("yy-mm-dd", date);
envoi.val(date);
})
}
var form = $('#form1').find("form");
var saisie = form.find("input[data-picker=picker]");
var envoi = form.find("input[data-picker=date]");
if(saisie.length == envoi.length)
{
saisie.each(function(i)
{
datepicker($(this),$(envoi[i]));
});
}
else
{
alert('Le nombre de champs de saisie ayant l\'attribut data-picker="picker" est différent du nombre de champs d\'envoi des données ayant l\'attribut data-picker="date"')
}
});
</script>
</head>
<body>
<div id = "form1">
<form ation = "#" method="post">
<label><span style=" text-decoration:underline">Date 0</span> <input type="text" data-picker="picker" style="width:180px"></label>
<input name="date[]" data-picker="date" type="hidden" value="">
<label><span style=" text-decoration:underline">Date 1</span> <input type="text" data-picker="picker" style="width:180px"></label>
<input name="date[]" data-picker="date" type="hidden" value="">
<label><span style=" text-decoration:underline">Date 2</span> <input type="text" data-picker="picker" style="width:180px"></label>
<input name="date[]" data-picker="date" type="hidden" value="">
<input name="ok" type="submit" value = "envoyer">
</form>
</div>
</body>
</html>