VUE iview date-picker取时间范围...

x

HTML

<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" v-bind:options="optionsDate"></date-picker>
        </i-col>
    </row>
</div>

JS

    var Main = {
        data () {
            return {
              optionsDate: {
                  disabledDate: function (date) {
                      var disabledDay = date.getFullYear();             //取1950年至今的时间范围.
                      return disabledDay <= 1949 || date.valueOf() > Date.now();
                  },
              },
            }
        },
        methods: {
        }
    }

var Component = Vue.extend(Main)
new Component().$mount(‘#app‘)

在jsfiddle中运行即可看到效果...

x

原文地址:https://www.cnblogs.com/love-zf/p/9949690.html

时间: 2024-08-30 16:47:05

VUE iview date-picker取时间范围...的相关文章

Date Picker控件:

Date Picker控件: 中文:日期/时间选取器 UIDatePicker有一个实例方法setDate:animated,以编程的方式选择日期. UIDatePicker有四种模式(model): Time(只选时间) Date(只选日期) Date and Time(选择时间和日期) Count Down timer (倒数计时器 ) 日期选取器不允许指定秒或时区 属性: locale:选择地区 custom:自定义时间 设置最小时间和最大时间,超过就会自动回到最小时间 // 添加一个时间

iOS开发UI篇—Date Picker和UITool Bar控件简单介绍

iOS开发UI篇—Date Picker和UITool Bar控件简单介绍 一.Date Picker控件 1.简单介绍: Date Picker显示时间的控件 有默认宽高,不用设置数据源和代理 如何改成中文的? (1)查看当前系统是否为中文的,把模拟器改成是中文的 (2)属性,locale选择地区 如果默认显示不符合需求.时间有四种模式可以设置,在model中进行设置 时间可以自定义(custom). 设置最小时间和最大时间,超过就会自动回到最小时间. 最大的用途在于自定义键盘:弹出一个日期选

Freebie: Date Picker Calendar Demo Form For Oracle Forms 6i

I have already posted and provided the required PLSQL Library and the Calendar FMX file in my previous blog post Date Picker Calendar For Oracle Forms but some people were still not able to use this utility in their forms, so I thought to provide a d

Date Picker Calendar For Oracle Forms 6i

Giving date picker calendar option to user for date type fields in Oracle Forms. I am providing you the form (FoxCal.Fmx) and two libraries (General.plx and Calendar.pll). You can download these files by clicking below link: Download Form and require

Date Picker和UITool Bar控件简单介绍

Date Picker和UITool Bar控件简单介绍 一.Date Picker控件 1.简单介绍: Date Picker显示时间的控件 有默认宽高,不用设置数据源和代理 如何改成中文的? (1)查看当前系统是否为中文的,把模拟器改成是中文的 (2)属性,locale选择地区 如果默认显示不符合需求.时间有四种模式可以设置,在model中进行设置 时间可以自定义(custom). 设置最小时间和最大时间,超过就会自动回到最小时间. 最大的用途在于自定义键盘:弹出一个日期选择器出来,示例代码

asp.net使用My97 Date Picker时设置默认起始时间为n年之前的今天

可以使用My97 Date Picker组件来收集用户输入的日期值. 首先下载该组件:http://www.my97.net/dp/index.asp放到自己的项目中. 然后在项目里面引用js和css文件,例如: <script language="javascript" type="text/javascript" src="./My97DatePicker/WdatePicker.js"></script> <l

Vue.filter date

Vue.filter('date', function(value, format) { var o = { "M+": value.getMonth() + 1, // 月份 "d+": value.getDate(), // 日 "h+": value.getHours(), // 小时 "m+": value.getMinutes(), // 分 "s+": value.getSeconds(), /

Vue iview中的render小案例3

当我按下play.穿梭在大街小巷没什么不对.每个人都会.只是你在束缚自己.快来做个一等一的player.要求自己不能够太普通.一定必须要去做点成就 Vue iview中的render小案例 第一个数据比较好拿是对象直接.就可以,第二个是数组所以需要遍历会麻烦些 工序一道也少不了,就像下面迟早会补齐的 每天记录一点点 { title: "场馆地址", // key: "gymnasium.name" render: (h, params) => { return

webpack+vue+iview使用vue-cli脚手架搭建

1.安装nodejs环境 下载node.js.安装成功后再控制台输入 node -v 出现版本号则,安装成功. 如果没有出现 版本号 而是出现node 不是内部命令的话 需要配置一下环境变量,如果已经出现版本号,此步骤可以忽略.将安装node的路径剪切,右键我的电脑-->属性-->高级系统环境设置-->环境变量-->找到path环境变量.加上复制的node的安装路径. 2.可以在控制台在输入一下命令,查看是否已经成功的安装了npm   npm -v  如果出现版本号说明已经安装成功