vant.js-van-calendar日历-日期选择（自定义区间选择/ios的Invalid Date格式）

Glowworms浠

已于 2022-03-14 11:30:25 修改

阅读量1.6w

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue.js

于 2022-02-23 15:13:04 首次发布

本文链接：https://blog.csdn.net/weixin_45533739/article/details/123089454

本文介绍了如何使用vant.js的calendar组件实现自定义日期范围选择，并解决iOS上时间格式问题。重点在于将`default-date`转换为标准格式，并确保跨平台兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

日历选择区间

使用vant.js的calendar日历，由于特定场景需要自定义日期区间（代码中默认选择昨天和今天）

重点：

:default-date**
vant.js传的时间 (2021, 11, 1),需要转为Wed Dec 01 2021 00:00:00 GMT+0800 (中国标准时间) ----new Date(2021, 11, 1)
发现在ios上面不会返回上面标准时间的格式，返的却是Invalid Date，需要用new Date('2022/03/14')格式

:poppable="false"将 poppable 设置为 false，日历会直接展示在页面内，而不是以弹层的形式出现。
type 选择类型:
single 表示选择单个日期，
multiple 表示选择多个日期，
range 表示选择日期区间
min-date 可选择的最小日期
max-date 可选择的最大日期
default-date 默认选中的日期，type 为 multiple 或 range 时为数组，传入 null 表示默认不选择

<van-calendar 
	title="选择时间" 
	color="#3f7aff" 
	:poppable="false" 
	type="range" 
	@confirm="onConfirm" 
	:min-date="minDate" 
	:max-date="today" 
	:default-date=[yesterday,today]
	:style="{ height: '80vh' }">
</van-calendar>

<script type="text/javascript">
 var vm = new Vue({
		el:'#app',
		data:{
            showtime:false,
            minDate:new Date(2021, 11, 1),//Wed Dec 01 2021 00:00:00 GMT+0800 (中国标准时间)
            today:'',
            yesterday:'',
		},
		methods:{
            onConfirm(values){
                const formatDate = (date) => `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
                const [start, end] = values;
                let start1 = formatDate(start);
                let end1 = formatDate(end);
                //console.log('----',`${((new Date(start1.replace(/-/g, '/'))).getTime())/1000} - ${((new Date(end1.replace(/-/g, '/'))).getTime())/1000}`);
                //时间戳
                api.sendEvent({
                    name: 'mytimeEvent',
                    extra: {
                        start_time:((new Date(start1.replace(/-/g, '/'))).getTime())/1000,
                        end_time:((new Date(end1.replace(/-/g, '/'))).getTime())/1000
                    }
                });
            },
            set_time(time){
                let date = new Date(time * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
                let Y = date.getFullYear() + '/';
                let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '/';
                let D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate());
                // let h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours())+ ':';
                // let m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes())+ ':';
                // let s = (date.getSeconds()< 10 ? '0'+date.getSeconds() : date.getSeconds());
                return Y+M+D;
            }
		}
})
</script>

//获取今天日期-vant里面要传的格式Wed Feb 23 2022 00:00:00 GMT+0800 (中国标准时间)
let t1 = vm.set_time((Date.parse(new Date()))/1000)
vm.today=new Date(t1);

//获取昨天日期-vant里面要传的格式Tue Feb 22 2022 00:00:00 GMT+0800 (中国标准时间)
let y1 = new Date();
y1.setTime(y1.getTime()-24*60*60*1000);
let s1 = y1.getFullYear()+"/" + (y1.getMonth()+1) + "/" + y1.getDate();
vm.yesterday = new Date(s1);