Ant组件——DatePicker 日期选择框

业务需求

设置两个时间选择框，一个是开始时间，一个是结束时间，两者相互制约，开始不能早于结束，结束不能小于开始

代码示例

1.html

<a-form-item label="生效日期"><date-time-picker @change="getPolicyStartTime":format="dateFormat":disabled-date="disabledBeginDate":value="policyStartTimeValue":show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }":placeholder="请选择生效日期"></date-time-picker></a-form-item><a-form-item label="到期日期"><date-time-picker @change="getPolicyEndTime":format="dateFormat":value="policyEndTimeValue":show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }":disabled-date="disabledEndDate":placeholder="请选择到期日期"></date-time-picker></a-form-item>

2.js

<script lang="ts">
import moment from 'moment';
export default class Staff extends Vue {moment = moment;dateFormat = 'YYYY-MM-DD';policyStartTime: any = null;
policyEndTime: any = null;get policyStartTimeValue() {const policyStartTime = this.policyStartTime;return policyStartTime ? moment(this.policyStartTime) : null;}get policyEndTimeValue() {const policyEndTime = this.policyEndTime;return policyEndTime ? moment(this.policyEndTime) : null;}
}getPolicyStartTime(e: any) {this.policyStartTime = e?.valueOf() ?? null;}getPolicyEndTime(e: any) {this.policyEndTime = e?.valueOf() ?? null;}disabledBeginDate(beginDate: any) {const endDate = this.policyEndTime;if (!beginDate || !endDate) {return false;}return beginDate > endDate;}disabledEndDate(endDate: any) {const beginDate = this.policyStartTime;if (!endDate || !beginDate) {return false;}return beginDate >= endDate;}
</script>

3. 总结

主要问题是，日期选择需要的是moment的数据，传递给后台是时间戳的格式

所以通过计算属性把时间戳转化成moment数据,用于前端页面展示

在触发事件中把moment数据转化为时间戳储存，用于与后端进行数据传递

限制关系可以通过组件的disabled-date属性，编写对应函数传入即可

Ant组件——DatePicker 日期选择框相关推荐

前端——》ant-design-vue组件的使用之四（DatePicker 日期选择框和Calendar日历的使用）
日期选择器的赋值与取值效果实现方式如图所示日期选择框的实现代码如下所示 html代码如下: <a-date-picker v-model="form.taskStartAt&qu ...
html表单日期选择器ppt,DatePicker 日期选择框
## DatePicker 日期选择器 ### 该文档不再维护,新版文档地址: [form-create 文档](http://fc.gd8.top) #### [在线预览](https://jsru ...
Ant Design Vue DatePicker 日期选择框限制可选时间
背景发送时间需要限制在当前时间分钟之后,比如:当前时间是2022年6月7日12:00,那么时间选择器可选的时间是:在2022年6月7日12:00 之后的. 实现 <a-date-pickers ...
【NG-ZORRO、Angular】日期选择框时间段nz-range-picker设置开始结束时间00:00:00~23:59:59
<nz-range-picker [(ngModel)]="dateRange" nzFormat="yyyy-MM-dd HH:mm:ss" style ...
react 使用antd的日期选择框中文失效，只有年为中文，其他为英文。
环境: antd: 版本 4.22.4 react:版本 18.2.0 报错截图: 从 antd 引入的 DatePicker 日期选择框,按照国际化配置,全局的引入中文包,但是生效的只有年是中文, ...
html日期选择框_第十课日期选择框（datepicker）的操作
有客户问:datepicker是怎么操作的? 我答:datepicker可以直接用"输入文本"组件. 客户说:不是,现在我操作的这个网页上datepicker是不能直接输入的,否则 ...
antd 日期时间选择_antd-mobile的DatePicker日期选择组件使用
现在项目上有个需求,在时间选择上需要精确到分钟,且分钟只能是0分钟或者是30分钟. 其中组件有个minuteStep参数,将其设置成30,即可只显示0分钟或者30分钟了. 但是在选择的时候发现了问题, ...
重构ElementUI解决DatePicker日期选择组件修改父组件placement参数问题[Vue.js项目实践: 新冠自检系统]
新冠疫情自我检测系统网页设计开发文档 Sylvan Ding 的第一个基于 Vue.js 的项目. 本项目所提供的信息,只供参考之用,不保证信息的准确性.有效性.及时性和完整性,更多内容请查看国家卫健 ...
nui— DatePicker：日期选择框
5.12 DatePicker:日期选择框转至元数据结尾创建: 未知用户 (zhangping),最新修改于: 八月 07, 2015 转至元数据起始创建DatePicker 只需要一个id即可 ...

Ant组件——DatePicker 日期选择框

相关文档

业务需求

代码示例

3. 总结

Ant组件——DatePicker 日期选择框相关推荐

最新文章

热门文章