web-dev-qa-db-fra.com

jQuery Datepicker - actualise les jours sélectionnables en fonction de l'option sélectionnée

J'ai une boîte de sélection où l'utilisateur peut choisir 3 magasins différents. Il ne devrait pas être possible de choisir le week-end pour les magasins 2 et 3, et pour le magasin 1, vous ne devriez pouvoir choisir que lundi - samedi.

Le javascript suivant ne fonctionne que sur le premier choix. Si vous choisissez un autre magasin juste après, les anciennes options resteront inchangées. 

J'ai essayé d'utiliser $( "#datepicker" ).datepicker("refresh"); (voir comment actualiser datepicker? ) mais sans succès. Je commence à penser que le problème est ailleurs.

Javascript:

$(function() {

  var setting, currentShop = 0;

  /* Select box */

  $('select#shop').change(function() {
    (currentShop = $(this).val() == 1) ? loadDatePicker(setting = 'noSunday') : loadDatePicker(setting = 'noWeekends');
  });

  /* Datepicker */

  function noSunday(date){ 
    var day = date.getDay(); 
    return [(day > 0), '']; 
  }

  function loadDatePicker(setting) {
    if(setting == 'noWeekends') {
      $( "#datepicker" ).datepicker({ beforeShowDay: $.datepicker.noWeekends, minDate: +2, maxDate: "+1M" }); 
    }
    if(setting == 'noSunday') {
      $( "#datepicker" ).datepicker({ beforeShowDay: noSunday, minDate: +2, maxDate: "+1M" }); 
    }
    $( "#datepicker" ).datepicker("refresh");
  }
});

HTML:

  <select id="shop" name="shop">
    <option value="0" selected="selected">Choose a shop</option>
    <option value="1">1 (closed sundays)</option>
    <option value="2">2 (closed weekends)</option>
    <option value="3">3 (closed weekends)</option>
  </select>
  <label for="datepicker">Datepicker</label><input type="text" name="date" id="datepicker" value="" readonly="readonly" />

Jsfiddle: http://jsbin.com/ajavek/1/edit

Comment actualiser/appliquer les paramètres correctement avec datepicker?

javascriptjquerydatepicker
12
estrar

Voir ceci: D&EACUTE;MO

  function loadDatePicker(setting) {
    $("#datepicker").datepicker("destroy");
    if(setting == 'noWeekends') {
      $( "#datepicker" ).datepicker({ beforeShowDay: $.datepicker.noWeekends, minDate: +2, maxDate: "+1M" }); 
    }
    else if(setting == 'noSunday') {
      $( "#datepicker" ).datepicker({ beforeShowDay: noSunday, minDate: +2, maxDate: "+1M" }); 
    }
    $( "#datepicker" ).datepicker("refresh");
  }

Vous devez mettre $("#datepicker").datepicker("destroy"); à chaque fois avant de modifier les paramètres ...

24
Anujith
$("#datepicker").datepicker("destroy");

Au-dessus de la ligne de travail pour effacer la datepicker.

1
Atik Fahm

$ ("# datepicker"). datepicker ("détruire");

0
Devendra