CODEWITHSUNDEEP
jqueryjquery-ui-datepicker
dan_vitch
dan_vitch

Reputation: 4559

Alter date picker based on checkbox

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/

Upvotes: 0

Views: 2000

Answers (2)

David Hedlund
David Hedlund

Reputation: 129812

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.

Upvotes: 1

Will Reese
Will Reese

Reputation: 2841

Your main issue is the scope of your variable "optionChecked". Inside the anonymous function you are binding to the click event, optionChecked doesn't exist.

The easiest way to solve this problem would be to just move the declaration inside your click function.

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

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

I think there is a good chance (i didn't check) that your datepicker won't show the changes just by altering the options. You might have to call datepicker's refresh method afterwards.

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

Upvotes: 0

Related Questions