vue-datepicker-next

中文版

A Datepicker Component For Vue3

Demo

https://mengxiong10.github.io/vue-datepicker-next/index.html

Install

1$ npm install vue-datepicker-next --save

Usage

1<script>
2  import DatePicker from 'vue-datepicker-next';
3  import 'vue-datepicker-next/index.css';
4
5  export default {
6    components: { DatePicker },
7    data() {
8      return {
9        time0: null
10        time1: null,
11        time2: null,
12        time3: null,
13      };
14    },
15  };
16</script>
17
18<template>
19  <div>
20    <date-picker v-model:value="time0"></date-picker>
21    <date-picker v-model:value="time1" type="datetime"></date-picker>
22    <date-picker v-model:value="time2" valueType="format"></date-picker>
23    <date-picker v-model:value="time3" range></date-picker>
24  </div>
25</template>

Theme

If your project uses SCSS, you can change the default style variables.

To create a scss file. e.g. datepicker.scss:

1$namespace: 'xmx'; // change the 'mx' to 'xmx'. then <date-picker prefix-class="xmx" />
2
3$default-color: #555;
4$primary-color: #1284e7;
5
6@import '~vue-datepicker-next/scss/index.scss';

Internationalization

The default language is English. If you need other locales, you can import a locale file. Once you import a locale, it becomes the active locale.

1import DatePicker from 'vue-datepicker-next';
2import 'vue-datepicker-next/index.css';
3
4import 'vue-datepicker-next/locale/zh-cn';

You can also override some of the default locale by lang. Full config

1<script>
2  export default {
3    data() {
4      return {
5        langObject: {
6          formatLocale: {
7            firstDayOfWeek: 1,
8          },
9          monthBeforeYear: false,
10        },
11        langString: 'zh-cn',
12      };
13    },
14  };
15</script>
16
17<template>
18  <date-picker :lang="langObject"></date-picker>
19  <date-picker :lang="langString"></date-picker>
20</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	string	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: Date, currentValue?: Date[]) => boolean	-
disabled-time	specify the time that cannot be selected	(date: Date) => boolean	-
append-to-body	append the popup to body	boolean	true
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
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

remove inline range-separator => separator; input => update:value

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.

1<date-picker :formatter="momentFormat" />

1data() {
2  return {
3    // Use moment.js instead of the default
4    momentFormat: {
5      //[optional] Date to String
6      stringify: (date) => {
7        return date ? moment(date).format('LL') : ''
8      },
9      //[optional]  String to Date
10      parse: (value) => {
11        return value ? moment(value, 'LL').toDate() : null
12      },
13      //[optional] getWeekNumber
14      getWeek: (date) => {
15        return // a number
16      }
17    }
18  }
19}
20

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

1[
2  { text: 'today', onClick: () => new Date() },
3  {
4    text: 'Yesterday',
5    onClick: () => {
6      const date = new Date();
7      date.setTime(date.getTime() - 3600 * 1000 * 24);
8      return date;
9    },
10  },
11];

Attribute	Description
text	title of the shortcut
onClick	callback function , need to return a Date

time-picker-options

Set fixed time list to select;

1{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
update:value	When the value change(v-model:value 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
pick	when select date #429	date
calendar-change	when change the calendar	date
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

CHANGELOG

One-time Donations

If you find this project useful, you can buy me a coffee

Paypal Me

License

MIT

Copyright (c) 2021-present xiemengxiong