cwy_hb
cwy_hb
  • 发布:2016-04-16 12:11
  • 更新:2016-11-17 10:05
  • 阅读:2264

日期选择器

分类:MUI

日期选择器中可以显示年,月。也可以显示年,月,日。怎么改下mui.picker.mui.js文件增加一个单独显示年的?

2016-04-16 12:11 负责人:无 分享
已邀请:
冰霜

冰霜

今天同样有这个年的需求,看了下源码,修改了下实现了年的效果
修改如下:

1、显示是通过样式来控制的,需要修改两个地方
(1)添加年的样式
注意:type是year
<button id='demo6' data-options='{"type":"year"}' class="btn mui-btn mui-btn-block">选择年 ...</button>

在mui.dtpicker.css 最后加
//

[data-type="year"] .mui-picker,
[data-type="year"] .mui-dtpicker-title h5 {
width: 100%;
}
[data-type="year"] [data-id="picker-m"],
[data-type="year"] [data-id="picker-d"],
[data-type="year"] [data-id="picker-h"],
[data-type="year"] [data-id="picker-i"],
[data-type="year"] [data-id="title-m"],
[data-type="year"] [data-id="title-d"],
[data-type="year"] [data-id="title-h"],
[data-type="year"] [data-id="title-i"] {
display: none;
}
(2)在mui.dtpicker.js中添加 ,注:136行的getSelected: function() {这个方法中
case 'year':
selected.value = selected.y.value;
selected.text = selected.y.text;
break;
大功告成。

注:demo中的是引入的压缩文件,自己修改需要引入原文件修改
<link href="../css/mui.picker.css" rel="stylesheet" />
<link href="../css/mui.dtpicker.css" rel="stylesheet" />

<script src="../js/mui.picker.js"></script>
<script src="../js/mui.dtpicker.js"></script>

所以改为自己可以压缩下

该问题目前已经被锁定, 无法添加新回复