vue移动端日历组件 mintUi dateTime picker 设定开始和结束日期

29 篇文章 0 订阅

=====================================追加提示2018.9.17===============================

继续填坑  如果你想修改  这个组件的 取消和确定按钮   则需要像下面的startDate一样

在标签上写  :cancel-text 和 :confirm-text  然后用一个vue变量接一下 设定一下值就可以了

这里我只想吐槽  属性怎么用  完全靠自己猜想   真的是可以了

=====================================追加提示2018.9.17===============================

=====================================追加提示2018.8.13===============================

这里在设置初始时间的时候  又遇到一个bug   你的web页面 在ios 和安卓打开的时候  安卓还好  ios 存在问题!!!!!

这里 楼主原来日期格式 都是 “2018-8-13”的格式 后来发现  如果你用这种格式设置初始时间 ios会有bug  显示错乱

然后 所有都要使用  “2018/8/13” 这种格式  这种格式在ios里 不会报错

=====================================追加提示2018.8.13===============================

==============================正文===========================

首先必须吐槽 mintui

<script src="https://cdn.bootcss.com/mint-ui/2.2.13/index.js"></script>
<link href="https://cdn.bootcss.com/mint-ui/2.2.13/style.css" rel="stylesheet" type="text/css">

这个2.2.13版本中picker 联动  你拉一会就对不上值了  也不知道这么大的bug  mintui自己看不见么  然后搜了一圈

大家推荐2.2.9版本  说这个靠谱点 

这里假设 如果你有一个需求 比如 起始日期为某年的某月  而不是当前时间开始 

那么mintui的 picker 你可以放弃了 

他的这个onValuesChange方法 那叫一个乱 

 这里我友情提示这个方法返回2个参数 第一个参数是picker对象,第二个values里是你联动的选中值的数组,(如下图)

这里还不难  不过如果你想懂官网的这句(下面的图),你会发现官网一个例子都没有,你都不知道咋用,

提示下,也就是这么写,

,

index是values这个数组长度内的值 比如你2列拉动 那么index 就是0,1

如果你3级联动那就是0,1,2          剩下的你自己悟吧

=======================================华丽的分割线=========================================

上面纯属吐槽 ,这个组件太垃圾了。回到我们的要求 如果你想设定拉动的初始值,比如日期的

你需要使用DateTime Picker        这个组件又是一个大坑

(这里我真是服了,包括官网,你们给的api 自己不试么 给别人的例子也不试???????)

来看官网

这是楼主用的,由于业务要求只显示年和月,所以要去掉日,这里尝试删除date-formate 或给他的value设置null和空字符串

均失败!!!!!!!!!!!!!!!!!!!!!!!

就问你服不服这组件,然后楼主没办法只能靠js+css了,没办反,如果你有更好的,可以告诉我

好了,日不显示了,然后就是最大的坑了,设定起止时间

来看官网

然后楼主就写成这个样子,问题来了。 他!不!好!使!!!!!!

然后百度,官网+所有百度到的都是这么写

https://www.cnblogs.com/smallteeth/p/8004462.html   链接1

https://blog.csdn.net/mhlghy/article/details/80269774  链接2

https://blog.csdn.net/thekingyu/article/details/78974852 链接3

我不再挂链接了  反正都是一个样 也没一个好使,我也是服了。最后,还是英语救了楼主

这是js控制台报的弱警告,然后楼主读了一遍 大概明白了 所以做了替换  结果    好!使!了!

哎,这年代,谁都靠不住,只能靠自己,希望这博客能帮助到使用这个组件的人。

我把页面源码挂出来,需要的去下载吧

https://download.csdn.net/download/gaoqiang1112/10571933  链接

  • 6
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 18
    评论
对于Vue移动端UI组件库,有两个比较受欢迎的选择是we-vue和veui。 we-vue是一套基于Vue.js的移动端组件库,结合了weui.css样式库,提供了35+个组件,具有完善的在线文档和详细的在线示例。we-vue适用于微信公众号等移动端开发。你可以在we-vue的官网https://wevue.org/了解更多信息。\[1\] veui是由百度EFE团队开发的Vue企业级UI组件库。目前虽然还没有完整的文档,但有一些示例可供参考。veui的官网是https://ecomfe.github.io/veui/components/#/。你可以耐心等待官方的文档更新。\[2\] 除了we-vue和veui,还有其他一些Vue移动端UI组件库可供选择。例如iView是一套基于Vue.js的开源UI组件库,主要服务于PC界面的中后台产品。iView的组件齐全且更新迅速,有详细的文档和可靠的维护团队。iView已经被许多大型公司如阿里巴巴、腾讯、京东等应用在他们的产品中。你可以在iView的官网https://www.iviewui.com/了解更多信息。\[3\] 希望这些信息对你有帮助! #### 引用[.reference_title] - *1* *2* *3* [16款优秀的Vue UI组件库推荐](https://blog.csdn.net/ywtech/article/details/119610530)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 18
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值