jQuery DateTime picker set MinDate dynamique
Je les gars j'utilise un datetimepicker par trentrichardson.com.
J'ai un formulaire avec deux champs de saisie : à partir de et à et je veux être en mesure de créer dynamiquement un minDate de mon champ "à", égale à la valeur de mon champ "de".
Je sais que je devrais utiliser une option beforShow mais je ne sais pas comment implémenter la fonction.
$('.from,.to').datetimepicker({
beforeShow: customRange
});
ÉDITÉ / SOLUTION
function customRange(input) {
if (input.id == 'to') {
var x=$('#from').datepicker("getDate");
$( ".to" ).datepicker( "option", "minDate",x );
}
else if (input.id == 'from') {
var x=$('#to').datepicker("getDate");
$( ".from" ).datepicker( "option", "maxDate",x );
} }
7 réponses
Vous pouvez définir et obtenir minDate dynamiquement avec setter et getter:
//getter
var minDate = $( ".selector" ).datepicker( "option", "minDate" );
//setter
$( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) );
Si vous avez deux zones de texte avec les identifiants correspondants from et to et que vous voulez que le minDate de to soit la date sélectionnée de from, procédez comme suit:
$("#from").datepicker({
minDate: 0, // to disable past dates (skip if not needed)
onClose: function(selectedDate) {
// Set the minDate of 'to' as the selectedDate of 'from'
$("#to").datepicker("option", "minDate", selectedDate);
}
});
$("#to").datepicker();
Vous pouvezrestreindre la plage de sélecteur de dates .
Mais vous voulez définir cette plage lors de la création du datepicker sur le "from". I Je t'ai fait une démo ce qui semble fonctionner correctement pour autant que je comprenne la question.
Luca: un petit ajout à votre réponse...
En utilisant la fonction que vous avez suggérée, le composant time est ignoré la première fois que le datetimepicker est affiché. Si vous fermez le datetimepicker et le rouvrez à nouveau, le composant time réapparaît mystérieusement. Je ne suis pas tout à fait sûr de ce qui cause cela, mais il peut être corrigé avec un peu de hack:
function setMinMaxDate ( element )
{
// Store current date - setting max/min date seems to destroy time component
var val = $(element).val();
if (element.id == 'endDate')
{
var x=$('#startDate').datetimepicker("getDate");
$( element ).datetimepicker( "option", "minDate",x );
}
else if (element.id == 'startDate')
{
var x=$('#endDate').datetimepicker("getDate");
$( element ).datetimepicker( "option", "maxDate",x );
}
// Restore date
$(element).val(val);
}
Il y a un Exemple sur trentrichardson.com. ils utilisent "onSelect". Pour moi, il ne fonctionne pas perfert. Lorsque vous définissez minDate ou MaxDate, le composant time est défini sur 0 et seule la date reste. Et j'ai dû résoudre certains problèmes de localisation.
Aucune des réponses ci-dessus ne m'a aidé du tout. Cela n'a pas fonctionné ou a donné une sorte d'erreur.
Donc je les ai tous fusionnés et j'ai fait le mien. J'ai utilisé moment.js comme mentionné ci-dessus, il suffit de le télécharger et de l'inclure dans votre page.
$("#start_date").datetimepicker({
format: 'Y-m-d H:00:00',
onChangeDateTime: function(dp, $input){
var dt2 = $('#end_date');
var minDate = $('#start_date').val();
var currentDate = new Date();
var targetDate = moment(minDate).toDate();
var dateDifference = currentDate - targetDate;
var minLimitDate = moment(dateDifference).format('YYYY/MM/DD');
var endDate = moment(dt2.val()).toDate();
if((currentDate - endDate) >= (currentDate - targetDate))
dt2.datetimepicker({
'value': minDate
});
dt2.datetimepicker({
'minDate': '-'+minLimitDate
});
}
});
$("#end_date").datetimepicker({
format: 'Y-m-d H:00:00'
});
Je suis sûr qu'il y a une meilleure façon de le faire, mais je ne pouvais pas le trouver. J'espère donc que cela aidera quelqu'un à l'avenir.
Cela a fonctionné pour moi
<input type="date" name="cname" value="" min="<?php echo date("Y-m-d") ?>"/>