vue-ctk-date-time-picker
A vue component for select dates (range mode available) & time
Dark mode
Demo
Enjoy here
Installation
Yarn
yarn add vue-ctk-date-time-picker
NPM
npm i --save vue-ctk-date-time-picker
Usage
ES6 Modules / CommonJS
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);
<vue-ctk-date-time-picker></vue-ctk-date-time-picker>
UMD
<link rel="stylesheet" type="text/css" href="${YOUR_PATH}/vue-ctk-date-time-picker.css">
<vue-ctk-date-time-picker></vue-ctk-date-time-picker>
<script src="https://unpkg.com/vue" charset="utf-8"></script>
<script src="${YOUR_PATH}/vue-ctk-date-time-picker.umd.min.js" charset="utf-8"></script>
<script type="text/javascript">
Vue.component('vue-ctk-date-time-picker', window['vue-ctk-date-time-picker']);
</script>
Here is an example of UMD implementation: https://codepen.io/louismazel/pen/jQWNzQ
Props API
Props | Type | Required | Default |
---|
v-model | String | yes | - |
id | string | no | CtkDateTimePicker |
label | String | no | Select date & time |
disabled | Boolean | no | false |
hint (1) | text | no | - |
error (2) | Boolean | no | false |
color (3) | String (hex) | no | dodgerblue |
button-color (4) | String (hex) | no | #00C853 |
position | String | no | null |
locale (5) | String | no | Browser Locale |
persistent | Boolean | no | false |
minute-interval | Int | no | 1 |
formatted | String | no | 'llll' (momentjs format) |
format | String | no | - |
output-format | String | no | null |
time-zone (6) | String | no | Browser Time Zone |
only-time | Boolean | no | false |
only-date | Boolean | no | false |
no-header | Boolean | no | false |
overlay | Boolean | no | true |
min-date (7) | String | no | - |
max-date (7) | String | no | - |
no-weekends-days | Boolean | no | false |
auto-close | Boolean | no | false |
inline | Boolean | no | false |
overlay | Boolean | no | false |
range-mode | Boolean | no | false |
dark | Boolean | no | false |
no-shortcuts | Boolean | no | false |
no-button | Boolean | no | false |
disabled-dates (8) | Array | no | [] |
disabled-hours (9) | Array | no | - |
shortcuts-translations (10) | Object | no | - |
input-size | String (sm or lg) | no | null |
button-now-translation | String | no | 'Now' |
no-button-now | Boolean | no | false |
first-day-of-week | Int (0 to 7) | no | - |
(1) hint : Is a text that replaces the label/placeholder (Ex : Error designation)
(2) error : When is true
--> Input border & label are red
(3) color: Replace color for the hint, the borders & picker color
(4) button-color: Replace color for the buttons on bottom (validation & 'now')
(5) locale : Default value is the locale of the browser - Ex : Set locale="fr"
to force to French language
(6) 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
(7) min-date & max-date : Must be 'YYYY-MM-DD'
format
(8) Disabled-Dates is an Array of dates in 'YYYY-MM-DD' format (ex: ['2018-04-03', '2018-04-07', '2018-04-09']
)
(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']
(10) 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"
}
Upcoming features (Todo)
- Custom shortcuts on RangeDatePicker
- UI Improvements for TimePicker (Issue #35)
- Double Calendar on RangeDatePicker
- Inputs Text to choose values (Issue #30)
- Keyboard Accessibility
- Select Year directly on DatePicker
Contribution
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Lints and fixes files
npm run lint
Customize configuration
See Configuration Reference.