Datepicker allowing function for disable


#1

I need to be able to have a datepicker with only one day of each month selectable. It seems to do so I need to use a function returning a value informing if the date is valid or not. Jquery UI and flatpickr work like that.

Unfortunately, Jquery and Flatpickr Implementation in Ember both do not support a fucntion for disabling, and Jquery is actively discouraged.

Is there any datepicker allowing disabling though a function in Ember ?


#2

and Jquery is actively discouraged.

I would say instead that we want the choice to use jQuery to be up to each app author, rather than making it required for everyone. You should absolutely feel free to use jQuery.

I assume you’re looking at https://github.com/shipshapecode/ember-flatpickr

It seems to support the disable option you need. I didn’t test this, but the docs for flatpickr imply something like this should work:

// your-component.js
export default Component.extend({
  init() {
    this._super();
    this.set('disabledDates', [date => this.dateIsAllowed(date)])
  },
  dateIsAllowed(date) {
    // implement your custom logic here
  }
})
{{! your-component.hbs }}
{{ember-flatpickr disable=disabledDates}}

#3

What do you mean by “selectable”? It should be easy to not trigger a custom function if user selects a not-valid date with ember-power-datepicker.


#4

Sorry to reply so late. I ended up making a computed Property (with help) returning the array with the function defined with a => allowing me to do a this.get(‘value’) inside it :

dateDisabled: Ember.computed('sub_date',function(){
  return [
    date =>{
    ...
    this.get('sub_date')
    ...
     }]
)

#5

I needed to have the date disableb when the calendar is displayed.