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实现全选、全不选以及单选功能
Mar 23 jQuery
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
jQuery查找dom的几种方法效率详解
May 17 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 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
php5 pdo新改动加载注意事项
2008/09/11 PHP
php生成QRcode实例
2014/09/22 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
react-router 路由切换动画的实现示例
2018/12/03 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
python开发之for循环操作实例详解
2015/11/12 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
ubuntu上安装python的实例方法
2019/09/30 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
车间核算员岗位职责
2014/07/01 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
买卖合同协议书范本
2014/10/18 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang
python开发飞机大战游戏
2021/07/15 Python
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技