CODEWITHSUNDEEP
jqueryjquery-ui
poldixd
poldixd

Reputation: 1202

Select one day and give the next N days a css class

Is it possible to select one day in the jqueryUI datepicker and than the datepicker gives the next N days a css class like 'marked-time-period'?

For example: A date goes over 3 days, and you can set a start date on the datepicker. When you clicked on the 4th november, the 5th,6th,7th get the css class 'marked-time-period'.

greetings

Upvotes: 0

Views: 156

Answers (3)

poldixd
poldixd

Reputation: 1202

ok, here is my solution:

http://jsfiddle.net/tungon/buyrZ/

the var datesFromDatabase are generated in PHP.

var datesFromDatabase = { '16.11.2012': ['17.11.2012', '18.11.2012', '19.11.2012'], '17.11.2012': ['18.11.2012', '19.11.2012', '20.11.2012'] };

Upvotes: 1

salih0vicX
salih0vicX

Reputation: 1373

I believe you need something like this http://jsfiddle.net/william/YQ2Zw/2/. Source: http://stackoverflow.com/questions/7187796/highlight-tr-entire-week-datepicker

Upvotes: 1

Mike Edwards
Mike Edwards

Reputation: 21

The easiest "out of the box" way to work with this might be using the minDate and maxDate datepicker options, where maxDate gets advanced 3 days ahead of the selected date in your code.

http://jqueryui.com/datepicker/#date-range

Then you could try to style the available range the way you want, where the class "ui-datepicker-unselectable" are the days you don't want.

Upvotes: 1

Related Questions