Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
程序员文章站
2023-11-02 13:37:46
具体代码如下所述:
具体代码如下所述:
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>vue.js中使用iview日期选择器并设置开始时间结束时间校验</title> <!-- import vue.js --> <script src="//vuejs.org/js/vue.min.js"></script> <!-- import stylesheet --> <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css" rel="external nofollow" > <!-- import iview --> <script src="//unpkg.com/iview/dist/iview.min.js"></script> </head> <body> <div id="app"> <template> <row> <col span="12"> 开始时间: <date-picker type="datetime" v-model="starttime" placeholder="请选择开始时间" :options="starttimeoption" @on-change="onstarttimechange"></date-picker> </col> <col span="12"> 结束时间: <date-picker type="datetime" v-model="endtime" placeholder="请选择结束时间" :options="endtimeoption" @on-change="onendtimechange"></date-picker> </col> </row> </template> </div> <script> new vue({ el: '#app', data() { return { starttime: '', endtime: '2018-08-11 23:59:59', starttimeoption: {}, endtimeoption: {} } }, mounted() { this.starttime = '2018-08-08 00:00:00' this.endtime = '2018-08-11 23:59:59' this.onstarttimechange(this.starttime) this.onendtimechange(this.endtime) }, methods: { /** * 开始时间发生变化时触发,设置结束时间不可选择的日期 * 结束时间应大于等于开始时间,且小于等于当前时间 * @param {string} starttime 格式化后的日期 * @param {string} type 当前的日期类型 */ onstarttimechange(starttime, type) { this.endtimeoption = { disableddate(endtime) { return endtime < new date(starttime) || endtime > date.now() } } }, /** * 结束时间发生变化时触发,设置开始时间不可选择的日期 * 开始时间小于等于结束时间,且小于等于当前时间 * @param {string} date 格式化后的日期 * @param {string} type 当前的日期类型 */ onendtimechange(endtime, type) { this.starttimeoption = { disableddate(starttime) { return starttime > new date(endtime) || starttime > date.now() } } } } }) </script> </body> </html>
总结
以上所述是小编给大家介绍的vue.js中使用iview日期选择器并设置开始时间结束时间校验功能,希望对大家有所帮助