smalot / bootstrap-datetimepicker

Both Date and Time picker widget based on twitter bootstrap (supports Bootstrap v2 and v3)
http://www.malot.fr/bootstrap-datetimepicker/
Apache License 2.0
3.49k stars 1.65k forks source link

New feature to disable specific dates #40

Open sandeepcisin241 opened 11 years ago

sandeepcisin241 commented 11 years ago

Should provide a feature of disabling specific dates like a public holidays, etc

agn507 commented 11 years ago

Planned on asking the same thing.

http://stackoverflow.com/questions/2029626/jquery-datepicker-disable-weekends-holidays-and-the-next-three-working-days

This example is handled through the beforeShowDay event provided by the jquery ui datepicker plugin. This seems to be a simple enough solution that gives full control over the dates. Would it be possible to add a similar event that can be called before adding the active/disabled classes to the dates? We could pass a function name to the beforeShowDay that would get the currently selected date object and it would be up to us to return if it should be disabled or not.

There would need to be a similar event for each of the selectable parts (year, month, day, hour, min). Could just have a general beforeShowPart event that passes the part identifier and a date/time being checked for display.

The developer of the jquery timepicker that expands on the datepicker referenced above brought up the problem in a recent blog post and how it applies to selecting times.
http://trentrichardson.com/2013/02/03/jquery-timepicker-1-2-works-with-jqueryui-1-10/

One quick solution would be to adjust the changeMin, changeHour, changeDay, changeMonth, changeYear to beforeChange and afterChange events. This could simply pass the part (0-6 for min-decade) and the selected date. From this point we could use some js to manually add the disable class on the elements needed. I tried doing this with the existing change events referenced above but these fire before the html is built so any css added would just be replaced by the newly filled html. This would give people who need it the ability to get in and disable elements and i'm sure help with other use cases.

agn507 commented 11 years ago

To expand on this with a use case. Our app is handling restaurant hours and needs to handle menu item availability based on a date time selection. Because restaurants can have different hours and dates disabled on different weeks the curent solution to provide only days of week doesn't really help. Same could be said for any type of scheduling app.

We also need full control over the hours/minute selection where we may have multiple blocks of available times. Say from 12am-3am (rollover from hours open on the previous day) 9am-2pm and 3pm-12m. Middle gap isn't likely for a restaurant but could see that for a scheduling system.

It would be help to add some extra attributes for targeting these elements for when attempting to disable assuming the solution in the above comment could be added.

I've tried several datetime pickers but for my use case nothing really fit well. Your solution with breaking the part selection into new screens works perfectly. It provides a logical progression down through the more granular information providing minimal information. The simple buttons works great on mobile/touch devices as well. Just wanted to say thanks for all the work!

smalot commented 11 years ago

Very good suggestion and very open implementation. I like it ! I'll study it

sam2332 commented 10 years ago

any news about this feature? is there a way to disable times on specific days so there are no double bookings

colin-ch commented 9 years ago

Any news on this?

crabeler commented 8 years ago

Has a feature for disabling specific dates like a public holidays, etc. been implemented yet?