mengxiong10 / Vue2 Datepicker
Licence: mit
A datepicker / datetimepicker component for Vue2
Stars: ✭ 1,154
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue2 Datepicker
Vue Datetime
Mobile friendly datetime picker for Vue. Supports date and datetime modes, i18n and more.
Stars: ✭ 928 (-19.58%)
Mutual labels: datepicker, datetimepicker
skwas-cordova-plugin-datetimepicker
Cordova Plugin for showing a native date, time or datetime picker.
Stars: ✭ 37 (-96.79%)
Mutual labels: datepicker, datetimepicker
s-date-range-picker
📅 A date range picker built with Svelte
Stars: ✭ 13 (-98.87%)
Mutual labels: datepicker, datetimepicker
Tempus Dominus
A powerful Date/time picker widget.
Stars: ✭ 6,900 (+497.92%)
Mutual labels: datepicker, datetimepicker
Datetimepicker
This is a custom android holo datepicker timepicker
Stars: ✭ 56 (-95.15%)
Mutual labels: datepicker, datetimepicker
yii2-datetime-widgets
Datetime widgets for Yii2
Stars: ✭ 22 (-98.09%)
Mutual labels: datepicker, datetimepicker
svelty-picker
Simple date & time picker in svelte
Stars: ✭ 38 (-96.71%)
Mutual labels: datepicker, datetimepicker
Adm Datetimepicker
Pure AngularJs dateTimePicker
Stars: ✭ 244 (-78.86%)
Mutual labels: datepicker, datetimepicker
Pickerjs
⚠️ [Deprecated] No longer maintained. JavaScript date time picker.
Stars: ✭ 299 (-74.09%)
Mutual labels: datepicker, datetimepicker
vue-datetime-picker
vue-datetime-picker / vue时间日期选择器
Stars: ✭ 16 (-98.61%)
Mutual labels: datepicker, datetimepicker
vue3-date-time-picker
Datepicker component for Vue 3
Stars: ✭ 157 (-86.4%)
Mutual labels: datepicker, datetimepicker
Datetimepicker
⭐️🎉一个简约、漂亮的日期时间选择器,支持全方位自定义UI
Stars: ✭ 378 (-67.24%)
Mutual labels: datepicker, datetimepicker
NodaTimePicker
A Date/Time picker component library for Blazor using NodaTime
Stars: ✭ 49 (-95.75%)
Mutual labels: datepicker, datetimepicker
Intl Date Time
International DateTime for Laravel Nova
Stars: ✭ 50 (-95.67%)
Mutual labels: datepicker, datetimepicker
nativescript-datetimepicker
Plugin with date and time picking fields
Stars: ✭ 26 (-97.75%)
Mutual labels: datepicker, datetimepicker
popoPicker
popoPicker是一个移动端3D滚轮日期时间和单项的选择器,支持无限循环滚动,不依赖第三方库
Stars: ✭ 26 (-97.75%)
Mutual labels: datepicker, datetimepicker
Material Ui Pickers
Date & Time pickers, built with ❤️ for @material-ui/core
Stars: ✭ 2,291 (+98.53%)
Mutual labels: datepicker, datetimepicker
Heyui
🎉UI Toolkit for Web, Vue2.0 http://www.heyui.top
Stars: ✭ 2,373 (+105.63%)
Mutual labels: datepicker, datetimepicker
angular-eonasdan-datetimepicker
A wrapper directive around the Eonasdan Datepicker v4 component.
Stars: ✭ 63 (-94.54%)
Mutual labels: datepicker, datetimepicker
Datetimepicker
jQuery Plugin Date and Time Picker
Stars: ✭ 3,402 (+194.8%)
Mutual labels: datepicker, datetimepicker
vue2-datepicker
A Datepicker Component For Vue2
Demo
https://mengxiong10.github.io/vue2-datepicker/index.html
Install
$ npm install vue2-datepicker --save
Usage
<script>
import DatePicker from 'vue2-datepicker';
import 'vue2-datepicker/index.css';
export default {
components: { DatePicker },
data() {
return {
time1: null,
time2: null,
time3: null,
};
},
};
</script>
<template>
<div>
<date-picker v-model="time1" valueType="format"></date-picker>
<date-picker v-model="time2" type="datetime"></date-picker>
<date-picker v-model="time3" range></date-picker>
</div>
</template>
Theme
If your project uses SCSS, you can change the default style variables.
To create a scss file. e.g. datepicker.scss
:
$namespace: 'xmx'; // change the 'mx' to 'xmx'. then <date-picker prefix-class="xmx" />
$default-color: #555;
$primary-color: #1284e7;
@import '~vue2-datepicker/scss/index.scss';
Internationalization
The default language of v3.x is English. If you need other locales, you can import a locale file. Once you import a locale, it becomes the active locale.
import DatePicker from 'vue2-datepicker';
import 'vue2-datepicker/index.css';
import 'vue2-datepicker/locale/zh-cn';
You can also override some of the default locale by lang
.
Full config
<script>
export default {
data() {
return {
lang: {
formatLocale: {
firstDayOfWeek: 1,
},
monthBeforeYear: false,
},
};
},
};
</script>
<template>
<date-picker :lang="lang"></date-picker>
</template>
Props
Prop | Description | Type | Default |
---|---|---|---|
type | select the type of picker | date |datetime|year|month|time|week | 'date' |
range | if true, pick the range date | boolean |
false |
format | to set the date format. similar to moment.js | token | 'YYYY-MM-DD' |
formatter | use your own formatter, such as moment.js | object | - |
value-type | data type of the binding value | value-type | 'date' |
default-value | default date of the calendar | Date |
new Date() |
lang | override the default locale | object |
|
placeholder | input placeholder text | string |
'' |
editable | whether the input is editable | boolean |
true |
clearable | if false, don't show the clear icon | boolean |
true |
confirm | if true, need click the button to change value | boolean |
false |
confirm-text | the text of confirm button | string |
'OK' |
multiple | if true, multi-select date | boolean |
false |
disabled | disable the component | boolean |
false |
disabled-date | specify the date that cannot be selected | (date) => boolean |
- |
disabled-time | specify the time that cannot be selected | (date) => boolean |
- |
append-to-body | append the popup to body | boolean |
true |
inline | without input | boolean |
false |
input-class | input classname | string |
'mx-input' |
input-attr | input attrs(eg: { name: 'date', id: 'foo'}) | object |
— |
open | open state of picker | boolean |
- |
default-panel | default panel of the picker | year|month | - |
popup-style | popup style | object |
— |
popup-class | popup classes | — | |
shortcuts | set shortcuts to select | Array<{text, onClick}> |
- |
title-format | format of the tooltip in calendar cell | token | 'YYYY-MM-DD' |
partial-update | whether update date when select year or month | boolean |
false |
range-separator | text of range separator | string |
' ~ ' |
show-week-number | determine whether show week number | boolean |
false |
hour-step | interval between hours in time picker | 1 - 60 | 1 |
minute-step | interval between minutes in time picker | 1 - 60 | 1 |
second-step | interval between seconds in time picker | 1 - 60 | 1 |
hour-options | custom hour column | Array<number> |
- |
minute-options | custom minute column | Array<number> |
- |
second-options | custom second column | Array<number> |
- |
show-hour | whether show hour column | boolean |
base on format |
show-minute | whether show minute column | boolean |
base on format |
show-second | whether show second column | boolean |
base on format |
use12h | whether show ampm column | boolean |
base on format |
show-time-header | whether show header of time picker | boolean |
false |
time-title-format | format of the time header | token | 'YYYY-MM-DD' |
time-picker-options | set fixed time list to select | time-picker-options | null |
prefix-class | set prefix class | string |
'mx' |
scroll-duration | set the duration of scroll when hour is selected | number |
100 |
Token
Uint | Token | output |
---|---|---|
Year | YY | 70 71 ... 10 11 |
YYYY | 1970 1971 ... 2010 2011 | |
Y | -1000 ...20 ... 1970 ... 9999 +10000 | |
Month | M | 1 2 ... 11 12 |
MM | 01 02 ... 11 12 | |
MMM | Jan Feb ... Nov Dec | |
MMMM | January February ... November December | |
Day of Month | D | 1 2 ... 30 31 |
DD | 01 02 ... 30 31 | |
Day of Week | d | 0 1 ... 5 6 |
dd | Su Mo ... Fr Sa | |
ddd | Sun Mon ... Fri Sat | |
dddd | Sunday Monday ... Friday Saturday | |
AM/PM | A | AM PM |
a | am pm | |
Hour | H | 0 1 ... 22 23 |
HH | 00 01 ... 22 23 | |
h | 1 2 ... 12 | |
hh | 01 02 ... 12 | |
Minute | m | 0 1 ... 58 59 |
mm | 00 01 ... 58 59 | |
Second | s | 0 1 ... 58 59 |
ss | 00 01 ... 58 59 | |
Fractional Second | S | 0 1 ... 8 9 |
SS | 00 01 ... 98 99 | |
SSS | 000 001 ... 998 999 | |
Time Zone | Z | -07:00 -06:00 ... +06:00 +07:00 |
ZZ | -0700 -0600 ... +0600 +0700 | |
Week of Year | w | 1 2 ... 52 53 |
ww | 01 02 ... 52 53 | |
Unix Timestamp | X | 1360013296 |
Unix Millisecond Timestamp | x | 1360013296123 |
formatter
The formatter
accepts an object to customize formatting.
<date-picker :formatter="momentFormat" />
data() {
return {
// Use moment.js instead of the default
momentFormat: {
//[optional] Date to String
stringify: (date) => {
return date ? moment(date).format('LL') : ''
},
//[optional] String to Date
parse: (value) => {
return value ? moment(value, 'LL').toDate() : null
},
//[optional] getWeekNumber
getWeek: (date) => {
return // a number
}
}
}
}
value-type
set the format of binding value
Value | Description |
---|---|
'date' | return a Date object |
'timestamp' | return a timestamp number |
'format' | returns a string formatted using pattern of format
|
token(MM/DD/YYYY) | returns a string formatted using this pattern |
shortcuts
The shortcuts for the range picker
[
{ text: 'today', onClick: () => new Date() },
{
text: 'Yesterday',
onClick: () => {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
return date;
},
},
];
Attribute | Description |
---|---|
text | title of the shortcut |
onClick | callback function , need to return a Date |
time-picker-options
Set fixed time list to select;
{start: '00:00', step:'00:30' , end: '23:30', format: 'HH:mm' }
Attribute | Description |
---|---|
start | start time |
step | step time |
end | end time |
format | the default is same as prop format
|
Events
Name | Description | Callback Arguments |
---|---|---|
input | When the value change(v-model event) | date |
change | When the value change(same as input) | date, type('date'|'hour'|'minute'|'second'|'ampm |
open | When panel opening | event |
close | When panel closing | |
confirm | When click 'confirm' button | date |
clear | When click 'clear' button | |
input-error | When user type a invalid Date | the input text |
focus | When input focus | |
blur | When input blur | |
pick | when select date #429 | date |
calendar-change | when change the calendar | date, oldDate, type('year'|'month'|'last-year'|'next-year'|'last-month'|'next-month'|'last-decade'|'next-decade') |
panel-change | when the calendar panel changes | type('year'|'month'|'date'), oldType |
Slots
Name | Description |
---|---|
icon-calendar | custom the calender icon |
icon-clear | custom the clear icon |
input | replace input |
header | popup header |
footer | popup footer |
sidebar | popup sidebar |
ChangeLog
One-time Donations
If you find this project useful, you can buy me a coffee
License
Copyright (c) 2017-present xiemengxiong
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].