https://github.com/andregoncalves/stencil-timepicker
st-timepicker is a web component built with Stencil to add a simple time picker with a select/dropdown list.
https://github.com/andregoncalves/stencil-timepicker
jsx stencil time-picker webcomponents
Last synced: 4 months ago
JSON representation
st-timepicker is a web component built with Stencil to add a simple time picker with a select/dropdown list.
- Host: GitHub
- URL: https://github.com/andregoncalves/stencil-timepicker
- Owner: andregoncalves
- License: mit
- Created: 2018-02-22T15:42:13.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-06-21T14:03:37.000Z (about 7 years ago)
- Last Synced: 2025-03-09T12:17:43.468Z (4 months ago)
- Topics: jsx, stencil, time-picker, webcomponents
- Language: TypeScript
- Homepage:
- Size: 79.1 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# st-timepicker
st-timepicker is a web component built with [Stencil](https://stenciljs.com/) to add a simple time picker with a select/dropdown list.
## Demo
## Getting Started
To try this component:
```bash
git clone [email protected]:andregoncalves/stencil-timepicker.git
cd stencil-timepicker
git remote rm origin
```
and run:
```bash
npm install
npm start
```
## Using this component
### Script tag
- Put `` 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 `` 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
```html
<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>
```