jQuery插件实现的日历功能示例【附源码下载】


Posted in jQuery onSeptember 07, 2018

本文实例讲述了jQuery插件实现的日历功能。分享给大家供大家参考,具体如下:

先来看看运行效果:

jQuery插件实现的日历功能示例【附源码下载】

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3water.com jQuery日历插件</title>
<!--引入jQuery类库文件-->
<script src="js/jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.ui.datepicker-zh-CN.js"></script>
<!--引入Css样式类库文件-->
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="external nofollow" />
<style>
 #startTime,#endTime{
  /* background-color:red;*/
 }
</style>
<script type="text/javascript">
  $(function(){
    //设置日历显示的采用的地区 是中国
    $.datepicker.setDefaults( $.datepicker.regional[ "zh-CN" ] );
    $("#startTime,#endTime").datepicker({
    //altField:"#actualDate",
    //altFormat:"DD, d MM, yy",
  autoSize:false ,//自动调整大小的操作 改变的输入框的大小
  changeMonth:false,//如果为true 弹出一个下拉的菜单
  changeYear:false, //前边有默认10年 当前年份的 后边有默认10年组成的下拉菜单
  dateFormat:"yy-mm-dd", //日期的格式 呈现在输入的文本框中
  defaultDate:+1, //缺省的日期  + - 相对于当前的日期 计算
    showWeek: true, //显示当前年的周数
  firstDay:1, //当前年份开始的第一天
  showOn:"button", //borth 既可以触发按钮 又可以触发文本框 弹出 日历 如果是button 只能触发button事件
  buttonImage: "images/calendar.png", //设置按钮的图片
  buttonImageOnly: true,    //设置这按钮只显示图片效果 不要有button的样式
  showAnim:"toggle", //弹出日历的效果
  prevText:"上一月",
  nextText:"下一月",
  yearRange:"c-5:c+5", //年份的前后取值范围
  //minDate:1,
  //maxDate:25,
  /*
   结束日期的最小值 必须大于等于  开始日期的最大值
  */
  //showOtherMonths: true, //显示当前月份日期的其他日期值
  //selectOtherMonths: true, //显示当前月份日期的其他日期值 并且是可以选择的 默认是不可以选择的
    numberOfMonths:1, //连续弹出3个月的日历
  showButtonPanel:true,
  closeText:"guan",
  //gotoCurrent:true
  onSelect:function(textDate,inst){
    alert(textDate);
   }
   });
  });
</script>
</head>
<body>
   <div>演示日历的效果</div>
   <!-- <div id="datepicker"></div>-->
   开始日期:<input type="text" id="startTime" />
   结束日期:<input type="text" id="endTime" />
</body>
</html>
jQuery 相关文章推荐
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
html中两种获取标签内的值的方法
Jun 16 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 #jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 #jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 #jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 #jQuery
jQuery实现基本动画效果的方法详解
Sep 06 #jQuery
jQuery滑动效果实现方法分析
Sep 05 #jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 #jQuery
You might like
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
在chrome中window.onload事件的一些问题
2010/03/01 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
2010/05/17 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
JS获取页面input控件中所有text控件并追加样式属性
2013/02/25 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
利用Javascript获取选择文本所在的句子详解
2017/12/03 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
Sanic框架基于类的视图用法示例
2018/07/18 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
django实现日志按日期分割
2020/05/21 Python
python数据类型强制转换实例详解
2020/06/22 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
HTML5标签大全
2016/11/23 HTML / CSS
工作中个人的自我评价
2013/12/31 职场文书
交通事故协议书范文
2014/04/16 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
2014年店长工作总结
2014/11/17 职场文书
优秀教师推荐材料
2014/12/16 职场文书
主婚人致辞精选
2015/07/28 职场文书
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android