vue中设置时间选择范围

青旅半醒 2023-06-07 12:17 2阅读 0赞

**vue源码**

<script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/iview/dist/iview.min.js"></script>
    <div id="app">
        <row>
            <i-col span="12">
                <date-picker type="date" :options="options3" placeholder="Select date" style="width: 200px"></date-picker>
            </i-col>
            <i-col span="12">
                <date-picker type="date" :options="options4" placeholder="Select date" style="width: 200px"></date-picker>
            </i-col>
        </row>
    </div>

**js源码**

var Main = {
            data () {
                return {
                    options3: {
                        disabledDate (date) {
                            return date && date.valueOf() < Date.now() - 86400000;
                        }
                    },
                    options4: {
                        disabledDate (date) {
                            const disabledDay = date.getDate();
                            return disabledDay === 15;
                        }
                    }
                }
            }
        }
    
    var Component = Vue.extend(Main)
    new Component().$mount('#app')

**效果如下：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzA2ODc4_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzA2ODc4_size_16_color_FFFFFF_t_70]: /images/20230601/d40d1878365f4d52b6be6841e4d09c00.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Flutter DateTimeRange 日期时间范围选择器

> 在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就

深藏阁楼爱情的钟/ 2023年10月07日 16:27/ 0 赞/ 29 阅读

相关 vue中设置时间选择范围

vue源码 <script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.

青旅半醒/ 2023年06月07日 12:17/ 0 赞/ 3 阅读

相关 layui表单选择时间_layui时间控件选择时间范围

解决layui时间控件清空之后无法正常使用的问题，以及时间范围的选择共有两种解决方式：方式一(layui 1.x)： html代码： placeholder="开始

Love The Way You Lie/ 2023年01月08日 08:11/ 0 赞/ 271 阅读

相关 vue日期选择框之时间范围的使用

> 实现效果如下 ![在这里插入图片描述][20210219173503791.png_pic_center] <a-col :xl="8" :lg="16" :m

朴灿烈づ我的快乐病毒、/ 2022年10月30日 13:23/ 0 赞/ 338 阅读

相关 input日期时间范围选择器

[下载地址![icon-default.png?t=L892][icon-default.png_t_L892]/images/20220828/02dd108a645d423

不念不忘少年蓝@/ 2022年09月12日 12:46/ 0 赞/ 307 阅读

相关 element-ui选择时间范围限制条件

1. 组件属性 <el-date-picker v-model.trim="ruleForm.messTime" type="daterange" range-s

清疚/ 2022年08月31日 06:47/ 0 赞/ 303 阅读

相关 element DateTimePicker 日期时间选择器选择范围限制

内容需求：两个DateTimePicker选择日期范围需要做日期范围限制；开始时间必须小于结束时间；结束时间必须大于开始时间；开始时间和结束时间可以选择同一

今天药忘吃喽~/ 2022年08月29日 13:52/ 0 赞/ 1087 阅读

相关 ElementUI DatePicker 日期选择器控制选择时间范围

选择今天以及今天之后的日期 <el-date-picker v-model="value1" type="date"

比眉伴天荒/ 2021年12月15日 00:37/ 0 赞/ 766 阅读

相关 Vue中时间的设置

设置默认属性 ct\_month: null 方法： //默认显示今天 getdatatime()\{ this.ct\_month= new Date(

Bertha 。/ 2021年11月19日 13:32/ 0 赞/ 347 阅读

相关 vue验证时间范围

验证时间范围 type="daterange" <DatePicker class="formItem" :size="size" v-model="item.transf

Dear 丶/ 2021年11月02日 09:28/ 0 赞/ 407 阅读