jQuery ui utilise le plug-in datepicker pour implémenter la date de début (minDate) et la date de fin (maxDate)_jquery

Pour utiliser jQuery ui, vous devez d'abord présenter la bibliothèque de classes jQuery, le script jQuery ui js et la feuille de style css jQuery ui. L'exemple de code est le suivant :

Copier le code Le code est le suivant :

< ;link rel ="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8.18.custom.css">

Remarque : lors de l'introduction des scripts js, vous devez d'abord introduire la bibliothèque de classes jQuery, puis introduire le script jQuery ui

Voici deux étapes de mise en œuvre :

Idée 1 :

La première étape consiste à implémenter deux composants datepicker.

Vous devez définir deux balises d'entrée, le type est du texte et spécifier l'attribut id

Le code HTML est le suivant

Copier le code Le code est le suivant :

Date de début :
Date de fin :

Récupérez les objets jQuery des deux éléments d'entrée dans le code js et convertissez-les en composants datepicker

Le code Js est le suivant

Copier le code Le code est le suivant :

$(document).ready(function( ){
                                                                                                                                   
Après avoir mis en œuvre l'opération ci-dessus, cliquez sur la zone de texte sur la page. Si le sélecteur de date apparaît, cela signifie un succès.

Étape 2 Définir les dates de début et de fin

Lorsque la valeur de la date de début est sélectionnée, la valeur minimale de la date de fin doit être la date de début ; de même, lorsque la date de fin est sélectionnée, la valeur maximale de la date de début doit être la date de fin ; Nous pouvons utiliser l'attribut onSelect dans le sélecteur de date pour définir l'événement qui est déclenché lorsque la date spécifiée est sélectionnée, et utiliser cet événement pour spécifier la date minimale ou la date maximale correspondante du sélecteur de date.

Le code Js est le suivant

Copier le code

Le code est le suivant :$("#start").datepicker ({ onSelect:function(dateText,inst){ $("#end").datepicker("option","minDate",dateText);

}

});
$( "#end").datepicker({
onSelect:function(dateText,inst){
$("#start").datepicker("option","maxDate",dateText);
}
});



Remarque : L'attribut dateText dans la fonction anonyme est la chaîne de la date actuellement sélectionnée

Idée 2 :

La première étape consiste à obtenir deux objets zone de texte en même temps et à les convertir en sélecteurs de date (en utilisant le sélecteur de jQuery)

Le code HTML est le suivant

Copier le code

Le code est le suivant :Date de début : Date de fin :

Le code Js est le suivant

Copier le code

Le code est le suivant :var dates = $("#start, #end" );dates.datepicker();

La deuxième étape : Également après avoir sélectionné la date, déclenchez l'événement onSelect et appelez la fonction pour passer le paramètre selectedDate,

Dans le corps de la fonction, déterminez d'abord si l'événement déclencheur est la date de début ou la date de fin. Utilisez ce jugement pour spécifier et définir minDate ou maxDate, puis utilisez la fonction not() pour sélectionner inversement un autre objet datepicker et définir son objet. propriété correspondante.

Le code Js est le suivant

Copier le code

Le code est le suivant :dates.datepicker({ onSelect : function( selectedDate){ var option = this.id == "start" ? "minDate" : "maxDate";

dates.not(this).datepicker("option", option, selectedDate);

}
});

De cette façon, après avoir défini un correspondant, l'autre correspondant sera restreint.

L'effet obtenu est le suivant :