Skip to content

andregoncalves/stencil-timepicker

Repository files navigation

Built With Stencil

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 git@github.com: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>

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published