@linkchain/vue-lcdatepicker

v0.0.4

Published

7 months ago

A Datepicker Component For Vue3

Downloads

0High
0Medium
0Low

eeyellow

vue calendar datepicker datetimepicker

vue-datepicker-next

English Version

一个基于 Vue3.x 的日期时间选择组件

线上 Demo

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

安装

$ npm install vue-datepicker-next --save

主题

如果你的项目使用了 SCSS, 你可以改变默认的变量.

创建一个新的文件. e.g. datepicker.scss:

$namespace: 'xmx'; // 更改默认前缀为'xmx'. 然后设置 <date-picker prefix-class="xmx" />

$default-color: #555;
$primary-color: #1284e7;

@import '~vue-datepicker-next/scss/index.scss';

用法

<script>
  import DatePicker from 'vue-datepicker-next';
  import 'vue-datepicker-next/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>

国际化

默认语言是英文. 可以引入语言包切换到中文.

import DatePicker from 'vue-datepicker-next';
import 'vue-datepicker-next/index.css';

import 'vue-datepicker-next/locale/zh-cn';

还可以通过lang去覆盖一些默认语言选项. 完整配置

<script>
  export default {
    data() {
      return {
        langObject: {
          formatLocale: {
            firstDayOfWeek: 1,
          },
          monthBeforeYear: false,
        },
        langString: 'zh-cn',
      };
    },
  };
</script>

<template>
  <date-picker :lang="langObject"></date-picker>
  <date-picker :lang="langString"></date-picker>
</template>

Props

| 属性 | 描述 | ------------------- | --------------------- | type | 日期选择的类型 | range | 如果是 true, | format | 设置格式化的 | formatter | 使用自己的格式化程序, | value-type | 设置绑定值的类型 | default-value | 设置日历默认的时间 | lang | 覆盖默认的语音设置 | placeholder | 输入框的 placeholder | editable | 输入框是否可以输入 | clearable | 是否显示清除按钮 | confirm | 是否需要确认 | confirm-text | 确认按钮的文字 | multiple | 如果是 true, | disabled | 禁用组件 | disabled-date | 禁止选择的日期 | disabled-time | 禁止选择的时间 | append-to-body | 弹出层插入到 body 元素下 | input-class | 输入框的类 | input-attr | 输入框的其他属性(eg: | open | 控制弹出层的显示 | default-panel | 控制打开的面板 | popup-style | 弹出层的样式 | popup-class | 弹出层的类 | shortcuts | 设置快捷选择 | title-format | 日历单元格的 tooltip | partial-update | 是否更新日期当 | separator | 范围分隔符 | show-week-number | 是否显示星期数字 | hour-step | 小时列的间隔 | minute-step | 分钟列的间隔 | second-step | 秒列的间隔 | hour-options | 自定义小时列 | minute-options | 自定义分钟列 | second-options | 自定义秒列 | show-hour | 是否显示小时列 | show-minute | 是否显示分钟列 | show-second | 是否显示秒列 | use12h | 是否显示 ampm 列 | show-time-header | 是否显示时间选 | time-title-format | 时间面板头部的格式化 | time-picker-options | 设置固定时间去选择 | prefix-class | 设置 class 的前缀 | scroll-duration | 设置滚动时候当 | 类型 | 默认值 | --------------------------- | ----------------------------------------------- | -------------- | | date |datetime|year|month|time|week | 'date' | 变成日期范围选择 | boolean | false | token, 类似 moment.js | token | 'YYYY-MM-DD' | 比如 moment.js | object | - | | value-type | 'date' | | Date | new Date() | | object | | | string | '' | | boolean | true | | boolean | true | | boolean | false | | string | 'OK' | 可以选择多个日期 | boolean | false | | boolean | false | | (date: Date, currentValue: Date[]) => boolean | - | | (date: Date) => boolean | - | | boolean | true | | string | 'mx-input' | { name: 'date', id: 'foo'}) | object | — | | boolean | - | | year|month | - | | object | — | | | — | | Array<{text, onClick}> | - | | token | 'YYYY-MM-DD' | 选择年或月的时候 | boolean | false | | string | ' ~ ' | | boolean | false | | 1 - 60 | 1 | | 1 - 60 | 1 | | 1 - 60 | 1 | | Array<number> | - | | Array<number> | - | | Array<number> | - | | boolean | base on format | | boolean | base on format | | boolean | base on format | | boolean | base on format | 择面板的头部 | boolean | false | | token | 'YYYY-MM-DD' | | time-picker-options | null | | string | 'mx' | 选中小时的时候 | number | 100 |

Token

| 单元 | 符号 | 输入 | | -------------------------- | ---- | -------------------------------------- | | 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

formatter 接受一个对象去自定义格式化

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

data() {
  return {
    // 使用moment.js 替换默认
    momentFormat: {
      //[可选] Date to String
      stringify: (date) => {
        return date ? moment(date).format('LL') : ''
      },
      //[可选]  String to Date
      parse: (value) => {
        return value ? moment(value, 'LL').toDate() : null
      },
      //[可选] getWeekNumber
      getWeek: (date) => {
        return // a number
      }
    }
  }
}

value-type

设置绑定值的类型

| 可选值 | 描述 | | ----------------- | ------------------------------------ | | 'date' | 返回一个日期对象 | | 'timestamp' | 返回一个时间戳 | | 'format' | 返回一个用 format 字段格式化的字符串 | | token(MM/DD/YYYY) | 返回一个用这个字段格式化的字符串 |

shortcuts

设置快捷选择方式

[
  { text: 'today', onClick: () => new Date() },
  {
    text: 'Yesterday',
    onClick: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    },
  },
];

| 属性 | 描述 | | ------- | --------------------------------- | | text | 显示的名称 | | onClick | 回调函数，需要返回一个 Date 对象 |

time-picker-options

设置固定时间用于选择

{start: '00:00', step:'00:30' , end: '23:30'}

| 属性 | 描述 | | ----- | -------- | | start | 开始时间 | | step | 间隔时间 | | end | 结束时间 |

事件

| 名称 | 描述 | 回调函数的参数 | | --------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------ | | update:value | 当选择日期的事件触发 | date | | change | 当选择日期的事件触发 | date, type('date'|'hour'|'minute'|'second'|'ampm') | | open | 当弹出层打开时候 | event | | close | 当弹出层关闭时候 | | | confirm | 当点击确认按钮 | date | | clear | 当点击清除按钮 | | | input-error | 当输入一个无效的时间 | input text | | focus | 当输入框有焦点 | | | blur | 当输入框失焦 | | | pick | 当点击日期时 #429 | date | | calendar-change | 当改变年月时 | date | | panel-change | 当日历面板改变时 | type('year'|'month'|'date'), oldType |

Slots

| 名称 | 描述 | | ------------- | -------------- | | icon-calendar | 自定义日历图标 | | icon-clear | 自定义清除图标 | | input | 替换输入框 | | header | 弹出层的头部 | | footer | 弹出层的底部 | | sidebar | 弹出层的侧边 |

ChangeLog

CHANGELOG

一次性捐赠

如果这个项目对你很有用，你可以请我喝杯咖啡

Paypal Me

donate

License

MIT