zoukankan      html  css  js  c++  java

  • Jquery 日期控件

     

     JQuery是一款非常优秀的脚本框架，其丰富的控件使用起来也非常简单，配置非常灵活。下面做一个使用日期插件datapicker的例子。 

    1、下载jQuery核心文件就不用说了吧，datepicker是轻量级插件，只需jQuery的min版本就行了，然后到官网http://jqueryui.com/download下载jquery-ui压缩包（可以选择喜欢的theme），里面就包含对datepicker的支持，当然您也可以网站http://marcgrabanski.com/pages/code/jquery-ui-datepicker下载datepicker，包括ui.core.js和ui.datepicker.js。

    2、在HTML中引用下载下来的js文件： 

    ///jquery-1.5.1.min.js

    //js/jquery.ui.core.js

     //js/jquery.ui.datepicker.js
     

     

     

    3.在HTML中引入默认样式表文件，这个文件在ui压缩包中。如果在官网下载，首页就有这个CSS文件下载，也可选择其他皮肤的CSS。

     //jquery-ui-1.8.13.custom.css

    4.在HTML中插入文本域，最好设置成只读，不接受用户的手动输入，防止格式混乱，以id标记好。

     
    1. <input type="text" id="selectDate" readonly="readonly"/>  

    5.编写js代码，实现最终效果。

     
    1. $(document).ready(function() {     
    2.       $('#selectDate').datepicker();     
    3.   });  

    效果如下图：

    这里只是做了一个最基本的日期控件，我们还需要以中文显示，限制日期选择范围等需求，稍微修改js代码：

    [javascript] view plain copy
    1. <mce:script type="text/javascript"><!--  
    2.     //等待dom元素加载完毕.  
    3.         $(function(){  
    4.             $("#selectDate").datepicker({//添加日期选择功能  
    5.             numberOfMonths:1,//显示几个月  
    6.             showButtonPanel:true,//是否显示按钮面板  
    7.             dateFormat: 'yy-mm-dd',//日期格式  
    8.             clearText:"清除",//清除日期的按钮名称  
    9.             closeText:"关闭",//关闭选择框的按钮名称  
    10.             yearSuffix: '年', //年的后缀  
    11.             showMonthAfterYear:true,//是否把月放在年的后面  
    12.             defaultDate:'2011-03-10',//默认日期  
    13.             minDate:'2011-03-05',//最小日期  
    14.             maxDate:'2011-03-20',//最大日期  
    15.             monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],  
    16.             dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],  
    17.             dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],  
    18.             dayNamesMin: ['日','一','二','三','四','五','六'],  
    19.             onSelect: function(selectedDate) {//选择日期后执行的操作  
    20.                 alert(selectedDate);  
    21.             }  
    22.             });  
    23.         });  
    24.       
    25. // --></mce:script>  

    效果如下：

    这里基本上就满足我们使用的需要了。datepicker控件默认是英文的，可以在构造datepicker时通过monthNames、dayNames属性来指定月、日的中文显示值，但是每次使用是都配置这些属性不免太麻烦了，可以增加一个js文件将中文配置都放在里面，每次使用直接引用即可，这里放在jquery.ui.datepicker-zh-CN.js中，内容如下：

     
    1. jQuery(function($){  
    2.     $.datepicker.regional['zh-CN'] = {  
    3.         closeText: '关闭',  
    4.         prevText: '<上月',  
    5.         nextText: '下月>',  
    6.         currentText: '今天',  
    7.         monthNames: ['一月','二月','三月','四月','五月','六月',  
    8.         '七月','八月','九月','十月','十一月','十二月'],  
    9.         monthNamesShort: ['一','二','三','四','五','六',  
    10.         '七','八','九','十','十一','十二'],  
    11.         dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],  
    12.         dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],  
    13.         dayNamesMin: ['日','一','二','三','四','五','六'],  
    14.         weekHeader: '周',  
    15.         dateFormat: 'yy-mm-dd',  
    16.         firstDay: 1,  
    17.         isRTL: false,  
    18.         showMonthAfterYear: true,  
    19.         yearSuffix: '年'};  
    20.     $.datepicker.setDefaults($.datepicker.regional['zh-CN']);  
    21. });  

    6.在页面中引入中文插件

     
    1. <!-- 添加中文支持-->  
    2.     <mce:script src="js/jquery.ui.datepicker-zh-CN.js" mce_src="js/jquery.ui.datepicker-zh-CN.js" type="text/javascript"></mce:script>  

    完整的页面代码如下：

     
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
    2. <HTML>  
    3.  <HEAD>  
    4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    5.   <TITLE>日期控件datepicker</TITLE>  
    6.       
    7.     <!-- 引入 jQuery -->  
    8.     <mce:script src="js/jquery.1.4.2.js" mce_src="js/jquery.1.4.2.js" type="text/javascript"></mce:script>  
    9.   
    10.     <!--添加datepicker支持-->  
    11.     <mce:script src="js/jquery.ui.core.js" mce_src="js/jquery.ui.core.js" type="text/javascript"></mce:script>  
    12.     <mce:script src="js/jquery.ui.datepicker.js" mce_src="js/jquery.ui.datepicker.js" type="text/javascript"></mce:script>  
    13.     <!-- 或者引入jquery ui包，其中也包含对datepicker的支持  
    14.     <mce:script src="js/jquery-ui-1.7.3.custom.min.js" mce_src="js/jquery-ui-1.7.3.custom.min.js" type="text/javascript"></mce:script>  
    15.     -->  
    16.   
    17.     <!--引入样式css-->  
    18.     <link type="text/css" rel="stylesheet" href="css/jquery-ui-1.7.3.custom.css" mce_href="css/jquery-ui-1.7.3.custom.css" />  
    19.   
    20.     <!-- 添加中文支持-->  
    21.     <mce:script src="js/jquery.ui.datepicker-zh-CN.js" mce_src="js/jquery.ui.datepicker-zh-CN.js" type="text/javascript"></mce:script>  
    22.   
    23.     <mce:script type="text/javascript"><!--  
    24.     //等待dom元素加载完毕.  
    25.         $(function(){  
    26.             $("#selectDate").datepicker({//添加日期选择功能  
    27.             numberOfMonths:1,//显示几个月  
    28.             showButtonPanel:true,//是否显示按钮面板  
    29.             dateFormat: 'yy-mm-dd',//日期格式  
    30.             clearText:"清除",//清除日期的按钮名称  
    31.             closeText:"关闭",//关闭选择框的按钮名称  
    32.             yearSuffix: '年', //年的后缀  
    33.             showMonthAfterYear:true,//是否把月放在年的后面  
    34.             defaultDate:'2011-03-10',//默认日期  
    35.             minDate:'2011-03-05',//最小日期  
    36.             maxDate:'2011-03-20',//最大日期  
    37.             //monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],  
    38.             //dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],  
    39.             //dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],  
    40.             //dayNamesMin: ['日','一','二','三','四','五','六'],  
    41.             onSelect: function(selectedDate) {//选择日期后执行的操作  
    42.                 alert(selectedDate);  
    43.             }  
    44.             });  
    45.         });  
    46.       
    47. // --></mce:script>  
    48.  </HEAD>  
    49.  <BODY>  
    50.   <input type="text" id="selectDate" readonly="readonly"/>  
    51.  </BODY>  
    52. </HTML>  

    注意：由于jquery datepicker首页http://marcgrabanski.com/articles/jquery-ui-datepicker上ui.core.js和ui.datepicker.js不是最新版本的，如果下载新版本jquery-ui-1.8.13中的css文件会造成日期控件不能显示的问题，所以这里使用了1.7.3的ui。简单一点就是用jquery-ui的压缩js。
  • 相关阅读:
    Objects in this class cannot be updated outside
    操作系统原理好书推荐
    Can't initialize OCI
    比较好的GIS blog
    栅格数据开发
    arcgis 本地地图服务 silverlight 调用报错 .
    （转载）Rasterdataset Load data耗时
    网络达人梁宏达
    arcengine总结（1）栅格数据开发
    MyNPOI V1.2发布并开放源码，让.NET Excel导出将简单进行到底【转】
  • 原文地址：https://www.cnblogs.com/j2ee-web-01/p/7486165.html
Copyright © 2011-2022 走看看