mengxiong10/vue2-datepicker

A datepicker / datetimepicker component for Vue2

vue2-datepicker

中文版

A Datepicker Component For Vue2

For Vue 3.0, you can use vue-datepicker-next from the same author

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: 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
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

CHANGELOG

One-time Donations

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

Paypal Me

License

MIT

Copyright (c) 2017-present xiemengxiong

vue2-datepicker's Issues

mx-datepicker width is not changeable

I am trying to change the width of the datepicker to 100% as per requirement of our web page, but seems like width is set to by default to 210 px for date picker. And hence i am unable to change the width.

Can i expect any help from this? I wanted to manipulate the width for mx-datepicker class of div tag from index.vue of this package, but no luck.

Please advice.

How to customize input style?

I put inside a Boostrap toolbar, like this:

<template>
    <div class="filter-bar pull-left">
        <div class="form-inline">
            <div class="form-group">
                ...
                <div class="input-group">
                    <label class="input-group-addon">交易时间:</label>
                    <date-picker :class="'form-control'" v-model="filterDateRange"
                        range width="220" @keyup.enter="doFilter"
                        placeholder="开始日期 ~ 结束日期"
                    ></date-picker>
                </div>
                ...
            </div>
        </div>
    </div>
</template>
...

But it looks like this:

This is because inside vue2-datepicker, css class input is used, and there is no way to change it.

<template>
  <div class="datepicker"
       :style="{'width': width + 'px','min-width':range ? '210px' : '140px'}"
       v-clickoutside="closePopup">
    <input readonly
          class="input"
...

Is it possible to customize the style?

Thanks!
Zhu Ming

Is there any way to set the first day of week?

By default the first day it's "Sunday", but Is there any way to set the first day of week to "Monday"?

notAfter 怎么不行

not-before, not-after 添加对时间的支持？

现在已经有了对时、分秒的选择功能。
我在开发过程中遇到这种场景，就是要做一个精确到分钟的数据查询，最晚可选择的时间应该是当前时间，这样需要精确到对小时、分钟的限制。而目前not-after似乎还不支持到这种程度。

Custom format function

Sometimes you need more control when formatting the Dates.

<date-picker v-model="time" :format="customFormatter"></date-picker>

methods: {
  customFormatter(date) {
    return moment(date).format('MMMM Do YYYY, h:mm:ss a');
  }
}

This functionality will be supported somehow? are PRs welcome?

能否支持时间（时分秒）的选择？

如果能够支持时间的选择，那就更完美了！！

Show only enabled year(s) and month(s)

I am enabling only current month dates by passing :not-before and :not-after. But I could able to traverse through disabled months and years. Is it possible to show only one or two month dates?

Doesn't support the disabled attribute

To make the UI consistent, I want to use the same component to display disabled dates as well.
But, if I use this component, the date always becomes editable.

I tried putting a 'disabled' attribute on the component, but it still allows the date to be cleared or changed.

build fail

test

English format

Doesn't show English format, is there a fix for this

Change "calendar" icon

Would be nice if we could customize the icon displayed in with the text-input.
I personally do not like the current one.

Just a "nice to have" idea.

Error: Couldn't find preset "latest"

Thanks for creating the component!

I am using it with Vue.js 2 and got the following error:

...
 error  in ./~/vue2-datepicker/src/datepicker/index.vue

Module build failed: Error: Couldn't find preset "latest" relative to directory ".../node_modules/vue2-datepicker"
...

Bug reproduction can be found here. I am using Node v6.10.1, and npm 4.2.0.

Format Datetime after confirm on the calendar

This code reads beginDateTimeValue as v-model and saves date data when I click confirm.
But I'd like to format it to ISOString with specific timezone. What can I do?

<datepicker 
v-model="DateTimeValue"
type="datetime"
format="yyyy-MM-dd HH:mm:ss"
:time-picker-options="{start: '00:00', step: '00:30', end:'23:30'}" 
lang="en"
confirm>
</datepicker>

Setting a Min/Max time for datetime picker

Hello, I am using your datetime picker component to allow users to choose the date and time for an event that should not be scheduled earlier than 1pm. With the current date time picker there doesn't seem to be an option to set a min / max time.

This is my current implementation:

For the example above, we'd like to hide all hours prior to 1pm from the time picker step. Second, we'd like to have the option to display non-military time with am/pm in the time step (1pm instead of 13). I appreciate any suggestions on how to accomplish this.

Thanks in advance!

detecting events?

The component does not appear to respond to @click or @change, I need to trigger a method call on either of these events on the datepicker but it does not seem to work?

<date-picker v-model="input.action_by_date" format="MM-dd-yyyy" lang="en" name="action_by_date" @click="input.errors.clear($event.target.name)"> </date-picker>

Date and Time Picker won't show the time

