Search jQuery

jQuery Forum

Using jQuery UI

humblecat

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

in Using jQuery UI • 10 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)?

10 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)?

10 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)?

10 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)?

10 years ago

Adding "a" does not work.

jakecigar

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

10 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)?

10 years ago

Try this instead:

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

jakecigar

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

10 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)?

10 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)?

10 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)?

10 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)?

9 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)?

6 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)?

6 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