Component that imitates Sina Weibo time based on jQuery_javascript skills

First of all, some people say that this is reinventing the wheel, but I don’t think so. When doing projects, you can’t always use other people’s things. It is not a fun thing to use things. Of course, if you want to relax, you can’t do it. By the way, at least I did it myself. It’s easier for me to modify or expand it. The effect and code are as follows. I put the preview effect in html myself. It’s very troublesome to do it on this page

Copy code The code is as follows: Untitled Page *{margin:0;padding:0;} /*日期控件*/ .pc_caldr { background-color: #FFFFFF; border: 1px solid #CCCCCC; color: #000000; height: auto; padding: 5px; position: absolute; width: 161px; z-index: 10; } .pc_caldr .selector { height: 24px; padding: 2px 0 0; } .pc_caldr .selector .month, .pc_caldr .selector .year { border: 1px solid #CCCCCC; float: left; font-size: 12px; height: 19px; width: 73px; } .pc_caldr .selector .year { margin-left: 10px; width: 78px; } .pc_caldr .weeks, .pc_caldr .days { list-style: none outside none; margin: 0; padding: 0; width: 100% !important; } .pc_caldr .weeks { background: none repeat scroll 0 0 #B6D1F9; color: #FFFFFF; font-size: 12px; height: 18px; margin-bottom: 2px; } .pc_caldr .days { font-family: Arial; font-size: 12px; height: auto; } .pc_caldr .weeks li, .pc_caldr .days li { float: left; height: 18px; line-height: 18px; text-align: center; width: 23px; } .pc_caldr .weeks li { text-align: center; } .pc_caldr table { width: 100%; } .pc_caldr table td{text-align:center;} .pc_caldr table td.before { color: #43609C; cursor: pointer; } .pc_caldr table td.day { background-color: #5D94E6; color: #FFFFFF; } /*文本框*/ .tiemin{width:120px;border:1px solid #f00;} .inline-block {display :inline-block; zoom:1 ; *display: inline; vertical-align:middle ;} //全部包裹 var sookerTime = (function ($) { var OBJ; function isLeap(year) { return (year % 100 == 0 ? (year % 400 == 0 ? 1 : 0) : (year % 4 == 0 ? 1 : 0)); } function isValid(d) { return (d.getTime() - (new Date()).getTime() function setDate(year, month) { //建立日期table var n1 = new Date(year, month, 1), firstday = n1.getDay(), mdays = new Array(31, 28 isLeap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31), rows = Math.ceil((mdays[month] firstday) / 7), table = $(" ", { "class": "days" }), tbody = $(" "); $("#calendar").find(".days").remove(); for (var i = 0; i var tr = $(" "); for (j = 0; j var idx = i * 7 j, d = idx - firstday 1; if (d mdays[month]) { //无效日期 d = " " } var td = $(" ", { html: d }).appendTo(tr); if (isValid(new Date(year, month, d))) { //今天以后的时间都不绑定时间 td.addClass("before"); td.hover(function () { $(this).addClass("day"); }, function () { $(this).removeClass("day"); }).click(function () { OBJ.attr("value", $("#calendar .year").attr("value") "-" (parseInt($("#calendar .month").attr("value")) 1) "-" $(this).text()); $("#calendar").css("display", "none"); }); } } tr.appendTo(tbody); } tbody.appendTo(table); $("#calendar").append(table); } function createTime() { var calendar = $(" ", { "class": "pc_caldr", id: "calendar" }), td = new Date(), of = OBJ.offset(); if (document.getElementById("calendar")) { calendar = $("#calendar").css({ left: of.left, top: of.top 18, display: "block" }); setDate(td.getFullYear(), td.getMonth()); $("#calendar .year").attr("value", td.getFullYear()); $("#calendar .month").attr("value", td.getMonth()); } else { var se = " 一月 二月 三月 四月 五月 六月 七月 八月 九月 十月 十一月 十二月 2009 2010 2011 日 一 二 三 四 五 六 "; calendar.css({ left: of.left, top: of.top 18 }).html(se).appendTo($("body")); setDate(td.getFullYear(), td.getMonth()); $("#calendar .year").attr("value", td.getFullYear()); $("#calendar .month").attr("value", td.getMonth()); bindClick(); } } function bindClick() { //给下拉列表绑定时间 var a = $("#calendar .month"), b = $("#calendar .year"); a.change(function () { setDate(b.attr("value"), $(this).attr("value")); }); b.change(function () { setDate($(this).attr("value"), a.attr("value")); }); } return { init: function (obj) { //返回调用的接口 OBJ = obj; createTime(); } } })(jQuery); //使用方法 $(".tiemin").focus(function(){ sookerTime.init($(this)); });

Component that imitates Sina Weibo time based on jQuery_javascript skills

Related articles