Jquery日期选择datepicker插件用法实例分析


Posted in Javascript onJune 08, 2015

本文实例讲述了Jquery日期选择datepicker插件用法。分享给大家供大家参考。具体如下:

1、首先将Jquery中的datepicker插件中的相关属性值改成中文的:

$.datepicker.regional['zh-CN'] = { 
  clearText: '清除', 
  clearStatus: '清除已选日期', 
  closeText: '关闭', 
  closeStatus: '不改变当前选择', 
  prevText: '<上月', 
  prevStatus: '显示上月', 
  prevBigText: '<<', 
  prevBigStatus: '显示上一年', 
  nextText: '下月>', 
  nextStatus: '显示下月', 
  nextBigText: '>>', 
  nextBigStatus: '显示下一年', 
  currentText: '今天', 
  currentStatus: '显示本月', 
  monthNames: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'], 
  monthNamesShort: ['一','二','三','四','五','六', '七','八','九','十','十一','十二'], 
  monthStatus: '选择月份', 
  yearStatus: '选择年份', 
  weekHeader: '周', 
  weekStatus: '年内周次', 
  dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], 
  dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'], 
  dayNamesMin: ['日','一','二','三','四','五','六'], 
  dayStatus: '设置 DD 为一周起始', 
  dateStatus: '选择 m月 d日, DD', 
  dateFormat: 'yy-mm-dd', 
  firstDay: 1, 
  initStatus: '请选择日期', 
  isRTL: false};
$.datepicker.setDefaults($.datepicker.regional['zh-CN']);

2、html页面中有两个日期输入框,分别为起始日期和结束日期:

<label for="start-datepicker">起始日期:</label> <input type="text" class="datepicker test-image-datepicker" id="start-datepicker" size="15" />  
<label for="end-datepicker">结束日期:</label> <input type="text" class="datepicker test-image-datepicker" id="end-datepicker" size="15" />

3、调用修改后的datepicker插件:

var $start_date_value = "2012年1月1日"; // TODO 改成可以配置的
var $end_date_value = new Date();
// When document has loaded, initialize pagination and form 
$(document).ready(function(){  
 $(".imagezz").click($test_image_check_box_click);
 $( ".test-image-datepicker" ).datepicker({
 changeMonth: true,
 changeYear: true,
 showOn: "both",
 buttonImage: "images/calendar.gif",
 buttonImageOnly: true,
 showButtonPanel: true,
 onSelect: function(dateText, inst){
   if ($(this).attr("id") == "start-datepicker") {
    $start_date_value = dateText;
   }
   if ($(this).attr("id") == "end-datepicker") {
    $end_date_value = dateText;
   }
   //下面可以写一些根据日期变化引起页面相关部分修改的函数
   //......
  }
});
$(".test-image-datepicker").datepicker("option", "dateFormat", "yy年mm月dd日");
$('.test-image-datepicker').attr("readonly","readonly");
$("#start-datepicker").datepicker("setDate",$start_date_value);
$("#end-datepicker").datepicker("setDate",$end_date_value);

datepicker其余选项及方法详见:http://api.jqueryui.com/datepicker/

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
[推荐]javascript 面向对象技术基础教程
Mar 03 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 Javascript
基于JavaScript实现带缩略图的轮播效果
Jan 12 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 Javascript
Jquery实现遮罩层的方法
Jun 08 #Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 #Javascript
Js数组排序函数sort()介绍
Jun 08 #Javascript
元素绑定click点击事件方法
Jun 08 #Javascript
JavaScript获取URL汇总
Jun 08 #Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 #Javascript
详解JavaScript中的every()方法
Jun 08 #Javascript
You might like
咖啡与水的关系
2021/03/03 冲泡冲煮
解析PHP中ob_start()函数的用法
2013/06/24 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
基于Vue实现拖拽效果
2018/04/27 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
ES6新增的数组知识实例小结
2020/05/23 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
python列出目录下指定文件与子目录的方法
2015/07/03 Python
python实现汉诺塔递归算法经典案例
2021/03/01 Python
Python装饰器用法实例总结
2018/02/07 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
python交易记录链的实现过程详解
2019/07/03 Python
Django 反向生成url实例详解
2019/07/30 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
Python如何实现自带HTTP文件传输服务
2020/07/08 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
计算机应用专业自荐信
2014/07/05 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
国情备忘录观后感
2015/06/04 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
六年级作文之家庭作文
2019/12/12 职场文书
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python