Jquery DatePicker Conditional Styling

Question

I'm using a Jquery datepicker element which allows a user to select only months.

<style>
    .ui-datepicker-calendar {
        display: none;
    }
</style>

The above css works fine. But I'm passing a variable that indicates whether the user is able to select only months or he can select date too. A kind of Conditional Styling.

The code goes something like this for me now.

<head>
    <link rel="stylesheet" href="styles/jquery-ui.css" />
    <script language="javascript" type="text/javascript" src="js/jquery.js" ></script>
    <script language="javascript" type="text/javascript" src="js/jquery-ui.js"></script>
</head>

//some code here

 <label for="myDate">myDate</label>
 <input type="text" id="myDate" name="myDate" />

//some more code

if(//myTest - This is to test if only months are to be shown)
    {
        $(".ui-datepicker-calendar").css("display", "none");

            $('#myDate').datepicker( {
                changeMonth: true,
                changeYear: true,
                changeDate: false, // This parameter is just for trial. On cross-checking with jquery-ui.js, I found there's no such property. :(
                showButtonPanel: true,
                dateFormat: 'MM yy',
            });

        //$(".ui-datepicker-calendar").css({display: 'none'}); -- This didn't work either
    }
    else
    {
        //normal code for a jquery datepicker
    }

});

Now, the above code is not giving me the required output. I need to execute:

$(".ui-datepicker-calendar").css("display", "none");

only if myTest in above code is true.

In other words, it is still showing the dates in the datepicker which I dont want to show.

Please help.

Can you not just change the parameters for the `datepicker` when the condition is true/false? — putvande, Aug 07 '13 at 11:46
I'm not sure what parameter would do the job. I thought there should be something like changeDate or changeDay, but no luck. :( — Crash OR, Aug 07 '13 at 11:54
It sounds like you want the user to pick a month+year without having to pick a specific day. Is that correct? — cfs, Aug 07 '13 at 11:54
It looks like the jQuery UI datepicker doesn't support that. You should probably look for a different date picker or roll your own that just does what you need. — cfs, Aug 07 '13 at 12:05

simey.me · Accepted Answer · 2013-08-07T13:38:01.863

0

Try this:

function handleDateInput() {

  var $input = $('#myDate');
  var dClass = "ui-normal";

  var dOptions = {
    changeMonth: false,
    changeYear: false,
    dateFormat: 'dd MM yy',
    showButtonPanel: false
  };

  if( $input.data('month-only') === true ) {

    var dFormat = "MM yy";

    dOptions = {
      changeMonth: true,
      changeYear: true,
      showButtonPanel: true,
      dateFormat: dFormat,
      onClose: function( e, ui ) {
        var d = new Date( ui.drawYear , ui.drawMonth , 1);
        $(ui.input).datepicker('setDate', d);
      }
    };

    dClass = "ui-month-only";

  }

  $('#myDate').datepicker( dOptions ).datepicker('widget').addClass( dClass );

};

// these next 2 lines can be run whenever you need
$('#myDate').data('month-only', true);
handleDateInput();

with: .ui-month-only .ui-datepicker-calendar { display: none; } in the CSS. and here's a JSFIDDLE of it working: http://jsfiddle.net/FgwwT/3/

You call the handleDateInput() function when you change the data option based on your logic.

I think this is what you wanted to achieve, hope it helps! :)

edited Aug 07 '13 at 13:38

answered Aug 07 '13 at 12:11

simey.me

2,147
1
19
21

Thats so cool...... Thanks Simey. All I did is added the class to the widget as per your code. Rest of my code is unchanged. It worked. But I'm wondering, why on earth it didn't work for the: `$(".ui-datepicker-calendar").css("display", "none");` This is seemingly logically & syntactically correct. This is confusing. Can you help with this? – Crash OR Aug 07 '13 at 12:48
Sorry, forgot to add to the post: `.ui-month-only .ui-datepicker-calendar { display: none; }` for the hiding/showing of the calendar part. As for your own logic, I'm not really sure how you're setting the month/year into the text box without something similar to my `onClose` function? -- I'm not certain why your programmatical show/hide didn't work, but it's better to use CSS anyhow. :) – simey.me Aug 07 '13 at 13:23
slightly updated the code to be more robust, if you're using your own method and you think it works well you should share it for anyone else looking for the answer :) – simey.me Aug 07 '13 at 13:38

score 0 · Answer 2 · answered Aug 07 '13 at 12:12

0

You can use show() and hide().

$('#myDate').datepicker( {
    changeMonth: true,
    changeYear: true,
    changeDate: false, // This parameter is just for trial. On cross-checking with jquery-ui.js, I found there's no such property. :(
    showButtonPanel: true,
    dateFormat: 'MM yy'
});

if(//myTest - This is to test if only months are to be shown){
    $(".ui-datepicker-calendar").hide();
} else {
    $(".ui-datepicker-calendar").show();
}

You need to add that AFTER the datepicker function otherwise the element .ui-datepicker-calendar doesn't exist and you can't apply hide() / show() on that element.

answered Aug 07 '13 at 12:12

putvande

15,068
3
34
50

You can only use the `init` once. What does your code look like now? – putvande Aug 07 '13 at 12:48
Its the same as above. All I did is added hide() method after the datepicker function as suggested. But, again no result. – Crash OR Aug 07 '13 at 12:59
Toggling won't do much good for my existing code..Thanks buddy :)' – Crash OR Aug 07 '13 at 18:00

score 0 · Answer 3 · answered Aug 07 '13 at 18:11

<head>
   <style>
       .ui-month-only .ui-datepicker-calendar { display: none; }
   </style>
</head>

//some code

if(//myTest - This is to test if only months are to be shown)
{
        $('#myDate').datepicker( {
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'MM yy',
        });

       $('#myDate').datepicker('widget').addClass( "ui-month-only" );
}
else
{
    //normal code for a jquery datepicker that allows a user to show the dates too.
}

Guys, Thanks for your help.. This is the code that worked for me.. but I'm still not sure why my earlier code didn't work. Any suggestions will help us get more insight into subject. Thanks.

Jquery DatePicker Conditional Styling

3 Answers3