# mithril-timepicker

> Pick a time! But only if you're using mithril

Latest version **0.9.2** (published 2018-03-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install mithril-timepicker
pnpm add mithril-timepicker
yarn add mithril-timepicker
bun add mithril-timepicker
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.9.2 |
| Published | 2018-03-14 |
| First published | 2018-02-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 24.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Scott Simpson |
| Maintainers | creaturesinunitards |
| Keywords | timepicker, mithril, mithril-component |

## Links

- npm: https://www.npmjs.com/package/mithril-timepicker
- Repository: https://github.com/CreaturesInUnitards/mithril-timepicker
- Homepage: https://github.com/CreaturesInUnitards/mithril-timepicker#readme
- Issues: https://github.com/CreaturesInUnitards/mithril-timepicker/issues
- npm.io page: https://npm.io/package/mithril-timepicker

## Dependencies (2)

- [mithril](https://npm.io/package/mithril.md) ^1.1.6
- [css-loader](https://npm.io/package/css-loader.md) ^0.28.10

## Recent versions

- 0.9.2 (latest) — 2018-03-14
- 0.9.1 — 2018-03-12
- 0.9.0 — 2018-03-12
- 0.8.2 — 2018-02-26
- 0.8.1 — 2018-02-26
- 0.8.0 — 2018-02-26

## README

# mithril-timepicker

Pick a time! But only if you're using Mithril, and only for flexbox-capable browsers.

### Demo

[mithril-timepicker at flems.io](https://tinyurl.com/y74cyanu)

### Installation

via npm:

```
$> npm install mithril-timepicker
```

You'll want to bring in either src/style.sass or src/style.css, depending on your workflow.

### Usage

```
const TimePicker = require('mithril-timepicker')

// make a reference to an object with {h, m}
const myTime = { 
    h: mySpecialDate.getHours(), 
    m: mySpecialDate.getMinutes() 
}

m(TimePicker, {
    time: myTime, // time passed in MUST be a reference, not a literal
    onchange: ({h, m}) => {
        mySpecialDate.setHours(h, m, 0, 0)
    })     
})

// if you want to wipe the slate clean
TimePicker.reset(myTime)

```

### API

`attrs` to pass to the component instance:

| ATTRIBUTE    | TYPE             | Required? | DESCRIPTION              |
| :--          | :--              | :--       | :--                      |
| `time`       | Object reference | YES       | {h, m} e.g. `{ h: 23, m: 59 }`. Hour is always 0-23 |
| `tfh`        | Boolean          | no        | 24-hour time, defaults to false |
| `increment`  | Int              | no        | 5- or 15- minute options per hour, defaults to 5 |
| `onchange`   | Function         | no        | Handler. Receives { h, m } as its argument|



### Theming

You can change the appearance easily by editing either style.css or style.sass, whichever fits your workflow. If you're using SASS, you can make a few quick UI changes based on variables at the top of the document.

---
_Source: https://npm.io/package/mithril-timepicker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._