In version 1.9.1 when you have a date and time datepicker, the time never shows once you selected the date. Even in your example here - https://mengxiong10.github.io/vue2-datepicker/ - in the middle section where you give examples of the date time functionality, it does not work.

Or am I missing something?

issue with shortcuts event fire

I have a method call on @input event. but while clicking the shortcuts, it throws same input event twice thats why my method get called twice. but i want to call my method only one time on shortcut click.

Functional components without render functions

Hi guys,

Recently we've updated vue to 2.5.9

Now when we compile we're getting

Any suggestions as to how to fix this?

Thanks

可支持range选择的时候,能否支持只选年和只选月的

有没有比较方便的属性可以设置的

selection date not changed in calendar.

Hi, i have used shortcuts props as this month but. first i click date range manually in the calendar, it seems the date range are selected. but if again i click on my shortcuts it only updates the payload value in event. but highlighted dates and text value of input field not changed. am i missing something here?

in this image i have clicked on this month shortcut. but it doesn't update the text 2017-08-01 ~ 2017-09-19 and also doesn't update selected date range highlighted.

My requirement
if i click on my shorcuts, it should change the text to my shortcuts start and end date and also update the highlighted date range. is it possible or not?

Vue warn: Method "confirm" has already been defined as a prop

I'm running vue 2.5.2 with the latest datepicker.

[Vue warn]: Method "confirm" has already been defined as a prop.

found in
---> <DatePicker>
       <Modal>
         <FloodgateModal>
           <MainComponent>
             <Anonymous>
               <Root>

年份发生变化的时候没有触发值的变化

当修改年份的时候，值并没有发生变化，必须继续选择完月份和日期之后才会变化，能否支持直接变化

Is there any way to add date manually in the datepicker's textbox

Is there any way to add date manually in the datepicker's textbox need it very urgently :(

v-model timezone after select date

When selecting a date, if the v-model is specified, the current time zone is not taken

Ability to set or override locales

A simple feature request where the user can set a custom locale or override an existing one (for example if different translations are desired).
Would you be open to a PR about this?

Sidenote: do you accept PRs to populate the current locale pool? I'd be willing to add some:

• Lithuanian
• Latvian
• Swedish
• Finnish
• Dutch
• Estonian
  (the company I work for operates in those countries so the translations would be legitimate and from native speakers)

:not-before is not working as expected

This relates to issue no. 27. This doesn't work when you just select the date and click ok. Suppose the current time is 1:00 pm today and you select today as the date and press ok and the property :not-before="new Date()". The selected date will be today's date with the time as 12:00 AM(this time is actually disabled). Technically it should select the current time or the closest time interval in the future(i.e. 1:00 PM or 1:15 PM).

not-before and not-after not working when clicking on month or year

When you click on the month or on the year, you can select a month or year from a list. If you do that the date changes and there is no validation on not-before or not-after values.

License regarding this package

Hi @mengxiong10,

Thank you for this amazing plugin.

I would like to know the license file for this package, could you please create one for this?

限定可选时间段？

首先非常感谢作者，这个组件用起来非常方便，满足了我的大部分需求，且没发现什么坑。
有一个可能比较小众的场景，比如进行数据查询的时候，限制可以选择的时间长度（尤其是精确到每分种的时候，需要限制可选长度为几小时），也就是说需要可选范围随着初始、结束时间的选择而动态变化。
不知是否考虑支持这种功能

Is there a support for maxDate allowed?

Pass default value when datepicker is range

I was trying pass default value to datepicker when is range the following way:

<date-picker v-model='inputRange' lang='en' :shortcuts='shortcuts' range :value='defaultDateRange'/>

And defaultDateRange is a computed data:

computed: {
    defaultDateRange() {
      return [
        this.shortcuts[1].start.toDate(),
        this.shortcuts[1].end.toDate(),
      ];
    },
  },

Could you help me?

Let me know if you need more context about the problem.

Datepicker defaulting to readonly

Hello, I started using the vue2-datepicker on a project and I am getting a readonly version of the datepicker on a particular instance of the component. Which is really strange.
I have a few other datepickers on the same vue file and they behave correctly, but this particular one does not, by default it makes it readonly="readonly".

Also, is there a way to pass an ID to the generated input field instead of me binding the ID to the parent DIV?

Here the component call:
<datePicker v-bind:id="index" v-model="todayDate" type="datetime" format="yyyy-MM-dd HH:mm" lang="en"></datePicker>

Date is descressed

Hello Everyone!

I have a problem.
When I'm picking date for example:
2018-01-19 12:00
in model I have hour decreased by one:
2018-01-19 11:00

When I'm picking the date I want the exact hour :)
Please help.

Example:

My code:

