2011-08-10 4 views
0

J'ai une datepicker qui a désactivé les dates de fermeture d'un magasin. Les utilisateurs peuvent toujours taper dans ce champ et la commande datepicker ne valide pas les dates désactivées dans le sélecteur. En fait, il n'honore même pas les dates max/min non plus ... Comment j'irais faire ça?valider jquery datepicker date par rapport aux jours désactivés

$("#date").datepicker({ 
    beforeShowDay : function(date) { 
     var day = date.getDay(); 
     return [(day != 0)]; 
    }, 
    minDate : '08/10/2011', 
    onClose: function(dateText, inst) { 
     try { 
      $.datepicker.parseDate('dd/mm/yy', dateText); 
     } catch (e) { 
      $(this).datepicker("setDate", ''); 
     }; 
    } 
}); 

Edit:

J'ai fini par rouler ma propre validation pour la saisie de texte. Voir ci-dessous:

var today = '08/10/2011'; 

$("#date").datepicker({ 
    beforeShowDay : function(date) { 
     var day = date.getDay(); 
     return [(day != 0 && day != 1 && day != 6)]; 
    }, 
    minDate : today, 
    onClose : function(dateText) 
    { 
     if(dateText) 
      try { 
       var date = $.datepicker.parseDate('mm/dd/yy', dateText); 
       var day = new Date($(this).val()).getDay(); 
       if(day == 0 || day == 1 || day == 6) 
       { 
        alert('Sorry, the clinic is closed on ' + dateText); 
        $(this).datepicker("setDate", ''); 
       } 
       if(date.getTime() - new Date(today).getTime() < 0) 
       { 
        alert('Please select a future date: ex. (' + today + ')'); 
        $(this).datepicker("setDate", ''); 
       } 
      } catch (e) { 
       alert('Please provide a valid date: ex. (' + today + ')'); 
       $(this).datepicker("setDate", ''); 
      }; 
    } 
}); 

Répondre

0

Le problème est que les restrictions jQuery s'appliquent à la fenêtre de sélection de date mais pas à l'entrée de texte à laquelle elle est liée. Vous pouvez donc soit lancer votre propre validation en utilisant quelque chose comme le framework de validation jQuery, soit une solution plus simple est de désactiver la zone de texte afin que l'utilisateur ne puisse fournir que la date à l'aide du sélecteur.

<div> 
    <p>Date: <input type="text" id="date" disabled="disabled"/></p> 
</div> 

$(function() { 
    $("#date").datepicker({    
     showOn: "button", 
     buttonImage: "http://jqueryui.com/demos/datepicker/images/calendar.gif", 
     buttonImageOnly: true, 
     minDate: ..., 
     maxDate: ... 
    }); 
}); 
Questions connexes