基于jquery的小日历，可以单选、多选、按范围选资源-CSDN文库

共6个文件

js：2个

css：2个

gif：1个

jquery

calendar

4星 · 超过85%的资源需积分: 11 190 浏览量 2015-01-19 14:18:52 上传评论收藏 11KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

tinycal.rar （6个子文件）

tinycal.debug.js 13KB

tinycal.js 6KB

tinycal.css 2KB

example.htm 2KB

tinycal.gif 4KB

tinycal.debug.css 2KB

<!DOCTYPE html> <html style="overflow: hidden;"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="tinycal.debug.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="tinycal.debug.js"></script> <script type="text/javascript"> function setRange(startId, endId, start, end) { $(startId).val(start.year + '-' + $.addZero(start.month+1) + '-' + $.addZero(start.day)); $(endId).val(end.year + '-' + $.addZero(end.month+1) + '-' + $.addZero(end.day)); } $(document).ready(function(){ $.fn.calendar({target:"#input_date_single"}); $.fn.calendar({target:"#input_date_multi", mode:'multi'}); $.fn.calendar({target:"#input_date_range", mode:'range', recordState:true}); $.fn.calendar({ target:"#input_date_range_start_end", mode:'range', ok:function(checked, target) { setRange("#input_date_range_start", "#input_date_range_end", checked[0], checked[1]); return true; } }); $.fn.calendar({target:"#input_date_2calendar", mode:'range', num:2}); var today = new Date(); $.fn.calendar({target:"#input_date_blur", mode:'single', blurBefore:today, startDate:today}); }); </script> </head> <body> Single selection calendar<br/> <input type="text" id="input_date_single"><br/><br/> Multi selection calendar<br/> <textarea id="input_date_multi" rows="3" cols="20"></textarea><br/><br/> Range selection calendar<br/> <input type="text" id="input_date_range"><br/><br/> Range selection calendar in start and end<br/> <input type="text" id="input_date_range_start"> <input type="text" id="input_date_range_end"> <input type="button" value="Date Range" id="input_date_range_start_end"> <br/><br/> Range selection calendar with two calendar<br/> <input type="text" id="input_date_2calendar"><br/><br/> Single selection calendar with blur<br/> <input type="text" id="input_date_blur"><br/><br/> </body> </html>

评论收藏

内容反馈