jQuery-jcDate.js 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
  1. /* jQuery - jcDate v1.0 */
  2. ;(function($){
  3. $.fn.jcDate = function(options) {
  4. var defaults = {
  5. IcoClass : "jcDateIco",
  6. Event : "click",
  7. Speed : 100,
  8. Left : 0,
  9. Top : 38,
  10. format : "/",
  11. Timeout : 100
  12. };
  13. var options = $.extend(defaults,options);
  14. return this.each(function() {
  15. if($("#jcDate").length == 0){
  16. $("body").prepend("<div id='jcDate'><input type='hidden' value='' id='dateHideText' /><div id='jcDateTt'><a id='d_prev'></a><div><span></span><b>年</b><samp></samp><b>月</b></div><a id='d_next'></a></div><dl id='jcYeas'></dl><dl id='jcMonth'></dl><div id='jcDayWrap'><dl id='jcDayCon'></dl><div id='jcDateMax'><ul></ul><ul></ul><ul></ul><ul></ul><ul></ul><ul></ul><ul></ul><ul></ul><ul></ul><ul></ul><ul></ul><ul></ul></div><div id='jcDateBtn'><samp>今天</samp><span>清空</span><a id='d_sub'>确定</a><div id='jcTimeWrap'><input type='text' value='' /><label>:</label><input type='text' value='' /></div></div></div></div>");
  17. };
  18. var $dateInput = $(this),
  19. $window = $(window),
  20. dateObj = new Date(),
  21. $jcDate = $("#jcDate"),
  22. inputOffLeft = $(this).offset().left,
  23. inputOfftop = $(this).offset().top,
  24. $year = $("#jcDateTt").find("span"),
  25. $month = $("#jcDateTt").find("samp"),
  26. $b = $("#jcDateTt").find("b"),
  27. $jcDateMax = $("#jcDateMax"),
  28. $weekFrame = $("#jcDayCon"),
  29. $DateBtn = $("#jcDateBtn"),
  30. $jcYeas = $("#jcYeas"),
  31. $jcMonth = $("#jcMonth"),
  32. $Now = $DateBtn.find("samp"),
  33. $clear = $DateBtn.find("span"),
  34. $jcDayWrap = $("#jcDayWrap"),
  35. $dayFrame = $jcDayWrap.find("ul"),
  36. $submit = $DateBtn.find("a#d_sub"),
  37. $HiddenText = $("input#dateHideText"),
  38. $jcTimeWrap = $("#jcTimeWrap"),
  39. $hh = $jcTimeWrap.find("input:eq(0)"),
  40. $mm = $jcTimeWrap.find("input:eq(1)"),
  41. $d_prev = $("#d_prev"),
  42. $d_next = $("#d_next"),
  43. // 获取当前时间
  44. _year = parseInt(dateObj.getFullYear()),
  45. _month = dateObj.getMonth() + 1,
  46. _date = dateObj.getDate(),
  47. week = dateObj.getDay(),
  48. days = [ "日","一 ","二 ","三 ","四 ","五 ","六 "],
  49. _day = days[week],
  50. _hours = dateObj.getHours(),
  51. _minutes = dateObj.getMinutes(),
  52. weekDl = "",
  53. yearDl = "<dd class='visited'>"+_year+"年"+"</dd>",
  54. monthDl = "",
  55. $ul = "",
  56. _idx = 0,
  57. defInfo = "",
  58. getDateCount = function(y, m){
  59. return [31, y % 4 == 0 && y % 100 != 0 || y % 400 == 0 ? 29 : 28 ,31,30,31,30,31,31,30,31,30,31][ m+1 ];
  60. };
  61. // 赋值数据
  62. $hh.val("00");
  63. $mm.val("00");
  64. for(var w = 0 in days) {
  65. weekDl = weekDl + "<dt>" + days[w] + "</dt>";
  66. };
  67. $weekFrame.html(weekDl);
  68. var NowY = _year,
  69. yArr = new Array(),
  70. mArr = new Array();
  71. for(var lys = 0; lys < 9 ; lys++ ){
  72. lastyear = NowY - (lys+1);
  73. yArr.push("<dt>"+lastyear+"年"+"</dt>")
  74. };
  75. yArr.reverse();
  76. var dtf = ysArr(yArr);
  77. yArr.length = 0;
  78. for(var fys = 0; fys < 8 ; fys++ ){
  79. firstyear = NowY + (fys+1);
  80. yArr.push("<dt>"+firstyear+"年"+"</dt>")
  81. };
  82. var dtl = ysArr(yArr);
  83. $jcYeas.html(dtf+yearDl+dtl);
  84. function ysArr(arr){
  85. var $Dts = "";
  86. for(var index = 0 in arr){
  87. $Dts = $Dts + arr[index];
  88. };
  89. return $Dts
  90. };
  91. for(var ms = 1; ms <= 12; ms++ ){
  92. if(ms == _month){
  93. mArr.push("<dt class='visited'>" + ms + "月" +"</dt>");
  94. } else {
  95. mArr.push("<dt>" + ms + "月" +"</dt>");
  96. };
  97. };
  98. for(var mA = 0 in mArr){
  99. monthDl += mArr[mA];
  100. };
  101. $jcMonth.html(monthDl)
  102. function shFade(show,hide,hide2,bool,index){
  103. var fadeSpeed = options.speed;
  104. hide.fadeOut(fadeSpeed);
  105. hide2.fadeOut(fadeSpeed);
  106. show.delay(fadeSpeed*2).fadeIn(fadeSpeed);
  107. if(bool){
  108. $("#d_prev,#d_next").fadeOut(fadeSpeed);
  109. $b.eq(index).hide();
  110. } else {
  111. $("#d_prev,#d_next").fadeIn(fadeSpeed);
  112. $b.show();
  113. $year.show();
  114. $month.show();
  115. };
  116. };
  117. $year.die().live("click",function(){
  118. $(this).addClass("visited").next("samp").removeClass("visited");
  119. shFade($jcYeas,$jcDayWrap,$jcMonth,true,1);
  120. $year.show();
  121. $month.hide();
  122. });
  123. $("#jcYeas dd,#jcYeas dt").die().live("click",function(){
  124. var y = parseInt($(this).text());
  125. Traversal(y);
  126. $year.text(y);
  127. shFade($jcDayWrap,$jcYeas,$jcMonth,false);
  128. });
  129. $month.die().live("click",function(){
  130. $(this).addClass("visited").prev().removeClass("visited");
  131. shFade($jcMonth,$jcDayWrap,$jcYeas,true,0);
  132. $month.show();
  133. $year.hide();
  134. });
  135. $jcMonth.find("dt").die().live("click",function(){
  136. var m = parseInt($(this).text());
  137. mAnimate(m-1);
  138. $month.text(m);
  139. shFade($jcDayWrap,$jcYeas,$jcMonth,false);
  140. });
  141. function Traversal(Ty){
  142. $year.text(Ty);
  143. for(var m = 0; m < $dayFrame.length; m++){
  144. var dayLi = "",
  145. $fLi = "",
  146. $lLi = "",
  147. firstLi = "",
  148. lastDay = 0,
  149. yearWeek = new Date(Ty,m,1).getDay();
  150. getDateCount(Ty,m-2) == undefined ? fristDay = 31 : fristDay = getDateCount(Ty,m-2);
  151. for(var d = 1; d <= getDateCount(Ty,m-1); d++){
  152. dayLi = dayLi + "<li class='jcDateColor'>"+ d +"</li>";
  153. };
  154. for(var f = 0 ; f < yearWeek; f++){
  155. firstLi += "<li>"+ fristDay +"</li>,";
  156. fristDay--;
  157. };
  158. for(var l = 0 ; l <= 42-(d+yearWeek); l++ ){
  159. lastDay = l + 1;
  160. $lLi += "<li>"+lastDay+"</li>";
  161. };
  162. fLiArr = firstLi.split(",").reverse();
  163. for(var arr = 0 in fLiArr){
  164. $fLi += fLiArr[arr];
  165. };
  166. $addLi = $fLi + dayLi + $lLi;
  167. $dayFrame.eq(m).html($addLi);
  168. };
  169. };
  170. mAnimate(_month-1);
  171. //功能方法
  172. $d_prev.die().live("click",function(){
  173. _idx = $dayFrame.filter(".dateV").index();
  174. if( _idx > 0){
  175. _idx --;
  176. } else {
  177. var _Tyear = parseInt($year.text());
  178. _Tyear--;
  179. Traversal(_Tyear);
  180. _idx = $dayFrame.length-1;
  181. };
  182. mAnimate(_idx);
  183. });
  184. $d_next.die().live("click",function(){
  185. _idx = $dayFrame.filter(".dateV").index();
  186. if( _idx < $dayFrame.length-1){
  187. _idx ++;
  188. } else {
  189. var _Tyear = parseInt($year.text());
  190. _Tyear++;
  191. Traversal(_Tyear);
  192. _idx = 0;
  193. };
  194. mAnimate(_idx);
  195. });
  196. function mAnimate(index){
  197. $dayFrame.eq(index).addClass("dateV").siblings().removeClass("dateV");
  198. $month.text(index+1);
  199. $jcDateMax.animate({ "left":-index*144},options.Speed);
  200. };
  201. function today(y,m,d){
  202. $year.text(y);
  203. $month.text(m);
  204. Traversal(y);
  205. $.each($dayFrame.eq(m-1).find("li"),function(){
  206. if($(this).hasClass("jcDateColor")){
  207. $dayFrame.eq(m-1).find("li.jcDateColor").eq(d-1).addClass("visited");
  208. };
  209. });
  210. $HiddenText.val(_date);
  211. $dayFrame.eq(m-1).find("li").text();
  212. mAnimate(m-1);
  213. };
  214. function clearVisited(){
  215. $.each($("li.jcDateColor",$dayFrame),function(){
  216. if($(this).hasClass("visited")){
  217. $(this).removeClass("visited");
  218. };
  219. });
  220. };
  221. today(_year,_month,_date);
  222. $dayFrame.undelegate("li.jcDateColor","click").delegate("li.jcDateColor","click",function(){
  223. clearVisited();
  224. $(this).addClass("visited");
  225. $HiddenText.val(parseInt($(this).text()))
  226. });
  227. $dayFrame.undelegate("li.jcDateColor","dblclick").delegate("li.jcDateColor","click",function(){
  228. submitDate();
  229. });
  230. $Now.die().live("click",function(){
  231. today(_year,_month,_date);
  232. });
  233. $clear.die().live("click",function(){
  234. $("input.dateVisited").val("");
  235. });
  236. $submit.die().live("click",function(){
  237. submitDate();
  238. });
  239. function submitDate(){
  240. var Sy = $year.text(),
  241. Sm = $month.text(),
  242. Sd = $HiddenText.val();
  243. NowDateArr = new Array(Sy,Sm,Sd);
  244. dateInfo =NowDateArr.join(options.format);
  245. if($hh.val() != "00" || $mm.val() != "00" ){
  246. var Sh = $hh.val(),
  247. Sm = $mm.val();
  248. NowDateArr.push(Sh+":"+Sm);
  249. printDate = NowDateArr.join(options.format).substring(),
  250. format = printDate.split("/");
  251. dateInfo = format[0]+options.format+format[1]+options.format+format[2]+" "+format[3]
  252. };
  253. $("input.dateVisited").val(dateInfo);
  254. closeDate();
  255. };
  256. $dateInput.addClass(options.IcoClass)
  257. //.val(defInfo)
  258. .die()
  259. .live(options.Event,function(e){
  260. $(this).addClass("dateVisited");
  261. //$jcDate.css({ "left" : e.pageX+(options.Left),"top" : e.pageY+(options.Top) });
  262. var iof = $(this).offset();
  263. $jcDate.css({ "left" : iof.left+options.Left,"top" : iof.top+options.Top });
  264. $jcDate.show(options.Speed);
  265. $jcDayWrap.show();
  266. $jcYeas.hide();
  267. $jcMonth.hide();
  268. $("#d_prev,#d_next").show();
  269. $year.show();
  270. $month.show();
  271. $b.show();
  272. });
  273. $jcDate.die().live("mouseleave",function(){
  274. setTimeout(closeDate,options.Timeout);
  275. });
  276. function closeDate(){
  277. $("input.dateVisited").removeClass("dateVisited");
  278. $jcDate.hide(options.Speed);
  279. };
  280. });
  281. };
  282. })(jQuery)