Mui自定义日期选择

最新推荐文章于 2023-08-16 09:17:32 发布

原创最新推荐文章于 2023-08-16 09:17:32 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5 #css3

H5 同时被 3 个专栏收录

5 篇文章

订阅专栏

MUI

1 篇文章

订阅专栏

日期选择

1 篇文章

订阅专栏

本文介绍了如何利用Mui实现自定义日期选择的功能，通过代码参考和实际效果展示，提供了通用的解决方案。

一、前言

本文简单阐述调用mui日期选择，实现自定义日期选择的通用代码。

二、实际效果图

三、代码参考

/*
 * 先引入必要文件 js css 文件后
 */

// 日期选择
    mui('body').on('tap', '#dom', function() {
        var d = new Date();
        var m = d.getMonth();
        var day = d.getDate();
        var year = d.getFullYear();
        var dtPicker = new mui.DtPicker({
            "type": "date",
            "beginYear": year,
            "endYear": year + 1,
            //区间内的日期
            "beginDate": new Date(year, (m > 9 ? m : '0' + m), (day > 9 ? day : '0' + day)), //设置开始日期  
            "endDate": new Date(year + 1, (m > 9 ? m : '0' + m), (day > 9 ? day : '0' + day)) //设置结束日期    
        });
        dtPicker.show(function(rs) {
            console.log('选择结果: ' + rs.text);
            
        });
    });

四、总结

var dtPicker = new mui.DtPicker({               
        type: "date", // 设置日历初始视图模式。  type：date datetime month time  hour 几种选择
        beginDate: new Date(2019, 1, 1), // 设置开始日期   年月日
        endDate: new Date(2020, 1, 1), // 设置结束日期    
        labels: ['年', '月', '日'] // 设置默认标签区域提示语  随意设置也设置年月日
    });            
    dtPicker.show(function(e) {                  
        console.log(e)         
    });