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中取前n天日期的两种方法分享
Jan 26 Javascript
javascript的创建多行字符串的7种方法
Apr 29 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
详解angular应用容器化部署
Aug 14 Javascript
vue生命周期实例小结
Aug 15 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
解决Vue + Echarts 使用markLine标线(precision精度问题)
Jul 20 Javascript
在vue中使用防抖函数组件操作
Jul 26 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
PHP实现多条件查询实例代码
2010/07/17 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
range 标准化之获取
2011/08/28 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
echarts设置图例颜色和地图底色的方法实例
2018/08/01 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
python通过加号运算符操作列表的方法
2015/07/28 Python
Python自定义简单图轴简单实例
2018/01/08 Python
Python装饰器语法糖
2019/01/02 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
Python银行系统实战源码
2019/10/25 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
.NET初级开发工程师面试题
2014/04/18 面试题
英文自我鉴定
2013/12/10 职场文书
入党转预备思想汇报
2014/01/07 职场文书
弄虚作假心得体会
2014/09/10 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
营销与策划实训报告
2014/11/05 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
好员工观后感
2015/06/17 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
Python time库的时间时钟处理
2021/05/02 Python
Python合并多张图片成PDF
2021/06/09 Python