EasyUI之下拉框combobox

最新推荐文章于 2021-10-06 18:38:45 发布

iteye_8264

最新推荐文章于 2021-10-06 18:38:45 发布

阅读量228

点赞数

文章标签： javascript ViewUI

1、实例背景

EasyUI下拉框combobox，实例给出一个日期控件和一个下拉框，选择日期控制下拉框的月份；改变下拉框选项就改变日期的月份。

2、实例源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>EasyUI之下拉框combobox</title>
		<link rel="stylesheet" href="../themes/black/easyui.css" />
		<link rel="stylesheet" href="../themes/icon.css" />
		<link rel="stylesheet" href="../css/demo.css" />
		<script type="text/javascript" src="../js/jquery.min.js" ></script>
		<script type="text/javascript" src="../js/jquery.easyui.min.js" ></script>
		<script>
			$(document).ready(function(){
				$("#datePicker").datebox({
					onSelect:function(date){
						$("#monthSelect").combobox("setValue",date.getMonth()+1);
					}
				});
				
				$("#monthSelect").combobox({
					onChange:function(n,o){
						var date = new Date();
						var month = $(this).combobox("getValue");
						var year = date.getFullYear();
						var day = date.getDate();
						var changeMonth = year + "-" + (month<10?("0"+month):month) + "-" + (day<10?"0"+day:day);
						
						$("#datePicker").datebox("setValue",changeMonth);
					}
				});
			});
			
			function formatterDate(date)
			{
	            var y = date.getFullYear();
	            var m = date.getMonth()+1;
	            var d = date.getDate();
	            return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
	        }
			
	        function myparser(s)
	        {
	            if (!s) return new Date();
	            var ss = (s.split('-'));
	            var y = parseInt(ss[0],10);
	            var m = parseInt(ss[1],10);
	            var d = parseInt(ss[2],10);
	            if (!isNaN(y) && !isNaN(m) && !isNaN(d))
	            {
	                return new Date(y,m-1,d);
	            } 
	            else 
	            {
	                return new Date();
	            }
	        }
		</script>
	</head>
	<body>
		<div class="easyui-panel" style="width:100%;max-width:400px;height: 400px;">
			<div style="margin-bottom:20px">
	            <input id="datePicker" class="easyui-datebox" label="日期:" data-options="formatter:formatterDate,parser:myparser" labelPosition="top" style="width:100%;">
	        </div>
	        <div style="margin-bottom:20px">
	            <select id="monthSelect" class="easyui-combobox" name="month" label="月份:" labelPosition="top" style="width:100%;">
	                <option value="1">一月</option>
	                <option value="2">二月</option>
	                <option value="3">三月</option>
	                <option value="4">四月</option>
	                <option value="5">五月</option>
	                <option value="6">六月</option>
	                <option value="7">七月</option>
	                <option value="8">八月</option>
	                <option value="9">九月</option>
	                <option value="10">十月</option>
	                <option value="11">十一月</option>
	                <option value="12">十二月</option>
	            </select>
	        </div>
	    </div>
	</body>
</html>

3、实例结果

（1）操作日期控件

（2）操作下拉框

iteye_8264

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EasyUI之下拉框combobox

1、实例背景 EasyUI下拉框combobox，实例给出一个日期控件和一个下拉框，选择日期控制下拉框的月份；改变下拉框选项就改变日期的月份。2、实例源码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;EasyUI之下拉框combobox&lt;..
复制链接

扫一扫