mobiscroll日历控件

最新推荐文章于 2025-05-18 16:49:17 发布

转载最新推荐文章于 2025-05-18 16:49:17 发布 · 1.2k 阅读

文章标签：

#mobiscrollk

H5 专栏收录该内容

13 篇文章

订阅专栏

本文展示了如何使用Mobiscroll插件进行下拉列表和日期选择器的配置。通过具体的HTML和JS代码示例，详细介绍了选择业务类型及设置开始和结束日期的方法。

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

经过个人整理，代码简单，随时可用，话不多说，直接看代码。（重点：控件资源在我的资源里面）

html部分

<div>
				      <div><span>请选择业务类型</span></div>
						<div class="box_ui">
							<ul id="sex-list" style="display: none;">
								<li>全部</li>
								<li>部分</li>
							</ul>
						</div>
					</div>
					<div>
						<div><span>开始日期</span></div>
						<div class="start-data">2018/05/20</div>
					</div>
					<div>
						<div><span>结束日期</span></div>
						<div class="end-data">2018/06/20</div>
					</div>

js部分

                var defaultValues="";
	   	var defaultValue= "";
		//选择全部
		mobiscroll.treelist("#sex-list",{  
		                theme: "ios",  
		                lang: "zh",  
		                display: 'bottom', 
		                defaultValue:[defaultValue],
		                inputClass: 'tmps',
		                placeholder:"全部",
		                headerText: '请选择业务类型',  
		                onClose: function (valueText) { 
		                	 defaultValue = valueText.valueText;
		                    var m = $(this).find("li").eq(valueText.valueText).html();
		                    $(".tmps").val(m);
		                }
		            });
		 //开始日期
		 mobiscroll.date(".start-data",{  
		                theme: "ios",  
		                lang: "zh",  
		                display: 'bottom', 
		                defaultValue:[defaultValue],
		                inputClass: 'start-data',
		                //placeholder:"2018/05/20",
		                headerText: '开始日期',  
		                onClose: function (valueText) { 
		                	 defaultValue = valueText.valueText;
		                    $(".start-data").html(defaultValue);
		                }
		            });
		//结束日期
		 mobiscroll.date(".end-data",{  
		                theme: "ios", //皮肤其他参数【android-ics light】【android-ics】【ios】【jqm】【sense-ui】【sense-ui】【sense-ui】 
		                lang: "zh",  
		                display: 'bottom',//显示方【modal】【inline】【bubble】【top】【bottom】
		                defaultValue:[defaultValue],
		                inputClass: 'end-data',//定义class
		                //placeholder:"2018/06/20",//默认值
		                headerText: '结束日期',//弹出框显示title
		                setText:"确定",
		                cancelText:"取消",
		                //rows:2,
		                startYear: (new Date()).getFullYear(), //开始年份
                		endYear: (new Date()).getFullYear() + 9, //结束年份
		                onClose: function (valueText) { 
		                	 defaultValue = valueText.valueText;
		                    $(".end-data").html(defaultValue);
		                }
		          });