日历选择区间

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

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