使用Vant完成DatetimePicker 日期的选择器

效果演示：

代码

<template><div>
<!--    输入框形式--><van-fieldreadonlyclickablename="calendar":value="timeValue"label="日期选择："placeholder="发生事故的时间点"@click="showPopFn()"/><br/><br/><!--    按钮框形式--><van-button plain type="primary" @click="showPopFn()">点击选择日期</van-button><van-field v-model="timeValue" placeholder="选择的日期结果" readonly/><van-popup v-model="show" position="bottom" :style="{ height: '40%' }"><van-datetime-picker v-model="currentDate" type="date" @change="changeFn()" @confirm="confirmFn()"@cancel="cancelFn()"/></van-popup></div>
</template><script>export default {data() {return {msg: '',currentDate: new Date(),changeDate: new Date(),show: false, // 用来显示弹出层timeValue: ''}},methods: {showPopFn() {this.show = true;},showPopup() {this.show = true;},changeFn() { // 值变化是触发this.changeDate = this.currentDate // Tue Sep 08 2020 00:00:00 GMT+0800 (中国标准时间)},confirmFn() { // 确定按钮this.timeValue = this.timeFormat(this.currentDate);this.show = false;},cancelFn(){this.show = true;},timeFormat(time) { // 时间格式化 2019-09-08let year = time.getFullYear();let month = time.getMonth() + 1;let day = time.getDate();return year + '年' + month + '月' + day + '日'}},mounted() {this.timeFormat(new Date());}}
</script><style>
</style>

注意：如果是按需引入的话，记得在main.js里面引入相应的文件奥。

// main.js文件里面的部分代码
import {Button} from 'vant'
import { DatetimePicker } from 'vant';
import { Popup } from 'vant';
import { Field } from 'vant';Vue.use(Button)
Vue.use(DatetimePicker)
Vue.use(Popup)
Vue.use(Field);

使用Vant完成DatetimePicker 日期的选择器相关推荐

DateTimePicker 日期时间选择器报错 Cannot read property ‘getHours‘ of undefined, 无法选中`[__ob_: observer__]`时做判断
我在一次开发中遇到了这个情况:使用DateTimePicker 日期时间选择器,出现无法选中, 报错 Cannot read property 'getHours' of undefined, 这个原 ...
DateTimePicker 日期时间选择器设置默认时间
DateTimePicker 日期时间选择器设置默认时间 default-value属性接受一个数组,第一项为开始时间,第二项为结束时间,时间格式为:"YY-mm-dd HH:mm:ss&q ...
DateTimePicker 日期时间选择器,清空事件。并添加默认当前时间，向前推进7天的事件
当我们使用DateTimePicker 日期时间选择器,发现我们需要添加需求清空当前时间,并添加当前默认时间的时候,DateTimePicker 日期时间选择器的清空按钮并不能直接满足我们的需求,所以 ...
element-plus DateTimePicker 日期时间选择器禁止选择当日之前的日期
vue3使用element-plus的DateTimePicker 日期时间选择器组件时,禁止选择当日之前的日期. 在el-date-picker使用disabled-date: <el-dat ...
bootstrap，datetimepicker日期时间选择器-限制时间段，以及中文显示问题
基于bootstrap的css,js bootstrap-datetimepicker的css,js <script src="jquery-1.11.1.min.js"&g ...
【ElementUI】DateTimePicker 日期时间选择器，设置 disabledDate 禁用今天之后的时间后，今天的日期选择不了的问题
首先,在选用 ElementUI 关于时间的选择器时,通常会设置今天之后的时间不可选或者今天之前的时间不可选等其他关于时间限制的需求. 那么参考相关文章和官方文档之后,我们可以知道,我们需要使 ...
DateTimePicker 日期时间选择器默认当前日期和时间
<el-date-pickerv-model="ruleForm.AJSBRQ"value-format="yyyy-MM-dd HH:mm:ss":de ...
elementUI中DateTimePicker 日期时间选择器自定义开发，固定时间段，修改时间后取当前输入作为时间段起始
最近项目需求默认时间段前一天20:00 - 第二天8:00,更改日期选择后,快捷选项以更改后的时分秒范围来取值,记录一下. 组件代码: <el-date-picker v-model=" ...
关于Element UI中日期时间选择器在IE浏览器中初始化显示的兼容性问题
一.简单说明项目使用Vue+Element UI进行开发,使用了 DateTimePicker 日期时间选择器. 二.问题描述打开修改对话框(进行选择日期操作可以正常显示),在谷歌浏览器中初始化时 ...

使用Vant完成DatetimePicker 日期的选择器

使用Vant完成DatetimePicker 日期的选择器相关推荐

最新文章

热门文章