Изменить дату выбора на основе флажка - PullRequest
Новая
       9

Изменить дату выбора на основе флажка

0 голосов
/ 08 декабря 2011

У меня есть 2 средства выбора даты, которые содержат флажки на панели кнопок.Я хочу изменить указатель даты, если этот флажок установлен или не установлен.Кажется, что все работает, за исключением фактического изменения выбора даты.Я пытаюсь сделать следующее: если флажок установлен, сборщик даты покажет номер недели и первый день недели в понедельник.Если флажок не установлен, он не показывает номер недели, и первый день недели - воскресенье

Сценарий: 

$(".datepicker").datepicker({
  showOn: 'button',
  buttonText: 'Date',
  showButtonPanel: true,
  showWeek: false,
  firstDay: 0,
  beforeShow: function (input, inst) {
    setTimeout(function () {
        var buttonPane = $(input)
            .datepicker("widget")
            .find(".ui-datepicker-buttonpane");
                              var html = "";
        var html = '<div class="broadcastFilter"><input type="checkbox"><label> Use Broadcast calendar </label></div>';
        buttonPane.append(html);
        test.DateSelectionDateEventBind();
        var optionChecked = $('.broadcastFilter input[type="checkbox"]').is(':checked');
        //works fine up until here. 
        buttonPane.click(function () {
            if(optionChecked)
            {
                $(".datepicker").datepicker('option', 'showWeek', true );
                $(".datepicker").datepicker('option', 'firstDay', 1 );
            }
            else
            {
                $(".datepicker").datepicker('option', 'showWeek', false);
                $(".datepicker").datepicker('option', 'firstDay', 0 );
            }
        });
    }, 1);
  },
  onChangeMonthYear: function (input) {
    setTimeout(function () {
        var buttonPane = $(input)
            .datepicker("widget")
            .find(".ui-datepicker-buttonpane");
        var html = '<div><input type="checkbox"><label> Use Broadcast calendar </label></div>';
        buttonPane.append(html);
        test.DateSelectionDateEventBind();
    }, 1);
  }
});

http://jsfiddle.net/dan_vitch/zEper/8/

Ответы [ 2 ]

1 голос
/ 08 декабря 2011

Во-первых, вы всегда проверяете значение optionChecked, которое определяется до нажатия флажка, что не меняет состояние флажка.Во-вторых, вы слушаете событие щелчка всего buttonPane, а не флажок.Третья проблема заключается в том, что вы не устанавливаете флажок на предыдущее значение при открытии средства выбора даты.(Хотя, возможно, ваш test объект позаботится об этом, я не видел эту часть кода, скрипта просто выдает ошибку об этом).

Итак, установите флажок в правильном состоянии:

buttonPane.append(html);
buttonPane.find(':checkbox').prop('checked', $('.datepicker').datepicker('option', 'showWeek'));

Прослушайте щелчки флажков: 

buttonPane.find(':checkbox').click(function () {

... и при щелчке не проверяйте старое свойство optionChecked, которое не изменилось,но проверьте, установлен ли флажок: 

if($(this).is(':checked'))

Вот скрипка, которая позаботится обо всем этом , но, как и сейчас, она закрывается при каждом нажатии флажка,Однако, когда код восстанавливает предыдущее состояние, он будет отображаться так, как вы его изменили, после повторного нажатия на него.

0 голосов
/ 08 декабря 2011

Ваша основная проблема - область действия вашей переменной "optionChecked".Внутри анонимной функции, которую вы привязываете к событию click, optionChecked не существует.

Самый простой способ решить эту проблему - просто переместить объявление в функцию click. 

buttonPane.click(function () {
    var optionChecked = $('.broadcastFilter input[type="checkbox"]').is(':checked');

    if(optionChecked) { 
        $(".datepicker").datepicker('option', 'showWeek', true );     
        $(".datepicker").datepicker('option', 'firstDay', 1 );
    }

Я думаю, что есть хороший шанс (я не проверял), что ваш DatePicker не покажет изменения, просто изменив параметры.Возможно, вам придется впоследствии вызвать метод обновления DatePicker. 

$('.datepicker').datepicker( "refresh" )
...