Ant Design日期选择框a-date-picker用法

1.全局设置为中文

在入口文件app.vue里设置

 但因为a-date-picker内部用到了dayjs,所以还需要全局设置下dayjs为中文,在main.ts里添加

import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
(dayjs as any).locale=('en')
app.config.globalProperties.day=dayjs//全局挂载

2.组件内使用

 <a-date-picker :disabledTime="getDisabledDateTime" :showNow="false"  :disabledDate="getDisabledDate" :showTime="true" :defaultValue="day(getlastMonth(), dateFormat)" :format="dateFormat" @Ok="startTime"></a-date-picker>



 const dateFormat = ref('YYYY-MM-DD HH:mm:ss'); // 定义你需要的时间格式

 3.新建公共方法文件

//  获取当前日期的前一个月日期
  export function getlastMonth() {
    let now = new Date();
    // 当前年月的日
    let nowDate = now.getDate();
    //当前月份完整日期 (Thu Jul 07 2022 12:03:37 GMT+0800 (中国标准时间))
    let lastMonth:any = new Date(now.getTime());
    // 设置上一个月(这里不需要减1) getMonth()返回表示月份的数字 setMonth()设置月份参数
    lastMonth.setMonth(lastMonth.getMonth());
    // 设置为0,默认为当前月的最后一天
    lastMonth.setDate(0);
    // 上一个月的天数
    let daysOflastMonth = lastMonth.getDate();
    // 设置上一个月的日期,如果当前月的日期大于上个月的总天数,则为最后一天
    // 例如当前是3月31,而2月只有28或29天,则取2月的最后一天
    lastMonth.setDate(nowDate > daysOflastMonth ? daysOflastMonth : nowDate);
    //调用格式化日期函数
    lastMonth = getNowFormatDate(lastMonth);
    return lastMonth;
  }
  //获取当前时间
  export function getCurrentTime() {
    var date = new Date();//当前时间
    var year = date.getFullYear() //年
    var month = repair(date.getMonth() + 1);//月
    var day = repair(date.getDate());//日
    var hour = repair(date.getHours());//时
    var minute = repair(date.getMinutes());//分
    var second = repair(date.getSeconds());//秒
    //当前时间 
    var curTime = year + "-" + month + "-" + day
            + " " + hour + ":" + minute + ":" + second;
    return curTime;
}
export function getDisabledDate(current:any){
  let result = false
  if (current > day().subtract(1, 'days')) {
    result = true
  }
  return result
}
export function getDisabledDateTime(dates: any){
  const hours = day().hour();
  const minutes = day().minute();
  const seconds = day().second();
  if (dates && day(dates).date() === day().date()&&day(dates).year() === day().year()&&day(dates).month() === day().month()) {
    return {
      disabledHours: () => range(hours + 1, 24),
      disabledMinutes: () => range(minutes + 1, 60),
      disabledSeconds: () => range(seconds + 1, 60),
    };
  }
  return {
    disabledHours: () => [],
    disabledMinutes: () => [],
    disabledSeconds: () => [],
  };
}
//若是小于10就加个0
function repair(i){
  if (i >= 0 && i <= 9) {
      return "0" + i;
  } else {
      return i;
  }
}
function range(start, end) {
  const result = []
  for (let i = start; i < end; i++) {
    result.push(i)
  }
  return result
}

猜你喜欢

转载自blog.csdn.net/weixin_53474595/article/details/130730780