Question

I have 2 date pickers that contain check boxes within the button pane. I want to alter the date picker based on if this box is/isn’t checked. Everything seems to be working except for the actual altering of the date picker. What I am trying to accomplish is: if the check box is checked date picker show the week number and the first day of the week in Monday. If the box is not checked, it doesn’t show the week number and the first day of the week is Sunday

Script:

$(".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/

Answer 1

For one thing you’re always checking for optionChecked which is determined before the checkbox is clicked, which doesn’t change the state of the checkbox. For another, you’re listening to the click event of the entire buttonPane and not for that of the checkbox. A third issue is that you’re not setting the checkbox to its previous value, upon opening the datepicker. (Although perhaps your test object takes care of that, I haven’t seen that part of the code, the fiddle just gives an error about it).

So, initialize the checkbox in the proper state:

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

Listen to checkbox clicks:

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

… and when it is clicked, don’t check the old optionChecked property, which won’t have changed, but check whether or not the checkbox is checked:

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

Here’s a fiddle that takes care of all of that, but as it is right now, it closes whenever the checkbox is clicked. As the code restores previous state, though, it’ll show up in the manner you changed it to, once you click it again.