Une brève discussion sur la sélection de plage de dates DatePicker de Bootstrap

Je vais maintenant vous proposer une brève discussion sur la sélection de plage de dates DatePicker de Bootstrap. Permettez-moi de le partager avec vous maintenant et de le donner comme référence pour tout le monde.

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");

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde à l'avenir.

Articles connexes :

Un exemple simple d'utilisation d'AJAX pour implémenter la connexion à la page et la vérification du nom d'utilisateur enregistré

Schéma de boucle en Ajax

Une solution rapide pour qu'Ajax renvoie l'objet Object

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!