Norse Polytheistic Mythology

    vue2-datepicker
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/vue2-datepicker package

    3.10.4 • Public • Published

    vue2-datepicker

    中文版

    A Datepicker Component For Vue2

    build:passed Badge npm MIT

    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

    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

    donate

    License

    MIT

    Copyright (c) 2017-present xiemengxiong

    Install

    npm i vue2-datepicker

    DownloadsWeekly Downloads

    82,724

    Version

    3.10.4

    License

    MIT

    Unpacked Size

    846 kB

    Total Files

    134

    Last publish

    Collaborators

    • mxie