日期控件的使用

日期控件的使用

日期选择是常用的一个需求，今天来稍微总结下a-date-picker和a-range-picker的使用

这里使用的 v1.7.8版本

基本使用

      <a-date-picker
        :locale="locale"
        :showToday="false"
        :valueFormat="valueFormat"
        :disabled-date="disabledDate"
        @change="onChange"
      />

      <a-range-picker
        :locale="locale"
        :valueFormat="valueFormat"
        :disabled-date="disabledDate"
        @change="onChange2"
      ></a-range-picker>

默认显示的是英文，第一个导入让日期控件显示中文；但是发现月份显示的还是英文，接下来的3行，是为了解决中英文混合的问题，

<script>
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import moment from "moment";
import "moment/locale/zh-cn";
moment.locale("zh-cn");
export default {
  data() {
    return {
      locale,
      valueFormat: moment().format("YYYY-MM-DD"), // 日期格式为2022-06-03这种格式
      disabledDate: (current) => {   // 禁用了今天之后的时间的选择
        return current && current > moment().endOf("day");
      },
    };
  },

  methods: {
    onChange(today，selectedDate) {
      console.log(today，selectedDate);
    },

    onChange2(today，selectedDateArr) {
      console.log(today，selectedDateArr);
    },
  },
};
</script>

常见参数及使用说明：

参数	说明	值	补充
locale	语言类型		默认是英文
valueFormat	设置日期值的格式		默认是一个moment对象
showToday	是否显示今天的按钮	Boolean	默认为true显示今天按钮
value(v-model)			默认值为moment对象
renderExtraFooter	底部添加自定的内容	vslot	比如一些快捷的时间选择按钮，确定按钮等
dateRender	自定义单元格内容和样式	vslot	比如使用圆圈替换默认的矩，当然也可以直接css设置
disabledDate	设置不可选择的日期	fn
getCalendarContainer	日期控件放在哪里，默认是body中	fn	trigger=>{ return trigger.parentNode || document.body}
allowClear	是否显示清除按钮	Boolean	默认值是true

更多参数参考官网

只有工作日可选

      <a-date-picker
        :locale="locale"
        :showToday="false"
        :valueFormat="valueFormat"
        :disabled-date="disableWeekend"
        @change="onChange"
      />



      disableWeekend: (current) => {
        return current.day() == 6 || current.day() == 0;
      },

设置快捷选择（今天，本周，近一周，本月，近一个月，近一年），range属性

      <a-range-picker
        :locale="locale"
        :valueFormat="valueFormat"
        @change="onChange2"
        :ranges="ranges"

> </a-range-picker>

      ranges: {
        今天: [moment(), moment()],
        本周: [moment().weekday(0), moment().weekday(6)], // 这一周的七天
        近一周: [moment().subtract(6, "days"), moment()], // 今天往前数6天
        本月: [moment().startOf("month"), moment().endOf("month")],
        近一个月: [moment().subtract(1, "month"), moment()], // eg:[2022-05-20,2022-06-20]
        近一年: [moment().subtract(1, "year"), moment()], // 去年今天--今年今天
      },