Highlighting of special days in datepicker

classic Classic list List threaded Threaded
11 messages Options
Reply | Threaded
Open this post in threaded view
|

Highlighting of special days in datepicker

Jimbo M

I've been playing with this all morning and nothing so far...can
anyone help a newbie?  Hopefully I'll be up to speed soon and pulling
my own weight here.  But in the meanwhile:

I'm trying to populate the datepicker in inline mode so that certain
days are highlighted.  I've boiled it down to a syntax that I feel
should work, but it doesn't and I'm stumped.  Using filters such
as :even work, so why not this?

$("#calendar").datepicker();
var dates = [1, 5, 12, 21, 27, 30];
$(dates).each(function(i, d) {
  $("#calendar .ui-datepicker-days-cell a[text='" + d +
"']").addClass("myClass");
});

css:
.myClass {
  background-color: #88FF88;
}

Can anyone spot what I'm missing here?  Thanks...

--- Jim ---
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: Highlighting of special days in datepicker

Josh Nathanson-3

I'm not sure (could be wrong) but I don't think you can use .each in that
way -- passing an array to jQuery.

I think you need to do this:
$.each( dates, function(i) {
    // etc.

-- Josh


----- Original Message -----
From: "Jimbo M" <[hidden email]>
To: "jQuery UI" <[hidden email]>
Sent: Tuesday, October 14, 2008 9:37 AM
Subject: [jquery-ui] Highlighting of special days in datepicker


>
> I've been playing with this all morning and nothing so far...can
> anyone help a newbie?  Hopefully I'll be up to speed soon and pulling
> my own weight here.  But in the meanwhile:
>
> I'm trying to populate the datepicker in inline mode so that certain
> days are highlighted.  I've boiled it down to a syntax that I feel
> should work, but it doesn't and I'm stumped.  Using filters such
> as :even work, so why not this?
>
> $("#calendar").datepicker();
> var dates = [1, 5, 12, 21, 27, 30];
> $(dates).each(function(i, d) {
>  $("#calendar .ui-datepicker-days-cell a[text='" + d +
> "']").addClass("myClass");
> });
>
> css:
> .myClass {
>  background-color: #88FF88;
> }
>
> Can anyone spot what I'm missing here?  Thanks...
>
> --- Jim ---
> >


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: Highlighting of special days in datepicker

Jimbo M

Actually the .each part works great...give it two parameters and you
get the index in the first and the element of the array in the
second.  I've validated that the .each part is working okay...it's the
jQuery selector that's not finding anything.

I would think that $("#calendar .ui-datepicker-days-cell
a[text='15']") would return one element, but it doesn't.  Can anyone
see what I'm doing wrong?

On Oct 14, 9:53 am, "Josh Nathanson" <[hidden email]> wrote:

> I'm not sure (could be wrong) but I don't think you can use .each in that
> way -- passing an array to jQuery.
>
> I think you need to do this:
> $.each( dates, function(i) {
>     // etc.
>
> -- Josh
>
>
>
> ----- Original Message -----
> From: "Jimbo M" <[hidden email]>
> To: "jQuery UI" <[hidden email]>
> Sent: Tuesday, October 14, 2008 9:37 AM
> Subject: [jquery-ui] Highlighting of special days in datepicker
>
> > I've been playing with this all morning and nothing so far...can
> > anyone help a newbie?  Hopefully I'll be up to speed soon and pulling
> > my own weight here.  But in the meanwhile:
>
> > I'm trying to populate the datepicker in inline mode so that certain
> > days are highlighted.  I've boiled it down to a syntax that I feel
> > should work, but it doesn't and I'm stumped.  Using filters such
> > as :even work, so why not this?
>
> > $("#calendar").datepicker();
> > var dates = [1, 5, 12, 21, 27, 30];
> > $(dates).each(function(i, d) {
> >  $("#calendar .ui-datepicker-days-cell a[text='" + d +
> > "']").addClass("myClass");
> > });
>
> > css:
> > .myClass {
> >  background-color: #88FF88;
> > }
>
> > Can anyone spot what I'm missing here?  Thanks...
>
> > --- Jim ---- Hide quoted text -
>
> - Show quoted text -
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: Highlighting of special days in datepicker

Josh Nathanson-3

>I would think that $("#calendar .ui-datepicker-days-cell
>a[text='15']") would return one element, but it doesn't.  Can anyone
>see what I'm doing wrong?

a[text='15'] is not a valid selector -- whatever is in the brackets must be
an attribute of the element.

So you might need to do something like this (there might be a more efficient
way, this is off the top of my head):

 $(dates).each(function(i, d) {
    $("#calendar .ui-datepicker-days-cell a").each(function() {
        var a = $(this);
        if ( a.text() == d ) {
            a.addClass("myClass");
        }
    });
});

----- Original Message -----
From: "Jimbo M" <[hidden email]>
To: "jQuery UI" <[hidden email]>
Sent: Wednesday, October 15, 2008 9:08 AM
Subject: [jquery-ui] Re: Highlighting of special days in datepicker



Actually the .each part works great...give it two parameters and you
get the index in the first and the element of the array in the
second.  I've validated that the .each part is working okay...it's the
jQuery selector that's not finding anything.

I would think that $("#calendar .ui-datepicker-days-cell
a[text='15']") would return one element, but it doesn't.  Can anyone
see what I'm doing wrong?

On Oct 14, 9:53 am, "Josh Nathanson" <[hidden email]> wrote:

> I'm not sure (could be wrong) but I don't think you can use .each in that
> way -- passing an array to jQuery.
>
> I think you need to do this:
> $.each( dates, function(i) {
> // etc.
>
> -- Josh
>
>
>
> ----- Original Message -----
> From: "Jimbo M" <[hidden email]>
> To: "jQuery UI" <[hidden email]>
> Sent: Tuesday, October 14, 2008 9:37 AM
> Subject: [jquery-ui] Highlighting of special days in datepicker
>
> > I've been playing with this all morning and nothing so far...can
> > anyone help a newbie? Hopefully I'll be up to speed soon and pulling
> > my own weight here. But in the meanwhile:
>
> > I'm trying to populate the datepicker in inline mode so that certain
> > days are highlighted. I've boiled it down to a syntax that I feel
> > should work, but it doesn't and I'm stumped. Using filters such
> > as :even work, so why not this?
>
> > $("#calendar").datepicker();
> > var dates = [1, 5, 12, 21, 27, 30];
> > $(dates).each(function(i, d) {
> > $("#calendar .ui-datepicker-days-cell a[text='" + d +
> > "']").addClass("myClass");
> > });
>
> > css:
> > .myClass {
> > background-color: #88FF88;
> > }
>
> > Can anyone spot what I'm missing here? Thanks...
>
> > --- Jim ---- Hide quoted text -
>
> - Show quoted text -


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: Highlighting of special days in datepicker

Jimbo M

I cannot even get

var tbl = $("#calendar .ui-datepicker");

to find the table.  It seems to work in other situations, just not
with datepicker for me!  How would one apply css styles to the table
cells on the fly?  I'm confused and lost...
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: Highlighting of special days in datepicker

Jimbo M

And today it works.  Mercury must still be retrograde.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: Highlighting of special days in datepicker

Jimbo M

End result:

var cal = $("#calendar").datepicker();
var dates = [1, 5, 12, 21, 27, 30];
$(dates).each(function(i, d) {
  cal.find("a[innerHTML=" + d + "]").parent().addClass("myClass");
});

I needed to use innerHTML instead of text.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: Highlighting of special days in datepicker

PeterAce

Why don't u use datepickers functionality to highlight special days?
I use an inline datepicker as well and showing special days works just
fine.
I use something similar to:

$("#mnu_calendar").datepicker({
  ... other options
  beforeShowDay: function(thedate) {
    var theday    = thedate.getDate();
    if( $.inArray(theday,specialDays) == -1 ) return [true,""];
    return [true, "specialDate"];
  },
  ... more options
});

specialsDays is my array with special days in this month e.g. [3, 12,
24].
"specialDate" is the CSS class name datepicker will add to the special
days, so you can make them look anyway you want


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: Highlighting of special days in datepicker

Jimbo M

Howdy Peter, in fact I discovered beforeShowDay shortly after posting
the above message, converted my code and have been happy with the
results.  Thanks for posting the solution here (I forgot).

On Oct 20, 1:26 am, PeterAce <[hidden email]> wrote:

> Why don't u use datepickers functionality to highlight special days?
> I use an inline datepicker as well and showing special days works just
> fine.
> I use something similar to:
>
> $("#mnu_calendar").datepicker({
>   ... other options
>   beforeShowDay: function(thedate) {
>     var theday    = thedate.getDate();
>     if( $.inArray(theday,specialDays) == -1 ) return [true,""];
>     return [true, "specialDate"];
>   },
>   ... more options
>
> });
>
> specialsDays is my array with special days in this month e.g. [3, 12,
> 24].
> "specialDate" is the CSS class name datepicker will add to the special
> days, so you can make them look anyway you want
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: Highlighting of special days in datepicker

anusha999
In reply to this post by Jimbo M
Hi,

I am trying to highlight certain days with events on the calendar....I have to get the days from Model.

My code is as follows:

<script type="text/javascript">
 var datesArray = new Array();
   for (var item in Model) {
     datesArray[datesArray.length] = "<%= item.PerformanceDate.Day %>";
   }
  $(document).ready(function()  {

   // Datepicker
   $('.datepicker').datepicker({
     inline: true,
     beforeShowDay: function (date) {
        var theday = date.getDate();
        if ($.inArray(theday, datesArray) <0) return [true, ""];
           return [true, "specialDate"];
        }

   });
});


It says item cant be found..cant we access model properties inside javascript??

Please reply..

Thanks a lot!
Anusha
Jimbo M wrote
I've been playing with this all morning and nothing so far...can
anyone help a newbie?  Hopefully I'll be up to speed soon and pulling
my own weight here.  But in the meanwhile:

I'm trying to populate the datepicker in inline mode so that certain
days are highlighted.  I've boiled it down to a syntax that I feel
should work, but it doesn't and I'm stumped.  Using filters such
as :even work, so why not this?

$("#calendar").datepicker();
var dates = [1, 5, 12, 21, 27, 30];
$(dates).each(function(i, d) {
  $("#calendar .ui-datepicker-days-cell a[text='" + d +
"']").addClass("myClass");
});

css:
.myClass {
  background-color: #88FF88;
}

Can anyone spot what I'm missing here?  Thanks...

--- Jim ---
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@googlegroups.com
To unsubscribe from this group, send email to jquery-ui+unsubscribe@googlegroups.com
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
Reply | Threaded
Open this post in threaded view
|

RE: Highlighting of special days in datepicker

H G Laughland
 
Is this the entire javascript? If so Model is not being created anywhere.
That is why it can't be found.
-----Original Message-----
From: [hidden email] [mailto:[hidden email]] On
Behalf Of anusha999
Sent: Tuesday, 20 July 2010 10:32 a.m.
To: [hidden email]
Subject: Re: [jquery-ui] Highlighting of special days in datepicker


Hi,

I am trying to highlight certain days with events on the calendar....I have
to get the days from Model.

My code is as follows:

<script type="text/javascript">
 var datesArray = new Array();
   for (var item in Model) {
     datesArray[datesArray.length] = "<%= item.PerformanceDate.Day %>";
   }
  $(document).ready(function()  {

   // Datepicker
   $('.datepicker').datepicker({
     inline: true,
     beforeShowDay: function (date) {
        var theday = date.getDate();
        if ($.inArray(theday, datesArray) <0) return [true, ""];
           return [true, "specialDate"];
        }

   });
});


It says item cant be found..cant we access model properties inside
javascript??

Please reply..

Thanks a lot!
Anusha


--
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email].
To unsubscribe from this group, send email to [hidden email].
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.