移动端贼好用的时间选择插件

最新推荐文章于 2025-06-15 09:21:15 发布

原创最新推荐文章于 2025-06-15 09:21:15 发布 · 1.2w 阅读

4 ·

CC 4.0 BY-SA版权

炒鸡酷炫专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一个使用Mobiscroll插件实现的日期选择器示例，展示了如何配置参数以实现特定的日期选择功能，包括显示方式、语言设置、按钮文本、日期格式等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

mobiscroll

官方地址：https://mobiscroll.com/

下载地址： https://share.weiyun.com/5u6WDqi

<input type="text" id="txtBirthday" name="birthday" value=""/>


    var currYear = (new Date()).getFullYear();
    var opt = {
        theme: "android-ics light",
	    display: 'modal', //显示方式
	    lang: "zh",
	    setText: '确定', //确认按钮名称
	    cancelText: "取消",
		endYear: currYear,//结束时间
	    dateFormat: 'yyyy-mm', //返回结果格式化为年月格式
	    dateOrder: 'yyyymm', //面板中日期排列格式
	    onBeforeShow: function (inst) {
	         //	console.info( inst.settings.wheels);
	    },
	    headerText: function (valueText) { //自定义弹出框头部格式
	         array = valueText.split('-');
	         return array[0] + "年" + array[1] + "月" ;
	    },
	    onSelect: function (valueText, inst) {//选择时事件（点击确定后），valueText 为选择的时间，
	         var selectedDate = valueText;
	         console.log(selectedDate)
	    }
	};
	$("#txtBirthday").mobiscroll().date(opt);