3.11.1 • Published 1 year ago

vue2-datepicker v3.11.1

Weekly downloads
55,647
License
MIT
Repository
github
Last release
1 year ago

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

image

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

PropDescriptionTypeDefault
typeselect the type of pickerdate |datetime|year|month|time|week'date'
rangeif true, pick the range datebooleanfalse
formatto set the date format. similar to moment.jstoken'YYYY-MM-DD'
formatteruse your own formatter, such as moment.jsobject-
value-typedata type of the binding valuevalue-type'date'
default-valuedefault date of the calendarDatenew Date()
langoverride the default localeobject
placeholderinput placeholder textstring''
editablewhether the input is editablebooleantrue
clearableif false, don't show the clear iconbooleantrue
confirmif true, need click the button to change valuebooleanfalse
confirm-textthe text of confirm buttonstring'OK'
multipleif true, multi-select datebooleanfalse
disableddisable the componentbooleanfalse
disabled-datespecify the date that cannot be selected(date: Date, currentValue: Date[]) => boolean-
disabled-timespecify the time that cannot be selected(date: Date) => boolean-
append-to-bodyappend the popup to bodybooleantrue
inlinewithout inputbooleanfalse
input-classinput classnamestring'mx-input'
input-attrinput attrs(eg: { name: 'date', id: 'foo'})object
openopen state of pickerboolean-
default-paneldefault panel of the pickeryear|month-
popup-stylepopup styleobject
popup-classpopup classes
shortcutsset shortcuts to selectArray<{text, onClick}>-
title-formatformat of the tooltip in calendar celltoken'YYYY-MM-DD'
partial-updatewhether update date when select year or monthbooleanfalse
range-separatortext of range separatorstring' ~ '
show-week-numberdetermine whether show week numberbooleanfalse
hour-stepinterval between hours in time picker1 - 601
minute-stepinterval between minutes in time picker1 - 601
second-stepinterval between seconds in time picker1 - 601
hour-optionscustom hour columnArray<number>-
minute-optionscustom minute columnArray<number>-
second-optionscustom second columnArray<number>-
show-hourwhether show hour columnbooleanbase on format
show-minutewhether show minute columnbooleanbase on format
show-secondwhether show second columnbooleanbase on format
use12hwhether show ampm columnbooleanbase on format
show-time-headerwhether show header of time pickerbooleanfalse
time-title-formatformat of the time headertoken'YYYY-MM-DD'
time-picker-optionsset fixed time list to selecttime-picker-optionsnull
prefix-classset prefix classstring'mx'
scroll-durationset the duration of scroll when hour is selectednumber100

Token

UintTokenoutput
YearYY70 71 ... 10 11
YYYY1970 1971 ... 2010 2011
Y-1000 ...20 ... 1970 ... 9999 +10000
MonthM1 2 ... 11 12
MM01 02 ... 11 12
MMMJan Feb ... Nov Dec
MMMMJanuary February ... November December
Day of MonthD1 2 ... 30 31
DD01 02 ... 30 31
Day of Weekd0 1 ... 5 6
ddSu Mo ... Fr Sa
dddSun Mon ... Fri Sat
ddddSunday Monday ... Friday Saturday
AM/PMAAM PM
aam pm
HourH0 1 ... 22 23
HH00 01 ... 22 23
h1 2 ... 12
hh01 02 ... 12
Minutem0 1 ... 58 59
mm00 01 ... 58 59
Seconds0 1 ... 58 59
ss00 01 ... 58 59
Fractional SecondS0 1 ... 8 9
SS00 01 ... 98 99
SSS000 001 ... 998 999
Time ZoneZ-07:00 -06:00 ... +06:00 +07:00
ZZ-0700 -0600 ... +0600 +0700
Week of Yearw1 2 ... 52 53
ww01 02 ... 52 53
Unix TimestampX1360013296
Unix Millisecond Timestampx1360013296123

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

ValueDescription
'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;
    },
  },
];
AttributeDescription
texttitle of the shortcut
onClickcallback 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' }
AttributeDescription
startstart time
stepstep time
endend time
formatthe default is same as prop format

Events

