# vue-ctk-date-time-picker-test
> A vue component for select date & time (by Chronotruck)
Latest version **1.4.3** (published 2019-01-11) · MIT license · 0 weekly downloads
## Install
```sh
npm install vue-ctk-date-time-picker-test
pnpm add vue-ctk-date-time-picker-test
yarn add vue-ctk-date-time-picker-test
bun add vue-ctk-date-time-picker-test
```
## Health
**Score 35/100 (D)** — status: abandoned.
Positive: has types; no vulnerabilities; high quality score.
Warnings: low downloads; no esm support.
Negative: abandoned.
## Facts
| | |
|---|---|
| Version | 1.4.3 |
| Published | 2019-01-11 |
| First published | 2019-01-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >= 6.0.0 |
| Dependencies | 4 |
| Unpacked size | 7.4 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 874 |
| Author | Louis Mazel |
| Maintainers | iampaul83 |
| Keywords | vue, javascript, vue-component, input, date, time, range, picker, ctk, chronotruck, datepicker, timepicker |
## Links
- npm: https://www.npmjs.com/package/vue-ctk-date-time-picker-test
- Repository: https://github.com/chronotruck/vue-ctk-date-time-picker
- Homepage: https://github.com/chronotruck/vue-ctk-date-time-picker#readme
- Issues: https://github.com/chronotruck/vue-ctk-date-time-picker/issues
- npm.io page: https://npm.io/package/vue-ctk-date-time-picker-test
## Dependencies (4)
- [vue](https://npm.io/package/vue.md) ^2.5.16
- [moment](https://npm.io/package/moment.md) ^2.22.1
- [moment-range](https://npm.io/package/moment-range.md) ^4.0.1
- [moment-timezone](https://npm.io/package/moment-timezone.md) ^0.5.23
## Alternatives
- [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads
- [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads
- [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads
- [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads
- [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads
## Recent versions
- 1.4.3 (latest) — 2019-01-11
- 1.4.2 — 2019-01-07
## README
# vue-ctk-date-time-picker
> A vue component for select dates (range mode available) & time
#### Dark mode
## Demo
[Enjoy here](https://chronotruck.github.io/vue-ctk-date-time-picker/)
## Installation
Yarn
`yarn add vue-ctk-date-time-picker`
NPM
`npm i --save vue-ctk-date-time-picker`
## Usage
### ES6 Modules / CommonJS
```js
import VueCtkDateTimePicker from 'vue-ctk-date-time-picker';
import 'vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css';
Vue.component('vue-ctk-date-time-picker', VueCtkDateTimePicker);
```
```html
```
### UMD
```html
```
Here is an example of UMD implementation: https://codepen.io/louismazel/pen/jQWNzQ
## Props API
| Props | Type | Required | Default |
|------------|------------|----------|------------|
| v-model | String/Int | yes | - |
| label | String | no | Select date & time |
| hint (1) | text | no | - |
| error-hint (2) | Boolean | no | false |
| color (3) | String (hex) | no | dodgerblue |
| minute-interval | Int | no | 1 |
| formatted | string | no | 'llll' (momentjs format) |
| format | string | no | - |
| time-format | string | no | 'H:mm a' |
| locale (4) | string | no | Browser Locale |
| time-zone (5) | string | no | Browser Time Zone |
| disable-time | Boolean | no | false |
| disable-date | Boolean | no | false |
| without-header | Boolean | no | false |
| id | string | no | CtkDateTimePicker |
| overlay | Boolean | no | true |
| min-date (6) | string | no | - |
| max-date (6) | string | no | - |
| no-weekends-days | Boolean | no | false |
| auto-close | Boolean | no | false |
| inline | Boolean | no | false |
| overlay-background | Boolean | no | false |
| disabled-dates (7) | Boolean | no | [] |
| range-mode | Boolean | no | false |
| dark | Boolean | no | false |
| without-range-shortcut | Boolean | no | false |
| shortcuts-translation (8) | Object | no | - |
| disabled-hours (9) | Array (of String) | no | - |
(1) hint : Is a text that replaces the label/placeholder
(2) error-hint : When is `true` --> Input border & label are red
(3) color: Replace color for the hint, the borders & time selected in dropdown
(4) locale : Default value is the locale of the browser - Ex : Set `locale="fr"` to force to French language
(5) time-zone : Default value is the time-zone of the browser - Ex : Set `Europe/Paris` to force to French TZ. Do not forget to use a format like this `YYYY-MM-DDTHH:mm:ssZ` to get the TZ
(6) min-date & max-date : Must be `'YYYY-MM-DD'` format
(7) Disabled-Dates is an Array of dates in 'YYYY-MM-DD' format (ex: `['2018-04-03', '2018-04-07', '2018-04-09']`)
(8) shortcuts-translation : Must be an Object like that
```
{
"this_week": "This week",
"last_7_days": "Last 7 days",
"last_30_days": "Last 30 days",
"this_month": "This month",
"last_month": "Last month",
"this_year": "This year",
"last_year": "Last year"
}
```
(9) disabled-hours : Must be an Array of hours in 24h format ('00' to '23') : `['00','01','02','03','04','05','06','07','19','20','21','22','23']`
## Upcoming features (Todo)
- Custom shortcuts on RangeDatePicker
- UI Improvements for TimePicker (Issue #35)
- Custom elements for trigger the component
- Double Calendar on RangeDatePicker
- Inputs Text to choose values (Issue #30)
- Keyboard Accessibility
- Select Year directly on DatePicker
## Contribution
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run serve
```
## Build
To build just run: `npm run build:lib`
## Tests
Work in progress
## License
This project is licensed under [MIT License](http://en.wikipedia.org/wiki/MIT_License)
---
_Source: https://npm.io/package/vue-ctk-date-time-picker-test · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._