uniapp 自定义 picker “取消”及“完成”文字

html-css015

uniapp 自定义 picker “取消”及“完成”文字,第1张

uniapp picker组件并无可以修改“完成”和“取消”文字的属性,直接改源码则比较麻烦,故可以通过css伪类的方式来修改:

如上图,将uniapp自带的文字颜色强制改为白色,为其添加伪类并设置伪类的文字和颜色,即可实现“完成”文字的自定义修改;

同理,自定义“取消”,为类名为uni-picker-action-cancel的标签设置相应的伪类即可

效果图:

首先,我们将这款日期控件下载下来。百度bootstrap-daterangepicker即可。

2

下载下来解压的文件。

主要文件有

daterangepicker.js

moment.js

bootstrap.min.css

daterangepicker-bs3.css

即两个js文件,两个css文件。

3

我们先打开demo看一下。

这个日历效果很好,外形也十分美观。

4

打开demo的代码,小编就以demo为例,来介绍一下这款日期控件的用法。

首先,我们可以看到,这里有一个input。

然后js中通过id“#reservation”来定位这个input,使它成为一个日期控件。

激活日期控件的方法很简单(无参数法)

$('#reservation').daterangepicker()

这样就可以建立一个最简单日期选择器了。

5

加参数的日历可以通过自己修改初始化参数来选择自己要用的日期选择器。

bootstrap的这款控件还是相当强大的,几乎可以满足你的一切要求。

在参数的设置下,你可以得到各种各样的日期选择格式。

6

具体的参数列表在bootstrap的官网上可以找到,介绍还算清楚。地址如图。

但一般用不到那么多,需要改的一般就是format、weekStart、startView等。