iView里的日期控件（DatePicker）范围初始化

「爱情、让人受尽委屈。」 2022-09-03 08:27 414阅读 0赞

iView里有个日期控件：[DatePicker][]，功能很强，还支持时间范围，太贴心了。照以往，一般是要设置2个时间选取控件的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70_pic_center]  
但问题是，如何用初始值去初始化它呢？  
答案是赋给它一个时间数组，数组2个元素，一个开始时间，一个结束时间，都是Date类型。

<FormItem label="预警日期" prop="dtRange">
      <DatePicker type="datetimerange" format="yyyy年MM月dd日HH时mm分" v-model="form1.dtRange" placeholder="请选择预警日期范围" ></DatePicker>
    </FormItem>
    
    <script> function getAlertDateRange (dt) { let st = new Date(dt.valueOf()) st.setMinutes(0)//分钟清零 let ft = new Date(st.valueOf()) ft = new Date(ft.setDate(ft.getDate() + 1))//时间范围相隔1天 return [st, ft] //返回一个日期数组 } export default { data () { return { form1: { dtRange: getAlertDateRange(new Date()), } } } } </script>

[DatePicker]: https://www.iviewui.com/components/date-picker#RQSJXZ
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70_pic_center]: /images/20220829/a54bb9c4d1744482bdb6ae0b38647bf3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，414人围观）

还没有评论，来说两句吧...

相关阅读

相关使用日期选择器控件DatePicker(2)

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="ht

怼烎@/ 2022年09月24日 04:21/ 0 赞/ 211 阅读

相关 iView里的日期控件（DatePicker）范围初始化

iView里有个日期控件：[DatePicker][]，功能很强，还支持时间范围，太贴心了。照以往，一般是要设置2个时间选取控件的。 ![在这里插入图片描述][waterm

「爱情、让人受尽委屈。」/ 2022年09月03日 08:27/ 0 赞/ 415 阅读

相关 jquery datepicker-强大的日期控件

jquery datepicker-强大的日期控件 [admin][] 五月 25, 2013 [Jquery][] [ 1 条评论][1] 在we

小鱼儿/ 2022年08月27日 04:57/ 0 赞/ 224 阅读

相关【Asp.Net】日期控件DatePicker使用

一、前言前几天做项目的时候要用到日期控件，但是在ASP.NET中，没有封装日期控件，第一想法就是百度一下喽~，下面给大家分享如何使用这个控件，扩充一下自己的

深碍√TFBOYSˉ_/ 2022年08月21日 08:53/ 0 赞/ 215 阅读

相关 My97DatePicker日期控件使用

<a target=_blank id="cb_post_title_url" class="postTitle2" href="http://www.cnblogs.

不念不忘少年蓝@/ 2022年07月26日 01:46/ 0 赞/ 267 阅读

相关日期控件My97DatePicker使用实例

My97DatePicker是一个更全面，更人性化，并且速度一流的日期选择控件。具有强大的日期范围限制功能；自定义事件和丰富的API库；多语言支持和自定义皮肤支

客官°小女子只卖身不卖艺/ 2022年05月22日 00:25/ 0 赞/ 279 阅读

相关前端日期控件——My97DatePicker控件用法说明

My97DatePicker是一款功能强大的日期控件先在官网下载控件包官网下载地址：[http://www.my97.net/down.asp][h

分手后的思念是犯贱/ 2022年05月10日 01:54/ 0 赞/ 398 阅读

相关 iview日期控件DatePicker设置不可选择的日期、不可选时间点

近期要做一个预约功能，其中预约日期是有范围限制的，预约的时间点也是按后台配置起止时间的，这就需要前端将不需要的日期和时间设置为不可选择。效果如下： 1、日期按照后台返回，

朴灿烈づ我的快乐病毒、/ 2021年11月26日 14:10/ 1 赞/ 2281 阅读

相关 iview - 日期选择控件datePicker格式

前言 iview日期选择控件少一天问题在时间控件中明明选择的是`2019-05-21`,但是当通过vue的调试器查看的时候，竟然是这样的

缺乏、安全感/ 2021年09月19日 12:58/ 0 赞/ 849 阅读

相关 iview日期控件，双向绑定日期格式

日期在双向绑定之后格式为：2017-07-03T16:00:00.000Z 想要的格式为2017-07-04 调了好久，几乎一天：用一句话搞定了 @on-change

比眉伴天荒/ 2021年07月26日 20:28/ 0 赞/ 434 阅读