Thank you Dave. This works very well now. I've added two more special type days with different backgrounds and disabled/enabled states. So far everything works as desired.
Will put it up on my website shortly so that folks who want to do this in the future will have a ready made resource. Thanks for all your help. Steveoh On Apr 17, 2009, at 6:27 AM, Fontzter wrote: > > I think this is a bug. It seems that the beforeShowDay function > breaks if the dialog element is not an input (i.e. inline). If you > comment out the beforeShowDay the code in the jsbin works. Likewise, > if you use an input instead the beforeShowDay works. Can you enter a > ticket for this? > > It seems that the inline picker is not fully rendered. A work-around > is below using a brief timeout to let the dp render. You may have to > lengthen the duration. This is not optimal; but it is a work-around. > I also resaved it in the jsbin: http://jsbin.com/owita > > > Dave > > $(function() { > $("#datepickerthing").datepicker({ > altField: '#actualDate', > minDate:'0', > maxDate: '+2M' > }); > //beforeShowDay must be delayed when the datepicker element is > rendering inline > setTimeout(function() {$("#datepickerthing").datepicker("option", > "beforeShowDay", nationalDays); }, 100); > > var natDays = > ["4 > / > 22 > / > 2009 > ","4 > / > 23 > / > 2009 > ","4 > / > 24 > / > 2009 > ","4 > / > 25 > / > 2009 > ","4 > / > 26 > / > 2009 > ","5 > / > 27 > / > 2009 > ","5 > / > 28/2009","6/26/2009","6/27/2009","6/28/2009","6/29/2009","6/30/2009"]; > function nationalDays(date) { > var sDate = (date.getMonth()+1).toString() + "/" + date.getDate > ().toString() + "/" + date.getFullYear().toString(); > if ($.inArray(sDate, natDays) != -1) return [false,"","Not this > day!"]; > else return [true, ""]; > } > }); > > > On Apr 16, 7:17 pm, GulDam <[email protected]> wrote: >> Now this is a thing of beauty. It works. I'm most grateful!!! >> >> Now, if I try to use the datepicker inline, then I run into issues >> again. >> >> <body> >> <input id="actualDate" type="text" /> >> <div id="datepickerthing"></div> >> </body> >> >> I get the error that H is notdefined. Tried this in JS Bin as well as >> locally. Same issue. >> >> Back to scratching my head. >> >> On Apr 16, 1:46 pm, Fontzter <[email protected]> wrote: >> >>> Try this code:http://jsbin.com/imike/edit >> >>> $(function() { >>> $("#datepickerthing").datepicker({ >>> altField: '#actualDate', >>> minDate:'0', >>> maxDate: '+2M', >>> beforeShowDay: nationalDays >>> }); >> >>> var natDays = >>> ["4 >>> / >>> 22 >>> / >>> 2009 >>> ","4 >>> / >>> 23 >>> / >>> 2009 >>> ","4 >>> / >>> 24 >>> / >>> 2009 >>> ","4 >>> / >>> 25 >>> / >>> 2009 >>> ","4 >>> / >>> 26 >>> / >>> 2009 >>> ","5 >>> / >>> 27 >>> / >>> 2009 >>> ","5 >>> / >>> 28 >>> /2009","6/26/2009","6/27/2009","6/28/2009","6/29/2009","6/30/2009"]; >>> function nationalDays(date) { >>> var sDate = (date.getMonth()+1).toString() + "/" + date.getDate >>> ().toString() + "/" + date.getFullYear().toString(); >>> if ($.inArray(sDate, natDays) != -1) return [false,"","Not this >>> day!"]; >>> else return [true, ""]; >>> } >> >>> }); >> >>> Hth, >> >>> Dave >> >>> On Apr 16, 3:09 pm, GulDam <[email protected]> wrote: >> >>>> I'm (still) struggling with the DatePicker. >> >>>> Here's the DatePicker in question: >> >>>> http://www.fishyfish.com/datepicker/index.html >> >>>> I am trying to add custom dates. Poking around I've found an >>>> example >>>> that someone else was struggling with, and borrowed some ideas. >> >>>> The DatePicker functions. And dates in the past are disabled, as >>>> are >>>> dates two months in the future. This is as desired. >> >>>> And so in this example, I've tried adding a class: brownbox to >>>> change >>>> the background color and border of the dates I have added to >>>> natDays. >>>> There is no change in styles but there are also no errors being >>>> thrown. >> >>>> Any ideas why my code isn't working? >> >>>> Thanks. >> >>>> Steveoh >> >>>> Here's the code: >> >>>> <!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> >>>> <meta http-equiv="content-type" content="text/html; >>>> charset=utf-8" /> >>>> <title>My Lovely Calendar</title> >>>> <link type="text/css" href="css/irp.css" rel="stylesheet" /> >>>> <link type="text/css" href="jquery-ui-1.7.1.custom/css/smoothness/ >>>> jquery-ui-1.7.1.custom.css" rel="stylesheet" /> >>>> <script type="text/javascript" src="jquery-ui-1.7.1.custom/js/ >>>> jquery-1.3.2.min.js"></script> >>>> <script type="text/javascript" src="jquery-ui-1.7.1.custom/js/ >>>> jquery- >>>> ui-1.7.1.custom.min.js"></script> >> >>>> <script type="text/javascript"> >>>> $(function() { >>>> $("#datepickerthing").datepicker({ altField: >>>> '#actualDate', minDate: >>>> '0', maxDate: '+2M' }); >>>> $ >>>> ("#datepickerthing").datepicker({ beforeShowDay: nationalDays}); >> >>>> natDays = [[4, 22, 2009],[4, 23, 2009],[4, 24, 2009], >>>> [4, 25, >>>> 2009], >>>> [4, 26, 2009],[5, 27, 2009],[5, 28, 2009],[6, 26, >>>> 2009],[6, 27, >>>> 2009], >>>> [6, 28, 2009],[6, 29, 2009],[6, 30, 2009]]; >> >>>> function nationalDays(date) { >>>> for (i = 0; i < natDays.length; i++) { >>>> if (date.getMonth() == natDays[i][0] - 1 >>>> && date.getDate() == natDays[i][1] >>>> && date.getFullYear() == >>>> natDays[i][2]) { >>>> return [false, natDays[i][0][1] ]; >>>> } >>>> } >>>> return [true, 'brownbox']; >>>> } >>>> }); >>>> </script> >> >>>> </head> >>>> <body id="OT_irp"> >>>> <div class="OT_wrapper"> >>>> <ul> >>>> <li><label>Select Date:</label> >>>> <div id="datepickerthing"></div> >>>> <input type="text" id="actualDate" value=""> >>>> </li> >>>> </body> >>>> </html> >> >>>> On Apr 14, 2009, at 12:12 PM, JBeckton wrote: >> >>>> I have not tried to use this date picker to it's limits but what I >>>> suggest if you need a date picker with allot more options use the >>>> one >>>> from YUI. It may have a bit of a learning curve but it does >>>> everything >>>> you need. > > --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
