2013-03-08 5 views
9

Mam pole wyboru, w którym użytkownik może wybrać 3 różne sklepy. Nie powinno być możliwości wybierania weekendów dla sklepów 2 i 3, a dla sklepu 1 powinieneś być w stanie wybrać tylko pon - sob.jQuery Datepicker - odśwież dni, które można ustawić na podstawie wybranej opcji

Następujący javascript działa tylko przy pierwszym wyborze. Jeśli wybierzesz kolejny sklep zaraz po, będzie trzymać się starych opcji.

Próbowałem użyć $("#datepicker").datepicker("refresh"); (patrz how to refresh datepicker?), ale bez powodzenia. Zaczynam myśleć, że problem leży gdzie indziej.

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

Jak odświeżyć/zastosować ustawienia poprawnie z datepicker?

Odpowiedz

19

Zobacz to: DEMO

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

Musisz umieścić $("#datepicker").datepicker("destroy"); każdorazowo przed zmianą ustawień ...

+1

Wygląda na to rozwiązanie. Trochę dziwne jest jednak za każdym razem go niszczyć, ale w przypadku tego niewielkiego projektu wydaje mi się, że jest OK. – estrar

Powiązane problemy