antdesign组件使用DatePicker 日期选择框，可以直接返回需要的格式

jojo是只猫

已于 2024-03-06 11:12:34 修改

阅读量1k

点赞数 2

文章标签： antdesign

于 2024-03-06 11:12:20 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42496938/article/details/136500339

版权

<a-range-picker
   v-model:value="formState.date"
   :show-time="{ format: 'HH:mm:ss' }"
   valueFormat="YYYY-MM-DD HH:mm:ss"
 />

通过配置valueFormat可直接返回自己要求的格式

最终打印：
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

jojo是只猫

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

关于ant-design的DatePicker时间控件回显error问题

长路漫漫，唯键作伴

03-31

1831

这几天写后台的时候发现在表单回显的时候无法回显DatePicker控件，一用setFiledValue塞数据就直接白屏报错，后来查了好多信息才发现原来是DatePicker控件只接受moment对象格式的时间所以如果想要解决这个问题，唯一的方式就是，在接口的数据获取了以后，把时间字符串使用moment.js库转化成moment对象类型的时间格式 import moment from 'moment' // 省略获取接口数据的过程 const result = await getinfo(); setFiel

Python私教张大鹏 Vue3整合AntDesignVue之DatePicker 日期选择框

热门推荐

betterKeKe的博客

04-17

1万+

Ant Design Vue中DatePicker 日期选择框遇到的回显问题使用DatePicker时正常取到选择的时间数据是正常的，但是回显时直接将从后端获取的时间传给该组件，时间能显示但是报错，或者直接不显示。正常获取时间数据：这个是使用了validateFields，所以数据直接获取，具体参考官方文档form表单回显时一开始我是直接赋值，报错 getListById() { seeBusinessDistrict(this.$route.query.i

Ant Design Vue 日期选择器DatePicker传给后台日期参数格式问题

海旋风的博客

08-25

2783

前端点击选择日期后，点击提交按钮提交表单时，发现传给后台的日期参数格式有问题，跟前端显示的效果不一致。花了一个下午才解决，官方组件文档里面是没有处理方案说明的。处理完后传到后端日期格式就是yyyy-MM-dd格式。项目版本：Ant Design Vue 2.0.2。要么前端传之前处理，要么后端接收后处理。

ant design vue datepicker 日期返显问题

花满天下的博客

06-09

4432

ant design vue开发做记录这样直接设置值会报 var birthday = '1949-10-01' this.form.setFieldsValue({ 'birth': birthday }) value.locale is not a function 原因是datepicker需要指定格式需要引入moment插件 <script> import moment from "moment" this

Ant Design Vue， DatePicker 日期选择框

h360583690的博客

05-26

1413

Ant Design Vue， DatePicker 日期选择框

关于AntDesignVue的DatePicker日期选择框组件开始、结束时间日期限制的方法

07-14

你可以使用Ant Design Vue的DatePicker组件来实现开始和结束时间的日期限制。下面是一种常见的方法：首先，你需要在Vue组件中导入DatePicker组件： ```javascript import { DatePicker } from 'ant-design-vue'; ...

前端——》ant-design-vue组件的使用之四（DatePicker 日期选择框和Calendar日历的使用）

叙传

07-05

5616

日期选择器的赋值与取值效果实现方式如图所示日期选择框的实现代码如下所示 html代码如下： <a-date-picker v-model="form.taskStartAt" :format="dateFormat" style="width: 100%" /> js代码如下 import moment from 'moment' import 'moment/locale/zh-cn' moment.locale('zh-cn') export default { data ()

21 React UI框架Antd(Ant Design)的使用以及react Antd的使用组件

03-01

DatePicker具有清晰的日期格式化能力，可以设定最小值和最大值限制，以及禁用特定日期。另外，它还支持输入框模式，用户可以直接输入日期，或者通过点击触发下拉日历选择。联动多个DatePicker可以实现日期范围的选择...

antd form表单数据回显操作

01-22

index页面有一个表格，有一个新增按钮，点击新增按钮或表格编辑弹出表单模块，如果是编辑，会回显对应的表格中的数据 //index页面 import React from 'react' import { Table, Button, message, Input, Select, Modal, } from 'antd'; const Option = Select.Option; import AddOrEdit from './AddOrEdit ' class List extends React.Component { constructor(props) { super(pr

【Ant Design】下拉列表Select 、日期选择框DatePicker等跟随滚动条上下移动解决方案

爱酸的博文

09-16

1550

属性不会更新，因此组件会随着滚动条上下移动。当滚动条滚动时，初始化计算的。

ant design datepicker处理日期范围操作

歌谣的博客

10-14

5430

我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣学习前端知识 1需求此刻日期之前的不能选择当天日期结束时间比开始时间打基本样式 <Row gutter={12}> <Col span={12}> <Form.Item label="活动开始时间"> {getFieldDecorator('startTimeLong', { .

ant design DatePicker日期选择框指定分钟的间隔minuteStep属性

u010234868的专栏

05-17

829

在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。

VSCode 开发Vue必备插件

2301_78416672的博客

05-06

836

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！

Ant Design a-time-picker 时间回显问题回显为Invalid date(使用moment来处理)

weixin_43962877的博客

05-21

798

【代码】Ant Design a-time-picker 时间回显问题回显为Invalid date(使用moment来处理)

React + Ant Design V4.0 DatePicker 不可选择的日期和时间设置

问卿何如的博客

01-11

2038

需求：选择日期时，只能选择当天及之后的日期，之前的日期不可选；选择时间时，只能选择当日当前及之后的时间点；例子：如果当前时间时 2021年01月10日 08:08:08，那么 DatePicker 组件可选的日期和时间范围只能是 2021年01月10日 08:08:08 之后的日期和时间，如：2021年01月10日 08:09:00 解决方案：因为使用的是 Ant Design V4.0 版本组件库，该 DatePicker 组件有两个属性：disabledDate和 disableTime...

antd 使用datepicker数据提交时，格式化

qq_24044863的博客

09-05

2140

form表单中，使用datepicker组件，官方的案例，在form的commit方法中，对时间类型的使用format进行格式化，但是不方便：1）需要确切的知道form.item的name值；2）如果时间类型比较多，需要挨个儿格式化。自己封装一个datepicker。

antd日期选择器如何输出特定格式以及设置禁选时间段

前端小白的学习分享小世界

08-02

3626

案例：在项目中，需要用户选择大于今天的日期，并以"YYYY/MM/DD"的格式传递给后端。