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插件制作 自增长输入框实现代码
Aug 17 jQuery
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
jQuery实现滑动开关效果
Aug 02 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安装问题
2006/10/09 PHP
我的php学习笔记(毕业设计)
2012/02/21 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
Javascript实现的分页函数
2006/12/22 Javascript
javascript编程起步(第五课)
2007/01/10 Javascript
javascript 写类方式之七
2009/07/05 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
js实现自定义路由
2017/02/04 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
英语道歉信范文
2014/01/09 职场文书
学校校庆演讲稿
2014/05/22 职场文书
化学教育专业求职信
2014/07/08 职场文书
退货证明模板
2015/06/23 职场文书
教师节校长致辞
2015/07/31 职场文书
检讨书范文
2019/04/16 职场文书
高一作文之乐趣
2019/11/21 职场文书
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
P站美图推荐——变身女主角特辑
2022/03/20 日漫