自定义 “至今”选项的日期选择器

实现缘由

有这么一个分享的原因是,我发现很多选择日期的地方都会要求能选择“至今”,但是现在广泛使用的UI库中,都是不支持的。很奇怪,这个需求还是挺常见的,为什么都不支持呢?网上类似的控件也很难找,几乎没找到。所以我自定义了这么一款控件,基于vant picker 来实现的,但是,如果想依赖于其他的UI库,也是比较好迁移过去实现的。

效果图

自定义 “至今”选项的日期选择器_第1张图片

代码分享





如何使用

import CustomDate from "@/components/CustomDate.vue";

 

titleProp: 设置标题,以"-"分隔 实现区间选择的两个标题显示
isMutiprop: 设置是否开启区间选择

实现的原理

主要是基于 vant picker 的 setColumnValues
来实现动态的日期显示,所以,原理其实挺简单,这里也是做一个分享,有需要的小伙伴可以拿来直接用,找不到合适的控件真的很难受。


这里感谢 https://blog.csdn.net/weixin_... 提供了实现的思路,大家也可以看一下这位作者的文章,实现了年月的联动,比较清晰。

你可能感兴趣的:(typescriptvant)