mui 如何设置只有年份选择器

来源:互联网 发布:xap格式软件下载 编辑:程序博客网 时间:2024/06/06 15:50

日期选择器上mui给了很多类型,但是在项目中使用到的只存在年份,该如何设置那?

1.引入mui的任一选择器保证选择器能够正常运行
2.将这两个注释的文件引入自己的页面中,注意先后顺序,放在 picker.min.css和 js 文件的最后




3.修改引入的 dtpicker.css 文件,添加type的新类型,在文件最后敲入以下代码

/*年*/[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;}

4.在 dtpicker.js 文件找到以下位置



添加 case 的类型,就是上面设置的type的类型

case 'year':selected.value = selected.y.value;selected.text  = selected.y.text;break;

5.最后,修改HTML页面中使用的type类型