easyui框架的使用，定制日历控件

最新推荐文章于 2024-04-15 09:31:50 发布

原创最新推荐文章于 2024-04-15 09:31:50 发布 · 840 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

前端框架专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用前端框架中的预置控件，如EasyUI的日历控件，来简化用户数据输入控件的开发过程，提高开发效率并增强控件的重用性。

信息系统需要通过不同的输入控件采集用户数据。程序员需要制作特定的控件，以方便用户填写数据以及控制用户输入数据的格式。如果完全由程序员从零开始来通过javascript、css和html来编写输入控件，会带来繁重的工作量。前端框架的诞生，为程序员提供了常用的、现成的控件，起到提高程序的开发效率和控件的重用性的作用。

引用：

	<link rel="stylesheet" type="text/css" href="easyui-1.6.2/themes/default/easyui.css">
  	<link rel="stylesheet" type="text/css" href="easyui-1.6.2/themes/icon.css">
  	<script type="text/javascript" src="easyui-1.6.2/jquery.min.js"></script>
  	<script type="text/javascript" src="easyui-1.6.2/jquery.easyui.min.js"></script>

说明：

日历控件能提供每周初始日期的选择。能对特殊的日期打上标记，突出显示。
选中日期，单击右键，显示菜单栏，可为日期打上标记，点击取消按钮可取消标记。

在这里插入图片描述

代码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  	<link rel="stylesheet" type="text/css" href="easyui-1.6.2/themes/default/easyui.css">
  	<link rel="stylesheet" type="text/css" href="easyui-1.6.2/themes/icon.css">
  	<script type="text/javascript" src="easyui-1.6.2/jquery.min.js"></script>
  	<script type="text/javascript" src="easyui-1.6.2/jquery.easyui.min.js"></script>
  	<style scoped="scoped">
        .md{
            height:16px;
            line-height:16px;
            background-position:2px center;
            text-align:right;
            font-weight:bold;
            padding:0 2px;
            color:red;
        }
    </style>
  	<script type="text/javascript">
  	$(function(){
  	  $('#ss').combobox({
  	  	onSelect:function(param){
  	  		$('#calendar').calendar({   
    			current:new Date(),
    	 		firstDay:param.value,
    	 		onSelect: function(date){
    	 			var d=date.getDate();
    	 			$(document).bind("contextmenu", function(e){ return false; });
				     /*为日期绑定右键*/
				    $(this).bind('contextmenu',showContextMenu);
				    $("#m-ok").click(function(){
				        $(".calendar-selected").html("<div class='icon-ok md'>" + d + "</div>");
			    	});
			    	$("#m-search").click(function(){
				        $(".calendar-selected").html("<div class='icon-search md'>" + d + "</div>");
			    	});
			    	$("#m-cancel").click(function(){
				        $(".calendar-selected").html(d);
			    	});
				}
			});
  	  	}
  	  });	
  	});
/*显示菜单栏*/
  	function showContextMenu(e){
		$("#menu").menu("show",{left:e.pageX,top:e.pageY});
	}

  	</script>
  </head>
  <body>
  	请定义一周的第一天：<br>
  	<select id="ss" class="easyui-combobox" name="dept" style="width:150px;margin-bottom:10px">  
	    <option value="0">星期天</option>  
	    <option value="1">星期一</option>  
	    <option value="2">星期二</option>  
	    <option value="3">星期三</option>  
	    <option value="4">星期四</option> 
	    <option value="5">星期五</option>
	    <option value="6">星期六</option>
	</select>  

	<div id="calendar" style="width:250px;height:250px;" ></div>

	<div id="menu" class="easyui-menu" style="width:150px;">
		<div id="m-ok"><img src="easyui-1.6.2/themes/icons/ok.png"></div>
		<div id="m-search"><img src="easyui-1.6.2/themes/icons/search.png"></div>
		<div id="m-cancel">取消</div>
	</div>
  </body>
</html>