mui提供了日期选择器的插件,具体如何使用呢。

通过new mui.DtPicker()初始化DtPicker组件。

var dtPicker = new mui.DtPicker(options);

显示picker

dtPicker.show( SelectedItemsCallback )

例子:

var dtPicker = new mui.DtPicker(); 
dtPicker.show(function (selectItems) { 
	console.log(selectItems.y);//{text: "2016",value: 2016} 
	console.log(selectItems.m);//{text: "05",value: "05"} 
})

既然是mui自带的,那么自然使用时一定要调用他们的css和js:

<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
<script src="../js/mui.min.js"></script>
<script src="../js/mui.picker.min.js"></script>

回归主题,既然说是如何指定显示其他视图,很多人可能不理解这句话的意思,既然是视图,那自然是日期选择器打开后显示的样子,mui默认为显示年月日时分。它们也组装好了好几种显示方式,例如:年视图(年月日)、时间视图(时分)、月视图(年月)、时视图(年月日时)等等;但是有时客户需求并不是这些,而是我只需要显示月日绑定月日或者我只显示日和绑定日怎么办呢,接下来就告诉大家如何新增方法实现客户的需求。

如下图:

MUI日期选择器如何指定显示其他视图-Monkey前端博客

以客户需求为只显示月日和绑定月日为例:

首先我们需要找到他们的插件,找到mui.picker.min.js然后我们看到其余对应的方法,例如case"month":n.value=n.y.value+"-"+n.m.value,n.text=n.y.text+"-"+n.m.text;break;,这个就是mui自带的月视图,我们复制一份出来,在后面添加case"monthday":n.value=n.m.value+"-"+n.d.value,n.text=n.m.text+"-"+n.d.text;break;,有些没有读mui文档的人会问这事什么意思呢?这边我也跟大家说明下,大神就略过这一句。

  • n.value 拼合后的 value
  • n.text 拼合后的 text
  • n.y 年,可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
  • n.m 月,用法同年
  • n.d 日,用法同年
  • n.h 时,用法同年
  • n.i 分(minutes 的第二个字母),用法同年

看了这个后你就明白了其实就是和jq的日期一样的哈,很好理解,所以你只要根据你想要的设置相对应的值即可。

第二步设置样式:

/*月日*/
[data-type="monthday"] .mui-picker,
[data-type="monthday"] .mui-dtpicker-title h5 {
	width: 50%;
}
[data-type="monthday"] [data-id="picker-i"],
[data-type="monthday"] [data-id="title-i"],[data-type="monthday"] [data-id="picker-h"],
[data-type="monthday"] [data-id="title-h"],[data-type="monthday"] [data-id="picker-y"],
[data-type="monthday"] [data-id="title-y"]  {
	display: none;
}

因为只显示两个,所以宽度为50%,把其余不需要的值全部隐藏掉,这样选择日期选择器的时候自然而然的就只显示了月和日的列表。

最后一步:

html中在我们要点击的按钮中添加data-options='{"type":"monthday"}',例如:

<button id='demo1' data-options='{"type":"monthday"}' class="btn mui-btn mui-btn-block">选择月日 ...</button>

javascript:

var btns = $('.btn');
btns.addEventListener('tap', function() {
	var optionsJson = this.getAttribute('data-options') || '{}';
	var options = JSON.parse(optionsJson);
	var id = this.getAttribute('id');
	var picker = new $.DtPicker(options);
	picker.show(function(rs) {
		btns.innerText = '选择结果: ' + rs.text;
	})
})

到这里就实现了,有需要的朋友可以查看下面的效果或者下载链接下载即可使用。这方法也是博主自己研究出来的,如有更好的方法,欢迎留言至下方一起分享,谢谢

[url href=链接地址]查看效果[/url]

[url href=链接地址]下载链接[/url]