NameDescriptionCallback Arguments
inputWhen the value change(v-model event)date
changeWhen the value change(same as input)date, type('date'|'hour'|'minute'|'second'|'ampm
openWhen panel openingevent
closeWhen panel closing
confirmWhen click 'confirm' buttondate
clearWhen click 'clear' button
input-errorWhen user type a invalid Datethe input text
focusWhen input focus
blurWhen input blur
pickwhen select date #429date
calendar-changewhen change the calendardate, oldDate, type('year'|'month'|'last-year'|'next-year'|'last-month'|'next-month'|'last-decade'|'next-decade')
panel-changewhen the calendar panel changestype('year'|'month'|'date'), oldType

Slots

NameDescription
icon-calendarcustom the calender icon
icon-clearcustom the clear icon
inputreplace input
headerpopup header
footerpopup footer
sidebarpopup sidebar

ChangeLog

CHANGELOG

One-time Donations

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

Paypal Me

donate

License

MIT

Copyright (c) 2017-present xiemengxiong

ui-kit-oohdesktsvueprojectil-front-componentstong-zui-uitotalpass-portal-rhvs-datepickerbrillium-corebrillium-shared-uimk-coreux-vue-components@fanswoo/framework-front-coreglobaltruck-uikit1nuxt-uiwanghong-demo@infinitebrahmanuniverse/nolb-vue2@everything-registry/sub-chunk-3098sheets_form_builder_jscentral-plusfluff-uiigg-vue-datepickerlogyc-vue-excel-edittormysecondgridtestnioktr-dsnixloc-uimozz-appmozz-chathpsaggridhpsgridhpsgridtaroraheaderfilejsonschema-form-vuemy-vue-excel-editornextcloud-vuemyfirstgridmyfirstgridtestnetforce_thememcui-ssr-testmcdsmediacube-uimediacube-ui--perfomance-test-1mediacube-ui--perfomance-test-2erp-ui-elementglobaltruck-uikit2filterviewgetbucks-libraryfunc-splitfondy-checkout-vuefw-usersfunky-ui-kitosmanli-veri-dagitimprintsequencelistpreviolet-inputspadamrwc-client@euro.message/rmc-template-wizard@evaguru/evaui@elektron-solutions/data-tablevue-analytics-chartsvue-rt-style-kit-atomstravelrequesttf-widgetvue-gantt-custom-vitvue-form-fieldsvue-cli3-element-appvue-datetime-rangevue-excel-editorvue-excel-editor-ayz-forkvue-excel-editor-saevue-expert-datatablevui-designvue2-datepicker-inrange@mercadoeletronico/me-toolkit@mjalili27/vuewsstsadvwebcc-componentswebcc-components-2web-organization-managementwebcomponents-dlworkflowpipelinelibsyl-form-designtuxedo-elementstuxedo-elements-vue3v-custome-range-calender@lexiang/venom@nextcloud/vue@nixweb/nixloc-ui@nocab915/ui-library-test@fanswoo/control-centersimple-popup-menusmart-librarytalent-findtaroragridprojectstac-componentsalamandra-commonsavtestshopexpress-corespn-utility@livebuzzevents/v3-assets@libra-lei/yl-ui@makesenseorg/design-system
3.11.1

1 year ago

3.11.0

2 years ago

3.10.4

2 years ago

3.10.3

2 years ago

3.10.2

3 years ago

3.10.1

3 years ago

3.10.0

3 years ago

3.9.2

3 years ago

3.9.1

3 years ago

3.9.0

3 years ago

3.8.2

3 years ago

3.8.1

3 years ago

4.0.0-beta.2

3 years ago

3.8.0

3 years ago

4.0.0-beta.1

3 years ago

3.7.0

3 years ago

3.6.3

3 years ago

3.6.2

4 years ago

3.6.1

4 years ago

3.6.0

4 years ago

3.5.0

4 years ago

3.4.1

4 years ago

3.4.0

4 years ago

3.3.1

4 years ago

3.3.0

4 years ago

3.2.2

4 years ago

3.2.1

4 years ago

3.2.0

4 years ago

3.1.1

4 years ago

2.13.4

4 years ago

3.1.0

4 years ago

3.0.2

4 years ago

3.0.1

4 years ago

3.0.0

4 years ago

3.0.0-beta.1

4 years ago

2.13.3

4 years ago

2.13.2

4 years ago

2.13.1

4 years ago

2.13.0

4 years ago

2.12.0

5 years ago

2.11.2

5 years ago

2.11.1

5 years ago

2.11.0

5 years ago

2.10.3

5 years ago

2.10.2

5 years ago

2.10.1

5 years ago

2.10.0

5 years ago

2.9.2

5 years ago

2.9.1

5 years ago

2.9.0

5 years ago

2.8.1

5 years ago

2.8.0

5 years ago

2.7.0

5 years ago

2.6.4

5 years ago

2.6.3

5 years ago

2.6.2

5 years ago

2.6.1

5 years ago

2.6.0

5 years ago

2.5.0

5 years ago

2.4.3

6 years ago

2.4.2

6 years ago

2.4.1

6 years ago

2.4.0

6 years ago

2.3.2

6 years ago

2.3.1

6 years ago

2.3.0

6 years ago

2.2.0

6 years ago

2.1.0

6 years ago

2.0.4

6 years ago

2.0.3

6 years ago

2.0.2

6 years ago

2.0.1

6 years ago

2.0.0

6 years ago

1.9.8

6 years ago

1.9.7

6 years ago

1.9.6

6 years ago

1.9.5

6 years ago

1.9.4

6 years ago

1.9.3

6 years ago

1.9.2

6 years ago

1.9.1

6 years ago

1.9.0

6 years ago

1.8.3

6 years ago

1.8.2

6 years ago

1.8.1

6 years ago

1.8.0

6 years ago

1.7.0

6 years ago

1.6.3

6 years ago

1.6.2

6 years ago

1.6.1

6 years ago

1.6.0

6 years ago

1.5.1

6 years ago

1.5.0

7 years ago

1.4.1

7 years ago

1.4.0

7 years ago

1.3.1

7 years ago

1.3.0

7 years ago

1.2.1

7 years ago

1.2.0

7 years ago

1.1.0

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago