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 -~----------~----~----~----~------~----~------~--~---
