antd datepicker 添加默认值

最新推荐文章于 2024-08-15 11:54:21 发布

原创最新推荐文章于 2024-08-15 11:54:21 发布 · 3.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了在Vue项目中使用antd Datepicker组件并设置默认日期的方法，包括安装必要的依赖，获取当前时间及昨天时间的步骤，参考了相关的技术资源。

部署运行你感兴趣的模型镜像

参考: https://www.jianshu.com/p/1aa165255697
https://momentjs.com/
https://www.antdv.com/components/date-picker-cn/

首先,有一个datepicker组件(需要先安装好antd环境)


<template>
  <div>
    <a-date-picker :default-value="moment('2015/01/01', dateFormat)" :format="dateFormat" />
    <br />
    <a-date-picker
      :default-value="moment('01/01/2015', dateFormatList[0])"
      :format="dateFormatList"
    />
    <br />
    <a-month-picker :default-value="moment('2015/01', monthFormat)" :format="monthFormat" />
    <br />
    <a-range-picker
      :default-value="[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]"
      :format="dateFormat"
    />
  </div>
</template>
<script>
import moment from 'moment';
export default {
  data() {
    return {
      dateFormat: 'YYYY/MM/DD',
      monthFormat: 'YYYY/MM',
      dateFormatList: ['DD/MM/YYYY', 'DD/MM/YY'],
    };
  },
  methods: {
    moment,
  },
};
</script>

2 安装mount

npm install moment --save   # npm
yarn add moment             # Yarn
Install-Package Moment.js   # NuGet
spm install moment --save   # spm
meteor add momentjs:moment  # meteor
bower install moment --save # bower (deprecated)

获取当前时间

(中国地区时间)

var now = moment().locale('zh-cn').format('YYYY-MM-DD HH:mm:ss');

获取昨天时间

moment().locale('zh-cn').subtract(3, 'days').format('YYYY-MM-DD'), dateFormat) #前三天的时间
moment().locale('zh-cn').add(3, 'days').format('YYYY-MM-DD'), dateFormat) # 后三天的时间