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

日历选择区间使用vant.js的calendar日历，由于特定场景需要自定义日期区间（代码中默认选择昨天和今天）重点：:default-date**vant.js传的时间 (2021, 11, 1),需要转为Wed Dec 01 2021 00:00:00 GMT+0800 (中国标准时间) ----new Date(2021, 11, 1):poppable="false"将 poppable

Glowworms浠

16159人浏览 · 2022-02-23 15:13:04

Glowworms浠 · 2022-02-23 15:13:04 发布

日历选择区间

使用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);