ember-timepicker

A simple Ember add-on that wraps the timepicker.co plugin

Usage no npm install needed!

<script type="module">
  import emberTimepicker from 'https://cdn.skypack.dev/ember-timepicker';
</script>

README

ember-timepicker

This is a simple Ember add-on that wraps the http://timepicker.co/ jQuery plugin.

This plugin isn't your typical time picker (which I think is a good thing!), so be sure to review the demos before installing.

Usage

Using this bad boy is simple:

// template.hbs
{{ember-timepicker
  onChange=(action 'onChange')
  options=yourOptions}}
// controller.js
import Ember from 'ember';

export default Ember.Controller.extend({
    options: {
      dropdown: false
    },

    actions: {
        onChange(selectedTime) {
            console.log(selectedTime);
        }
    }
});

There are two key ways to interact with this component:

Property Description
onChange An action that's passed the Date object returned from the time picker. Note: the returned object is a Javascript Date, so you'll need to extract the time yourself.
options An object containing options accepted by the time picker. See http://timepicker.co/options/ for available options.

This component extends Ember.TextField and therefore can accept any actions or options available on that component. See the API docs for more information.

Credits

Kudos to Willington Vega for writing the time picker plugin used in this project.