css - Jquery DatePicker Conditional Styling -
i'm using jquery datepicker element allows user select months.
<style> .ui-datepicker-calendar { display: none; } </style>
the above css works fine. i'm passing variable indicates whether user able select months or can select date too. kind of conditional styling.
the code goes 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 - test if months shown) { $(".ui-datepicker-calendar").css("display", "none"); $('#mydate').datepicker( { changemonth: true, changeyear: true, changedate: false, // parameter trial. on cross-checking jquery-ui.js, found there's no such property. :( showbuttonpanel: true, dateformat: 'mm yy', }); //$(".ui-datepicker-calendar").css({display: 'none'}); -- didn't work either } else { //normal code jquery datepicker } });
now, above code not giving me required output. need execute:
$(".ui-datepicker-calendar").css("display", "none");
only if mytest in above code true.
in other words, still showing dates in datepicker dont want show.
please help.
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 run whenever need $('#mydate').data('month-only', true); handledateinput();
with: .ui-month-only .ui-datepicker-calendar { display: none; }
in css. , here's jsfiddle of working: http://jsfiddle.net/fgwwt/3/
you call handledateinput()
function when change data option based on logic.
i think wanted achieve, hope helps! :)
Comments
Post a Comment