EasyUI之下拉框combobox

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

iteye_8264

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

阅读量298

点赞数

文章标签： javascript ViewUI

本文介绍了一个使用EasyUI实现的日期与月份联动选择器。通过一个日期选择器和一个下拉框，用户可以选择日期，而下拉框则显示月份。当用户更改日期时，下拉框会自动更新为所选日期的月份。反之亦然，当下拉框中的月份发生变化时，日期也会随之调整。

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

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）操作下拉框