Monday, 2 April 2012

restrict dates in datepicker with html data attribute

In this fiddle you can see how easy it is to configure a datepicker using the data attribute. Here's the code anyway:
class DateDisabler

  constructor: (@only) ->

  beforeShowDay: (date) =>
    if @only == date.getDate()
      [true, 'available', 'This date is a good date']
    else
      [false, 'unavailable', 'This date is NOT good']


jQuery ->
  $('.datepicker').each (i, e) ->
    dates = $(e).data('only')
    disabler = new DateDisabler dates
    $(e).datepicker({beforeShowDay: disabler.beforeShowDay})
and the haml that calls it:
.datepicker{data: {only: 5}}
Please note the fat arrow in the beforeShowDay, I'll have a look at it soon. Of corse you want it to make it accept an array but that's quite easy and I'm going into it right now. For more complex solutions I recommend gazay/gon, which I know thanks to this railscast

No comments:

Post a Comment