Jquery: DatePicker: date de début/fin

Question

j'ai regardé autour avant de poster ma question

suivant ce que je suis à la recherche dans mon datepicker (date de début et de fin):

1) Date de début: peut être une date, (l'utilisateur peut sélectionner le courant de la date de début (maintenant) à une date ultérieure

2.) Date de début: utilisateur peut sélectionner la date de début de retour en 6 mois. exemple: si aujourd'hui est 04/22/2010 alors je peux remonter jusqu'au 22/11/2009 mais pas plus de 6 mois.

3) Date de début si l'utilisateur de sélectionner la date de début (en cours d'avenir, pas au-delà) à moins de 10 jours, je voudrais alors d'alerter un message disant « il faut au moins 10 jours »

4) Date de fin: doit être la date du jour pour les dates futures toutes les dates précédentes sont désactivées.

5) ** Date de début/date de fin: ** ne doit pas dépasser une année.

Merci beaucoup.

PS: ne sais pas si je demande trop ici :)

Answer 1

je répondu à une question similaire pour un ami. Il avait besoin d'une date en cascade similaire, mais je pense que vous pouvez voir comment résoudre le problème si vous regardez mon balisage.

HTML

<form target="_self" action="ClearForm.aspx"> 

Clear Form

• Date de début:
• Date de fin:
• Effacer

JS

<script type="text/javascript"> 
$(document).ready(function() { 

    $('#endDate').datepicker({ showOn: 'button', 
     buttonImage: '../images/Calendar.png', 
     buttonImageOnly: true, onSelect: function() { }, 
     onClose: function() { $(this).focus(); } 
    }); 


    $('#startDate').datepicker({ showOn: 'button', 
     buttonImage: '../images/Calendar.png', 
     buttonImageOnly: true, onSelect: 
     function (dateText, inst) { 
      $('#endDate').datepicker("option", 'minDate', new Date(dateText)); 
     } 
     , 
     onClose: function() { $(this).focus(); } 
    }); 


});    

Answer 2

<input type="text" id="tbStartDate" value="" disabled="disabled" /> 
<input type="text" id="tbEndDate" value="" disabled="disabled" /> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#tbStartDate").datepicker({   
      showOn: 'button', 
      buttonImageOnly: true, 
      buttonImage: '/Content/Calendar.png', 
      buttonText: 'Click here (date)', 
      onSelect: function (dateText, inst) { 
       var $endDate = $('#tbStartDate').datepicker('getDate'); 
       $endDate.setDate($endDate.getDate() + 1); 
       $('#tbEndDate').datepicker('setDate', $endDate).datepicker("option", 'minDate', $endDate); 
      }, 
      onClose: function (dateText, inst) { 
       //$("#StartDate").val($("#tbStartDate").val()); 
      } 
     }); 

     $("#tbEndDate").datepicker({ 
      dateFormat: 'dd-mm-yy', 
      showOn: 'button', 
      buttonImageOnly: true, 
      buttonImage: '/Content/Calendar.png', 
      buttonText: 'Click here (date)', 
      onClose: function (dateText, inst) { 
       //$("#EndDate").val($("#tbEndDate").val()); 
      } 
     }); 

      var $endDate = $('#tbStartDate').datepicker('getDate'); 
      $endDate.setDate($endDate.getDate() + 1); 
      $('#tbEndDate').datepicker('setDate', $endDate).datepicker("option", 'minDate', $endDate); 
    }); 
</script> 

Answer 3

Je préfère écrire une configuration par défaut pour le datepicker en utilisant une classe pour qu'il fonctionne avec plus d'un avec moins de doublons.

onSelect: function(dateText, inst){ 
    // Check if _until exists and auto set mindate 
    if(inst.id.contains("_from")){ 
     $("#"+inst.id.replace("_from", "_until")).datepicker("option", "minDate", dateText); 
    } 
} 

Cela fonctionne en supposant que vos ID de formulaire sont cohérents. Par exemple, j'utilise date_until et date_de