JQuery日期插件datepicker的使用方法

2024-11-27 05:53:43

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

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

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

<!-- 引入 jQuery -->
<mce:script src="js/jquery.1.4.2.js" mce_src="js/jquery-1.5.1.min.js" type="text/javascript"></mce:script>
<!--添加datepicker支持-->
<mce:script src="js/jquery.ui.core.js" mce_src="js/jquery.ui.core.js" type="text/javascript"></mce:script>
<mce:script src="js/jquery.ui.datepicker.js" mce_src="js/jquery.ui.datepicker.js" type="text/javascript"></mce:script>

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

<!--引入样式css-->
k type="text/css" rel="stylesheet" href="css/jquery-ui-1.8.13.custom.css" mce_href="css/jquery-ui-1.7.3.custom.css" />

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

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

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

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

效果如下图：

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

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

// --></mce:script>

效果如下：

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

jQuery(function($){
  $.datepicker.regional['zh-CN'] = {
    closeText: '关闭',
    prevText: '<上月',
    nextText: '下月>',
    currentText: '今天',
    monthNames: ['一月','二月','三月','四月','五月','六月',
    '七月','八月','九月','十月','十一月','十二月'],
    monthNamesShort: ['一','二','三','四','五','六',
    '七','八','九','十','十一','十二'],
    dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
    dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
    dayNamesMin: ['日','一','二','三','四','五','六'],
    weekHeader: '周',
    dateFormat: 'yy-mm-dd',
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: true,
    yearSuffix: '年'};
  $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
});

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

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

完整的页面代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <TITLE>日期控件datepicker</TITLE> 

  <!-- 引入 jQuery -->
  <mce:script src="js/jquery.1.4.2.js" mce_src="js/jquery.1.4.2.js" type="text/javascript"></mce:script> 

  <!--添加datepicker支持-->
  <mce:script src="js/jquery.ui.core.js" mce_src="js/jquery.ui.core.js" type="text/javascript"></mce:script>
  <mce:script src="js/jquery.ui.datepicker.js" mce_src="js/jquery.ui.datepicker.js" type="text/javascript"></mce:script>
  <!-- 或者引入jquery ui包，其中也包含对datepicker的支持
  <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>
  --> 

  <!--引入样式css-->
  <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" /> 

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

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

// --></mce:script>
 </HEAD>
 <BODY>
 <input type="text" id="selectDate" readonly="readonly"/>
 </BODY>
</HTML>

注意：由于jquery datepicker首页上ui.core.js和ui.datepicker.js不是最新版本的，如果下载新版本jquery-ui-1.8.13中的css文件会造成日期控件不能显示的问题，所以这里使用了1.7.3的ui。简单一点就是用jquery-ui的压缩js。

以上就是本文的全部内容，关于JQuery日期插件datepicker就为大家介绍这么多，希望对大家的学习有所帮助。

datePicker——日期选择控件（with jquery）

demo: http://demo.jb51.net/js/2011/jQuery_calendar/index.html down: http://www.jb51.net/jiaoben/19622.html 用法很简单,而且js文件也很小,之前也见过一些日期选择控件,但个头都比较大,影响速度可以设置日期的格式,可以选择日期的起止时间,如果不加参数的话,默认就是之前的日期不可选,而只能从今天开始选择现在My97 DatePicker也不错,不用jquery 一款很不错的基于JavaScri
jquery 日期控件datepicker属性详细解析

复制代码代码如下: $("#regDate").datepicker( { showMonthAfterYear: true, // 月在年之后显示 changeMonth: true, // 允许选择月份 changeYear: true, // 允许选择年份 dateFormat:'yy-mm-dd', // 设置日期格式 closeText:'关闭', // 只有showButtonPanel: true才会显示出来 d
jQuery实现简单日期格式化功能示例

本文实例讲述了jQuery实现简单日期格式化功能.分享给大家供大家参考,具体如下: 代码如下,引入jquery后直接后加入以下代码刷新可测试 Date.prototype.Format = function (fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 &
获取客户端电脑日期时间js代码(jquery)

原生态javascript获取日期复制代码代码如下: <SCRIPT LANGUAGE="JavaScript">var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-????) myDate.getMonth(); //获取当前月份(0-11,0代表1月) myDate.getDat
jQuery实现简单的日期输入格式化控件

js代码有一百多行. 先上效果图 html代码日期: <input type="text" id="dateInputer" class="hhm-dateInputer" placeholder="请输入日期"> 设置input元素类名为 hhm-dateInputer,通过这个类来绑定这个日期输入控件. js代码这里应用了jQuery的库, 主要用于选择元素和绑定事件. 复制代码代码如下: <sc
jQuery Mobile开发中日期插件Mobiscroll使用说明

近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊. 日期插件JQM也提供了内置的,但样式方面不好看,只好百度.Google啦,找到了两款 jquery-mobile-datebox 和 mobiscroll-2.3 jqueryMobileDatebox 这个在板上的表现不好,性能方面有点卡 mobiscroll 性能方面比前者要好一些,效果更简洁 ,划动更流畅放在一起对比下各位看官,你们觉得哪个
jquery中实现时间戳与日期相互转换

直接看代码: 提醒:不要忘记了引用jquery的类库 (function($) { $.extend({ myTime: { /** * 当前时间戳 * @return <int> unix时间戳(秒) */ CurTime: function(){ return Date.parse(new Date())/1000; }, /** * 日期转换为 Unix时间戳 * @param <string> 2014-01-01 20:20:20 日期格式 * @return <
基于jquery的web页面日期格式化插件

复制代码代码如下: (function ($) { var FormatDateTime = function FormatDateTime() { }; $.FormatDateTime = function (obj, IsMi) { var correcttime1 = eval('( new ' + obj.replace(new RegExp("\/", "gm"), "") + ')'); var myDate = correctt
jquery获取当前日期的方法

本文实例讲述了jquery获取当前日期的方法.分享给大家供大家参考. 具体如下: 复制代码代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>jquery当前日期</title> <script type="text/javascript"
jQuery之日期选择器的深入解析

1:默认情况下,日期输入文本框获得页面焦点的时候,日期选择器组件会在一个覆盖层中打开日历选择面板,当日期输入文本框失去焦点或者选择一个日期的时候,将自动关闭该日历选择面板$(selector).datepicker([options]);简单实例: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml

JQuery日期插件datepicker的使用方法

相关推荐

随机推荐