J'ai deux sélecteurs de dates
Je dois définir une condition d'ajout basée sur premier sélecteur de dates
si le premier sélecteur de date a sélectionné la date actuelle, alors devrait être
Le deuxième sélecteur de date sera sélectionné après la prochaine date de sélection dans le sélecteur de date - 1
<input type="text" id="datepicker"/>
<input type="text" id="datepicker2"/>
$(function() {
$( "#datepicker1" ).datepicker({
minDate:0,
dateFormat: "yy-mm-dd" });
});
$(function() {
$( "#datepicker2" ).datepicker({
dateFormat: "yy-mm-dd" });
});
comment je peux faire dans jquery ??
4 Réponses :
Définissez un gestionnaire onSelect au premier datepicker, dans la mise à jour du gestionnaire minDate option du deuxième sélecteur de date. Où utiliser la méthode getDate pour obtenir l'objet Date sélectionné .
<link href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <input type="text" id="datepicker1" /> <input type="text" id="datepicker2" />
$(function() {
let $dt1 = $("#datepicker1").datepicker({
minDate: 0,
dateFormat: "yy-mm-dd",
// attach handler
onSelect: function(dateString, instance) {
// update minDate option of second datepicker
// create a Date instance using datepicker instance
// where increment the day value
// $dt2.datepicker('option', 'minDate', new Date(instance.selectedYear, instance.selectedMonth, ++instance.selectedDay));
// or you can get Date from jQuery object
// or get jquery instance from instance
// like : instance.input or $("#datepicker1")
let date = $dt1.datepicker('getDate');
// or let date = instance.input.datepicker('getDate');
// increment day
date.setDate(date.getDate() + 1)
$dt2.datepicker('option', 'minDate', date);
// to set min date as datepickers 1 value simply use
// $dt2.datepicker('option', 'minDate', dateString );
// incrementing day from a customized data string is hard that's the reason for using datepicker instance
}
});
// cache the reference of input element
var $dt2 = $("#datepicker2").datepicker({
dateFormat: "yy-mm-dd"
});
});
comment modifier le deuxième sélecteur de date minDate basé sur le premier sélecteur de date est la date suivante
@ prabhakaran7: attendez
superb pouvez-vous expliquer comment cette ligne fonctionne $ dt2.datepicker ('option', 'minDate', new Date (instance.selectedYear, instance.selectedMonth, ++ instance.selectedDay))
@ prabhakaran7: deuxième argument dans onSelect callbavk fait référence à un objet d'instance datepicker qui contient des valeurs comme propriété ..... pas minDate opyion accepte l'objet Date comme valeur donc je crée une instance d'objet Date en passant l'année , mois et jour où la valeur du jour est simplement incrémentée (++ jour) et transmise au jour suivant
Pourquoi une nouvelle date et tout ce détail au lieu d'utiliser simplement la valeur du premier sélecteur?
@MarkSchultheiss: s'il vous plaît lire les lignes commentées ... Il a besoin de mindate comme date sélectionnée + 1jour ..... C'est tout :)
Cela a du sens avec cette explication de la façon dont vous avez interprété la question. Espérons que le PO commencera à s'améliorer en termes de clarté, car à ce jour, seules 2 questions sur 9 ont même des réponses, ce qui, à mon humble avis, est en partie dû à la clarté ou à son manque spécifique.
Notez également que le MANQUE de la documentation originale où elle ne mentionne même aucun événement en partie conduit à ces questions: api .jqueryui.com / datepicker
@MarkSchultheiss: une autre façon est de générer la date à partir de la chaîne de données (+ 1 jour avec la date personnalisée sélectionnée) .... En comparant, je pense que celle-ci est meilleure
@MarkSchultheiss: mis à jour avec la méthode documentée;)
continuons cette discussion dans le chat .
Vous devez appeler une fonction dans laquelle vous définissez vos deux sélecteurs de date comme ceci:
function reinitialize()
{
$("#datepicker1").datepicker('destroy');
$('#datepicker1').datepicker({
onSelect: reinitialize,
defaultDate: new Date($("#datepicker1").val())
});
$("#datepicker2").datepicker('destroy');
$('#datepicker2').datepicker({
minDate: new Date($("#datepicker1").val()), // use min date
defaultDate: new Date($("#datepicker2").val())
});
}
Un rafraîchissement serait-il meilleur ici dans la fonction au lieu d'un destroy ? api.jqueryui.com/datepicker/#method-refresh Peut-être ajouter l'instanciation initiale du datepicker dans le cadre de ceci, en dehors de cette fonction.
Cette fonction ne supprimerait-elle pas également l'état du sélecteur de date d'origine car il est détruit lorsqu'il reçoit l'événement select?
Lors de la sélection de votre première date, vous venez de définir -
$( "#datepicker2" ).datepicker({ minDate: <selected date from 1>});
par exemple
$ ("# datepicker2") .datepicker ({minDate: new Date ('05 / 05/2019 ')}); cela n'affichera que les dates après le 5 mai 2019
J'envisagerais également de garder le second datepicker (dépendant) désactivé jusqu'à ce que le premier ait une valeur pour mieux forcer la relation. J'ai ajouté un dépendant des données pour éviter le codage en dur, mais ce n'est qu'un choix.
Ici, j'ai utilisé onSelect mais cela pourrait être un autre événement si vous le souhaitez. P >
J'ai également corrigé l'ID que vous aviez dans votre sélecteur pour le premier élément.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <input type="text" id="datepicker" data-dependent="#datepicker2" /> <input type="text" id="datepicker2" />
$(function() {
$("#datepicker").datepicker({
minDate: 0,
dateFormat: "yy-mm-dd",
onSelect: function(date, datepicker) {
let dependent= $(this).data('dependent');
let thisDate = $(this).val();
$(dependent).datepicker("option", "minDate", thisDate);
$(dependent).datepicker('refresh');
}
});
$("#datepicker2").datepicker({
dateFormat: "yy-mm-dd"
});
});
"le deuxième sélecteur de date affiche uniquement le suivant de la sélection dans le sélecteur de date -1" pouvez-vous expliquer un peu plus
dans le premier sélecteur de date, j'ai sélectionné le 05-04-2019, puis le deuxième sélecteur de date ne s'affichera qu'après le 05-04-2019
$ (function () {est un gestionnaire d’événements prêt pour le document. Vous n’avez besoin que de l’un d’entre eux et pouvez encapsuler les deux dans celui-ci au lieu de deux. Votre question serait beaucoup plus claire si vous référencez exactement quel sélecteur de date ou a tagué votre question par exemple avec jQuery UI si c'est celui qui est utilisé. Cela vous aiderait également si vous créez des extraits de code complets et fonctionnels dans votre question.L'une de ces réponses a-t-elle résolu votre question? SI oui, veuillez marquer celui-ci comme tel en cliquant sur la coche à gauche de cette réponse. Dans le cas contraire, veuillez ajouter plus de détails dans votre question ou un commentaire sur chacun pour expliquer pourquoi il ne répond pas à votre question.