Date can still be changed in readonly mode

[ahmetemrekilinc]

If readonly is set true, the input text cannot be changed, however onclick date can still be changed.

[duizendnegen]

This is as designed - it merely passes on the attribute. I'd be welcoming a PR for docs clarification and/or for a bound 'disabled' attribute - ideally named so that it doesn't conflict with existing HTML attributes.

On Fri, 17 Feb 2017, 16:05 Ahmet Emre Kılınç, [email protected] wrote:

If readonly is set true, the input text cannot be changed, however onclick date can still be changed.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/edgycircle/ember-pikaday/issues/133, or mute the thread https://github.com/notifications/unsubscribe-auth/AAoow-RHAU9oJ5YCqek9l7R7jizUj8u-ks5rdbdGgaJpZM4MEXwo .

[fkm]

Is that design choice documented somewhere? I couldn't find it in the Pikaday readme.

Having a datepicker on a read-only field (especially as it can still change the displayed input value) doesn't make any sense to me. Please enlighten me.

[cincodenada]

ember-pikaday could work around this, but this is really an upstream issue, and there's an issue open that could always use some more thumbs-up (or PRs!): https://github.com/Pikaday/Pikaday/issues/662

There's also a workaround in that thread, which I've adapted to ember-pikaday for my needs. I'm already extending the component, but if you don't want to extend, I haven't tested this, but you may be able to accomplish this with reopenClass()

import PikadayInput from 'ember-pikaday/components/pikaday-input'
import { computed } from '@ember/object'

export default PikadayInput.extend({
  // Prevent opening the date box in readonly mode, adapted from workaround on
  // https://github.com/Pikaday/Pikaday/issues/662
  onOpen: computed(function () {
    // This is a computed because we need `this`, and simply setting this
    // property to a function (arrow or not) doesn't get us that
    return () => {
      if (this.element.readOnly) { return this.get('pikaday').hide() }
    }
  })
})

[fkm]

Thank you for your response!

I've stopped working with Ember but I'm sure this will help someone.