Menu
Can I highlight an entire week in the standard Jquery UI date picker?
324
Define beforeShowDay within datepicker() method. In the function create a new date format according to the defined format (dd-mm-yyyy) in an Array. Check for the date in the Array with $. inArray() method if it is available then return [true, "highlight", tooltip_text]; otherwise return [true] .
datepicker('getDate'); var dayName = $. datepicker. formatDate('DD', curDate); This can also be used to get a shortened day of the week name (M), long or short day of the month (MM or M) by substituting DD for whatever component you're after.
inside the jQuery script code just paste the code. $( ". selector" ). datepicker({ dateFormat: 'yy-mm-dd' });
I know this post is quite old but I just found this code on another site and thought it might help.
Source code - from this post :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css"> <script type="text/javascript"> $(function() { var startDate; var endDate; var selectCurrentWeek = function() { window.setTimeout(function () { $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active') }, 1); } $('.week-picker').datepicker( { showOtherMonths: true, selectOtherMonths: true, onSelect: function(dateText, inst) { var date = $(this).datepicker('getDate'); startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay()); endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6); var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat; $('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings )); $('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings )); selectCurrentWeek(); }, beforeShowDay: function(date) { var cssClass = ''; if(date >= startDate && date <= endDate) cssClass = 'ui-datepicker-current-day'; return [true, cssClass]; }, onChangeMonthYear: function(year, month, inst) { selectCurrentWeek(); } }); $('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); }); $('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); }); }); </script> </head> <body> <div class="week-picker"></div> <br /><br /> <label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span> </body> </html >
195
I wrote a solution to this, which highlights the week. It will still pick the date selected, but that is fine for my purposes. #week is the input box that has the datepicker attached.
$('#week').datepicker({ beforeShowDay: $.datepicker.noWeekends, duration : 0, onChangeMonthYear: function() { setTimeout("applyWeeklyHighlight()", 100); }, beforeShow: function() { setTimeout("applyWeeklyHighlight()", 100); } }).keyup(function() { setTimeout("applyWeeklyHighlight()", 100); }); function applyWeeklyHighlight() { $('.ui-datepicker-calendar tr').each(function() { if($(this).parent().get(0).tagName == 'TBODY') { $(this).mouseover(function() { $(this).find('a').css({'background':'#ffffcc','border':'1px solid #dddddd'}); $(this).find('a').removeClass('ui-state-default'); $(this).css('background', '#ffffcc'); }); $(this).mouseout(function() { $(this).css('background', '#ffffff'); $(this).find('a').css('background',''); $(this).find('a').addClass('ui-state-default'); }); } }); } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
