web-dev-qa-db-fra.com

Désactiver certaines dates de html5 datepicker

Est-il possible de désactiver les dates lorsque j'utilise .. Je souhaite désactiver la date du jour pour un scénario et les dates futures pour un autre scénario .. Comment puis-je désactiver les dates?

html5datedatepicker
17
Seeya K

Vous pouvez ajouter un attribut min ou max au input type=date . La date doit être au format ISO (aaaa-mm-jj). Ceci est pris en charge par de nombreux navigateurs mobiles et versions actuelles de Chrome, bien que les utilisateurs puissent entrer manuellement une date non valide sans utiliser le sélecteur de date.

<input name="somedate" type="date" min="2013-12-25">

Les attributs min et maxdoivent être une date complète; il n'y a aucun moyen de spécifier "aujourd'hui" ou "+0". Pour ce faire, vous devez utiliser JavaScript ou un langage côté serveur:

var today = new Date().toISOString().split('T')[0];
document.getElementsByName("somedate")[0].setAttribute('min', today);

http://jsfiddle.net/mblase75/kz7d2/

Exclure seulement aujourd'hui, tout en permettant des dates passées ou futures, n'est pas une option avec ici. Cependant, si vous vouliez dire que vous voulez que demain soit la date min (masquant aujourd'hui et toutes les dates passées), consultez cette question pour incrémenter today d'un jour.

Comme dans tous les autres cas impliquant des formulaires HTML, vous devez toujours valider le champ côté serveur, quelle que soit la façon dont vous le contraignez côté client.

42
Blazemonger

HTML datepicker (<input type=date>) prend en charge l'attribut min/max, mais il est pas largement pris en charge .

En attendant, vous pouvez envisager d’utiliser bootstrap-datepicker , v1.2.0 est sur github .

Références:

Spéc. W3C

3
leesei

Vous pouvez utiliser ceci pour désactiver les dates futures:
Dans votre fonction document.ready, placez

//Display Only Date till today //

var dtToday = new Date();
var month = dtToday.getMonth() + 1;     // getMonth() is zero-based
var day = dtToday.getDate();
var year = dtToday.getFullYear();
if(month < 10)
   month = '0' + month.toString();
if(day < 10)
   day = '0' + day.toString();

var maxDate = year + '-' + month + '-' + day;
$('#dateID').attr('max', maxDate);

et sous forme

<input id="dateID" type="date"/>

Voici le travail jFiddle Demo

0
Sreejith BS