Comment sélectionner une plage de dates à l'aide de la propriété DatePicker de Bootstrap

Cette fois, je vais vous montrer comment sélectionner une plage de dates pour l'attribut DatePicker de Bootstrap Quelles sont les précautions pour sélectionner une plage de dates pour l'attribut DatePicker de Bootstrap ? un cas pratique, regardons ensemble.

Lors de l'utilisation de plug-ins de date, cela est souvent nécessaire. Deux sélections de zone de saisie. L'heure de début est inférieure à l'heure de fin, l'heure de fin est supérieure à l'heure de début, et l'heure de début et l'heure de fin ne sont ni supérieures à l'heure actuelle.

Bien sûr, nous pouvons utiliser le résultat de la sélection pour juger si la saisie est correcte ou non. Mais une meilleure approche serait que notre sélecteur de date ajoute quelques restrictions.

Bootstrap est équipé d'un excellent plug-in de sélection de date. DatePicker et DateTimePicker.

Les deux fonctions sont très similaires. La méthode d'utilisation est également similaire. DatePicker prend en charge plus d'événements et de paramètres.

Regardez l'API pour savoir qu'il y aura un événement changeDate lorsque la date change. Lorsque la date sélectionnée change, le rappel que nous avons donné à cet événement sera appelé. Mais malheureusement, cet événement ne semble pas se déclencher lorsque l'on saisit ou supprime directement la date dans la zone de saisie. Vous pouvez donc ajouter l'attribut en lecture seule à la zone de saisie. État en lecture seule et donnez au contrôle de date un bouton d'effacement. De cette manière, le changement de date ne peut normalement être contrôlé que via le plug-in de date.

Cependant, lorsque vous utilisez le plug-in DateTimePicker pour cliquer sur le bouton Effacer, l'erreur Uncaught TypeError: Cannot read property 'getTime' of null sera signalée. Par conséquent, l'événement changeDate ne peut pas être utilisé normalement.

J'ai donc utilisé le plug-in DatePicker à la place.

Ensuite, lorsque la date d'une zone de saisie change (y compris l'effacement), l'événement changeDate est déclenché et la plage facultative d'une autre zone de saisie est modifiée dans sa

fonction de rappel .

De plus, si DatePicker souhaite que l'interface affiche le chinois, il doit également charger du CSS. bootstrap-datepicker.zh-CN.min.js.

Voici le code :

function DatePicker(beginSelector,endSelector){
  // 仅选择日期
  $(beginSelector).datepicker(
  {
  	language: "zh-CN",
  	autoclose: true,
  	startView: 0,
  	format: "yyyy-mm-dd",
  	clearBtn:true,
  	todayBtn:false,
  	endDate:new Date()
  }).on('changeDate', function(ev){  	
  	if(ev.date){
  		$(endSelector).datepicker('setStartDate', new Date(ev.date.valueOf()))
  	}else{
  		$(endSelector).datepicker('setStartDate',null);
  	}
  })
  $(endSelector).datepicker(
  {
  	language: "zh-CN",
  	autoclose: true,
  	startView:0,
  	format: "yyyy-mm-dd",
  	clearBtn:true,
  	todayBtn:false,
  	endDate:new Date()
  }).on('changeDate', function(ev){ 
  	if(ev.date){
  		$(beginSelector).datepicker('setEndDate', new Date(ev.date.valueOf()))
  	}else{
  		$(beginSelector).datepicker('setEndDate',new Date());
  	} 
  })
}
DatePicker("#date_begin","#date_end");

Bootstrap DatePicker implémente la sélection de date La date de début n'est pas supérieure à l'heure de fin, l'heure de fin n'est pas inférieure. que l'heure de début, et la date de début et la date de fin ne sont pas supérieures à la date actuelle.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Ajax implémente le processus complet d'enregistrement d'un nom d'utilisateur

Implémentation de l'interaction de données Ajax+PHP

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!