<date-picker
	id="orderDeliveryDate"
	name="orderDeliveryDate"
	v-validate="'required'"
	v-model="order.delivery.endOfProduction"
	:not-before="this.order.creation"
	type="datetime"
	:confirm="true"
	:minute-step="5"
	format="yyyy-MM-dd HH:mm:ss"
	lang="en
>
</date-picker>

Name attribute

I know this might not be utmost important, but please add a name attribute on the <input name="date" readonly="readonly" placeholder="Select Date" class="mx-input"> for servers to recognize the form field. Thanks and awesome project

change position of datepicker

is it possible to change the position of datepicker? since i have used it in table, it covers all my table data. so i want to change its position to top side of table. is it possible?

Type in the date.

Ive used your Date picker for a project and I need to make it accept the date when the user types it in.

Is this supported?

Thanks

Implement time

select datepicker or datetimepicker(date/datetime)

select datepicker or datetimepicker(date/datetime/time) ; )

time picker component

It is nice to have a separate component for pure time picker if there is no date to pick.

If you have some plans for this in the future, please let me know.

@mengxiong10

Custom ranges?

Hi Guys :)

Love the plugin so far - however our clients asked for different date ranges.

Is there a way to use a custom array of date ranges?

e.g.

1 Day, 1 Month, 1 Year ? I can see

initRanges () {
      this.ranges = [{
        text: '未来7天',
        start: new Date(),
        end: new Date(Date.now() + 3600 * 1000 * 24 * 7)
      }, {
        text: '未来30天',
        start: new Date(),
        end: new Date(Date.now() + 3600 * 1000 * 24 * 30)
      }, {
        text: '最近7天',
        start: new Date(Date.now() - 3600 * 1000 * 24 * 7),
        end: new Date()
      }, {
        text: '最近30天',
        start: new Date(Date.now() - 3600 * 1000 * 24 * 30),
        end: new Date()
      }]
      this.ranges.forEach((v, i) => {
        v.text = this.translation.pickers[i]
      })
    },

How can we overwrite these?

Thanks :)

Clear Current Date

There is no way to clear the current date chosen.

时区的问题怎么解决呀？

在**和美国显示的日期不一致，我用了很多方法都不管用。

Interaction tweaks/questions

We're implementing this lovely datepicker, but my designers had some minor questions about the current interactions which hopefully can be made configurable:

• Displaying X/closeIcon always instead of only on hover when value exists.
• Transitioning the display of popup
• Add a state class when the popup is displayed on top of the field instead of below (since we'd like to add a small arrow, we'd need to know where to place it)

If you're interested in adding any of these, I can create some PRs :)

Responsive desing

Hello,
Any possibility to make this date picker responsive?

strange date printing each month

datetimepicker in <b-table> works this way, but datetimepicker of the other containers seems okay.

<template slot="row-details" scope="row">
                <b-card>
                    <b-container fluid>
                        <b-row class="text-center">
                            <b-col>col1</b-col>
                            <b-col>col2</b-col>
                            <b-col>col3</b-col>
                            <b-col>col4</b-col>
                        </b-row>
                        <b-row class="text-center">
                            <b-col>
                                <b-form-select v-model="row.item.col1"  :options="col1Options" class="mb-1" size="sm">
                                </b-form-select>
                            </b-col>
                            <b-col>
                                <datepicker v-model="datetimeValue" 
                                range 
                                type="datetime" 
                                format="yyyy-MM-dd HH:mm:ss"
                                :time-picker-options="{start: '00:00', step: '00:30', end:'23:00'}" 
                                lang="en"
                                confirm>
                                </datepicker>
                            </b-col>
                            <b-col>
                                <b-form-checkbox v-model="row.item.col3" value="1" unchecked-value="0"> </b-form-checkbox>
                            </b-col>
                            <b-col>
                                <b-button variant="success" size="sm" @click="update()">update</b-button>
                            </b-col>
                        </b-row>
                    </b-container>
                </b-card>
            </template>

Support Japanese language

I would like to ask to support japanese language !!!

disabled-days option is not working

I have integrated date picker with my vue2 app.
I pass an array to disabled-days option in below formats. But it is not disabling those dates.
Array = ['2017-01-14','2017-01-15'] ==> Not working
Array = [new Date('2017-01-14'), new Date('2017-01-15')] ==> Not working
Array = [1,3] ==> Not working (as index of days)

Can you let me know how to use this option if My way of usage is wrong

How to catch the confirm button click

I can't seem to figure out how to catch the click of the 'confirm' OK button ? Is there an event built-in to catch it ? Docs don't say much

Also, please note you have a console.log that does log the dates on clicking OK (probably should be removed)

How to use with browser script

Please any support for browser script.

Time is being shown when type=date or not specified

<date-picker type="date" v-model="input.actual_complete_date" format="mm-dd-yyyy" lang="en" name="action_by_date"> </date-picker>

Any way to force it to adhere to the type and format specified?