@linkchain/vue-lcdatepicker v0.0.4

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

Token

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

设置绑定值的类型

shortcuts

设置快捷选择方式

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

time-picker-options

设置固定时间用于选择

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

事件

Slots

ChangeLog

CHANGELOG

一次性捐赠

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

Paypal Me

License

MIT

Copyright (c) 2021-present xiemengxiong