vue日期选择器精确到分钟

需求:开发遇到一个需求是日期选择器需要精确到分钟,默认是精确到秒,感觉这种情况以后可能会很常见,实现后顺手记录下来.ant design vue官方文档介绍<template><div><a-date-picker show-time placeholder="Select Time" @change="onChange" @ok="onOk" /><br

奔跑的五花肉～

2900人浏览 · 2022-01-20 14:02:55

奔跑的五花肉～ · 2022-01-20 14:02:55 发布

需求:开发遇到一个需求是日期选择器需要精确到分钟,默认是精确到秒,感觉这种情况以后可能会很常见,实现后顺手记录下来.

ant design vue官方文档介绍

在这里插入图片描述

<template>
  <div>
    <a-date-picker show-time placeholder="Select Time" @change="onChange" @ok="onOk" />
    <br />
    <a-range-picker
      :show-time="{ format: 'HH:mm' }"
      format="YYYY-MM-DD HH:mm"
      :placeholder="['Start Time', 'End Time']"
      @change="onChange"
      @ok="onOk"
    />
  </div>
</template>
<script>
export default {
  methods: {
    onChange(value, dateString) {
      console.log('Selected Time: ', value);
      console.log('Formatted Selected Time: ', dateString);
    },
    onOk(value) {
      console.log('onOk: ', value);
    },
  },
};
</script>

自己的例子:

在这里插入图片描述

<a-col :span="11">
  <a-form-model-item label="日期" required prop="inspectionTime">
    <a-date-picker
        style="min-width: 50%;"
        :show-time="{ format: 'HH:mm' }"
        format="YYYY-MM-DD HH:mm"
        v-model="form.inspectionTime"
        @change="getInspectionTime"/>
  </a-form-model-item>
</a-col>

	//获取记录日期
    getInspectionTime(date, dateString) {
      this.form.inspectionTime = dateString
      console.log(date, dateString)
    },

style=“min-width: 50%;“是控制选择器宽度,
:show-time=”{ format: ‘HH:mm’ }“是控制选择器中时间精确度
因为我的数据库inspection_time字段是datetime格式,所以执行保存方法时需要对传到后台的参数处理下,
“inspectionTime”: this.form.inspectionTime.concat(”:00”),
然后查询信息,回填时截取后两位即可.
inspectionTime: x.inspectionTime.substring(0, 16),
上面就是将时间选择器精确到分钟的方法,举一反三也可以设置其他的精确度.
–如有错误,欢迎指正,共同进步,