Search jQuery

jQuery Forum

Using jQuery UI

humblecat

how to highlight multiple days in datepicker (in inline)?

in Using jQuery UI • 8 years ago

How to highlight multiple days in datepicker (in inline) using my selected color?

Replies(13)

jakecigar

Re: how to highlight multiple days in datepicker (in inline)?

8 years ago

<script type="text/javascript">
var datesArray=['7/1/2012','7/4/2012']
$(function(){
$('.datepicker').datepicker({
inline: true,
beforeShowDay: function (date) {
var theday = (date.getMonth()+1) +'/'+
date.getDate()+ '/' +
date.getFullYear();
return [true,$.inArray(theday, datesArray) >=0?"specialDate":''];
}
});
});
</script>
<style type="text/css">
.specialDate { background-color: #6F0 !important; }
</style>

JΛ̊KE

humblecat

Re: how to highlight multiple days in datepicker (in inline)?

8 years ago

Thanks, jakecigar.
It almost works as I expected, except the "background-color" only changes the border of the selected days. I tried "background" which did same thing. Any suggestion?
thanks again.

jakecigar

Re: how to highlight multiple days in datepicker (in inline)?

8 years ago

If you color the entire background you’ll lose some of the jQuery UI CSS consistency.

BUT, if you really want to do it,

.specialDate a { background-color: #6F0 !important; }

JΛ̊KE

humblecat

Re: how to highlight multiple days in datepicker (in inline)?

8 years ago

Adding "a" does not work.

jakecigar

Re: how to highlight multiple days in datepicker (in inline)?

8 years ago

I added the class using web inspector. and it worked. I added to the normal call, and it does not work. I searched for an event to wait for, I didn’t find any.

It may not be possible without modifying the jQuery UI CSS.

JΛ̊KE

kbwood.au

Re: how to highlight multiple days in datepicker (in inline)?

8 years ago

Try this instead:

.ui-datepicker .specialDate a { background: #6F0; }

jakecigar

Re: Re: how to highlight multiple days in datepicker (in inline)?

8 years ago

I got bitten by background vs. background-color again! After a nap, It came to me. I was just about to post when I saw your post!

JΛ̊KE

humblecat

Re: how to highlight multiple days in datepicker (in inline)?

8 years ago

kbwood.au's method works.

kbwood.au and jakecigar: Thank both of you for your kind replies.

humblecat

Re: how to highlight multiple days in datepicker (in inline)?

8 years ago

Do you know how to highlight the several different groups of dates in different colors in Keith-wood's datepick? (the jQuery UI's datepicker does not provide multiple select, so I switch to Keith-wood's)

kbwood.au

Re: how to highlight multiple days in datepicker (in inline)?

8 years ago

Use the onDate callback instead of beforeShowDay, and return an object with attributes selectable and dateClass instead of an array.

Bala Subr..

Re: how to highlight multiple days in datepicker (in inline)?

7 years ago

<script>
$(function() {

var datesArray=['7/1/2013','7/4/2013']
var datesArray1=['7/5/2013','7/8/2013']

$( "#datepicker" ).datepicker({
numberOfMonths: 3,
showButtonPanel: true,
selectMultiple:true,
beforeShowDay: function (date) {
var theday = (date.getMonth()+1) +'/'+
date.getDate()+ '/' +
date.getFullYear();
return [true,$.inArray(theday, datesArray) >=0?"specialDate":($.inArray(theday, datesArray1)>=0?"specialDate1":'')];
}
});
//$.inArray(theday, datesArray) >=0?"specialDate":'specialDate1'
});
</script>

<style type="text/css">
.ui-datepicker .specialDate a { background: #6F0; }
.ui-datepicker .specialDate1 a { background: #e81e46; }
</style>

Lorena Es..

Re: how to highlight multiple days in datepicker (in inline)?

5 years ago

Hi!, do you know to change the color a special day but assign the color on time?

I have a system where the user to custom the color, then the system have to search the color that have to assign to it special day.

I try with this code.

function marcaDias(date)

{

var eventDates = {};

eventDates[ new Date( '11/12/2015' )] = new Date( '11/12/2015' );

eventDates[ new Date( '11/10/2015' )] = new Date( '11/10/2015' );

eventDates[ new Date( '11/09/2015' )] = new Date( '11/09/2015' );

eventDates[ new Date( '11/02/2015' )] = new Date( '11/02/2015' );

eventDates[ new Date( '10/02/2015' )] = new Date( '10/02/2015' );

var highlight = eventDates[date];

if (highlight) {

return [true, 'specialDay']; //is a class css i need some like as.... return [date, "background","pink"];

} else {

return [true, '', ''];

}

kbwood.au

Re: how to highlight multiple days in datepicker (in inline)?

5 years ago

Please start your own thread with a new question.

Top Reply

Response title

Attachments

jQuery Forum

how to highlight multiple days in datepicker (in inline)?

Replies(13)

Re: how to highlight multiple days in datepicker (in inline)?

Re: how to highlight multiple days in datepicker (in inline)?

Re: how to highlight multiple days in datepicker (in inline)?

Re: how to highlight multiple days in datepicker (in inline)?

Re: how to highlight multiple days in datepicker (in inline)?

Re: how to highlight multiple days in datepicker (in inline)?

Re: Re: how to highlight multiple days in datepicker (in inline)?

Re: how to highlight multiple days in datepicker (in inline)?

Re: how to highlight multiple days in datepicker (in inline)?

Re: how to highlight multiple days in datepicker (in inline)?

Re: how to highlight multiple days in datepicker (in inline)?

Re: how to highlight multiple days in datepicker (in inline)?

Re: how to highlight multiple days in datepicker (in inline)?

Statistics

Tags

Actions