jQuery插件实现的日历功能示例【附源码下载】
程序员文章站
2023-11-12 23:48:04
本文实例讲述了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>www.jb51.net 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>
附:完整实例代码点击此处。
ps:这里再为大家推荐几款时间及日期相关工具供大家参考:
在线日期/天数计算器:
在线日期天数差计算器:
unix时间戳(timestamp)转换工具:
网页万年历日历:
更多关于jquery相关内容感兴趣的读者可查看本站专题:《jquery日期与时间操作技巧总结》、《jquery拖拽特效与技巧总结》、《jquery扩展技巧总结》、《jquery常见经典特效汇总》、《jquery选择器用法总结》及《jquery常用插件及用法总结》
希望本文所述对大家jquery程序设计有所帮助。
推荐阅读
-
jQuery插件实现的日历功能示例【附源码下载】
-
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
-
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
-
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
-
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
-
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
-
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
-
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
-
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
-
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】