st-timepicker

st-timepicker is a web component built with Stencil to add a simple time picker with a select/dropdown list.

Demo

Getting Started

To try this component:

git clone [email protected]:andregoncalves/stencil-timepicker.git
cd stencil-timepicker
git remote rm origin

and run:

npm install
npm start

Using this component

Script tag

• Put <script src='https://unpkg.com/stencil-timepicker@latest/dist/timepicker.js'></script> in the head of your index.html
• Then you can use the component

Node Modules

• Run npm install stencil-timepicker --save
• Put a script tag similar to this <script src='node_modules/stencil-timepicker/dist/timepicker.js></script> in the head of your index.html
• Then you can use the element <st-timepicker> anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install stencil-timepicker --save
• Add this import to your root component or root module: import 'stencil-timepicker';
• Then you can use the element <st-timepicker> anywhere in your template, JSX, html etc

Parameters

Attribute | Default | Description ------------ | ------------- | ------------- selected | '' | The selected time step | 15 | The step minute interval clock24 | false | Choose between 24 or 12 hour clock label | 'Pick a time' | Label to display when nothing is selected

Methods

Events

Example usage

<st-timepicker name="picker1" selected="05:00 AM" class="my-class" label="Choose time"></st-timepicker>
<st-timepicker name="picker2" selected="16:05" step="5" clock24></st-timepicker>