在mui中dtpicker日期时间选择器上增加自定义文字

在mui中dtpicker日期时间选择器上增加自定义文字

想在mui中dtpicker日期时间选择器上增加自定义文字，用于标识当前是在设置那一项内容，如当前是“常规示例”，还是”设定年份区间“,查了下这个组件没有这个属性可以设置呀，只能自已动手了

例子引用了mui.picker.min.css及mui.picker.min.js,

mui.picker.min.js是压缩了的，不便于调试

将例子里的引用mui.picker.min.js换为mui.picker.js及mui.dtpicker.js，找到文件mui.dtpicker.js打开来看看,在js内容里可以看到确定取消的定义,在确定取消中间加入自定义的文本看看效果

说干就干,加入   <span>选择日期</span>\

看看效果如何,想要的文字是有了但样式不好看，需要调整

 将<span>选择日期</span>\改为如下

<div style="width:100%;text-align: center; position: absolute;top:10px;color:#000000"><span data-id="header-title" >选择我的日期</span></div>\

至此样式应该算是基本满足要求了，但还没有达到动态设置的效果

在组件中init加入 

headerTitle: $('[data-id="header-title"]', _picker)[0],

定义 _setHeaderTitle

在_create添加

options.headerTitle = options.headerTitle || '请选择';
//设定标题
			self._setHeaderTitle();

在未设置时的效果

使用样例

<button id='demo1' data-options='{"headerTitle":"选择日期时间..."}' class="btn mui-btn mui-btn-block">选择日期时间 ...</button>
				<h5 class="mui-content-padded">设定年份区间</h5>
				<button id='demo2' data-options='{"type":"date","beginYear":2014,"endYear":2016,"headerTitle":"选择日期..."}' class="btn mui-btn mui-btn-block">选择日期 ...</button>
				<h5 class="mui-content-padded">设定选中的时间</h5>
				<button id='demo3' data-options='{"value":"2015-10-10 10:10","beginYear":2010,"endYear":2020,"headerTitle":"选择设定选中的日期时间..."}' class="btn mui-btn mui-btn-block">选择日期时间 ...</button>

最终效果