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插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jQuery-App输入框实现实时搜索
Nov 19 jQuery
jquery插件实现悬浮的菜单
Apr 24 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
新闻分类录入、显示系统
2006/10/09 PHP
新手配置 PHP 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
thinkPHP5框架中widget的功能与用法详解
2018/06/11 PHP
基于jquery封装的一个js分页
2011/11/15 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
js实现的在线调色板功能完整实例
2016/12/21 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
JS获取填报扩展单元格控件的值的解决办法
2017/07/14 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
webpack常用构建优化策略小结
2019/11/21 Javascript
webpack3.0升级4.0的方法步骤
2020/04/02 Javascript
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
python实现年会抽奖程序
2019/01/22 Python
python实现单链表的方法示例
2019/09/03 Python
python定时任务 sched模块用法实例
2019/11/04 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
python request 模块详细介绍
2020/11/10 Python
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
总经理助理职责
2014/02/04 职场文书
军训自我鉴定100字
2014/02/13 职场文书
采购经理岗位职责
2014/02/16 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS