2013-03-08 4 views
9

У меня есть поле выбора, в котором пользователь может выбрать 3 разных магазина. Невозможно выбрать выходные дни для магазинов 2 и 3, а для магазина 1 вы должны выбрать только пн - сб.jQuery Datepicker - обновить дни подбора на основе выбранной опции

Следующий javascript работает только с первого выбора. Если вы сразу выбираете другой магазин, он будет придерживаться старых опций.

Я пробовал использовать $("#datepicker").datepicker("refresh"); (см. how to refresh datepicker?), но безуспешно. Я начинаю думать, что проблема кроется в другом месте.

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

Как обновить/применить настройки правильно с DatePicker?

ответ

19

Смотрите так: 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"); 
    } 

Вам нужно положить $("#datepicker").datepicker("destroy"); каждый раз перед сменой настроек ...

+1

Похоже решение. Кажется немного странным уничтожать его каждый раз, хотя, но для этого крошечного проекта, я думаю, все в порядке. – estrar

Смежные вопросы