우선, 어떤 사람들은 이것이 바퀴를 재발명하는 것이라고 말하지만 나는 그렇게 생각하지 않습니다. 프로젝트를 할 때 항상 다른 사람의 것을 사용하는 것은 재미있는 일이 아닙니다. 긴장을 풀고 싶으면 할 수 없습니다. 그런데 적어도 제가 직접 수정하거나 확장하는 것이 더 쉽습니다. 미리보기 효과를 넣었습니다. html을 이 페이지에서 직접 하기가 너무 번거롭습니다 코드 복사 코드는 다음과 같습니다. Untitled Page <br>*{margin:0;padding:0;} <br>/*日期控件*/ <br>.pc_caldr { background-color: #FFFFFF; border: 1px solid #CCCCCC; color: #000000; height: auto; padding: 5px; position: absolute; width: 161px; z-index: 10; } <br>.pc_caldr .selector { height: 24px; padding: 2px 0 0; } <br>.pc_caldr .selector .month, .pc_caldr .selector .year { border: 1px solid #CCCCCC; float: left; font-size: 12px; height: 19px; width: 73px; } <br>.pc_caldr .selector .year { margin-left: 10px; width: 78px; } <br>.pc_caldr .weeks, .pc_caldr .days { list-style: none outside none; margin: 0; padding: 0; width: 100% !important; } <br>.pc_caldr .weeks { background: none repeat scroll 0 0 #B6D1F9; color: #FFFFFF; font-size: 12px; height: 18px; margin-bottom: 2px; } <br>.pc_caldr .days { font-family: Arial; font-size: 12px; height: auto; } <br>.pc_caldr .weeks li, .pc_caldr .days li { float: left; height: 18px; line-height: 18px; text-align: center; width: 23px; } <br>.pc_caldr .weeks li { text-align: center; } <br>.pc_caldr table { width: 100%; } <br>.pc_caldr table td{text-align:center;} <br>.pc_caldr table td.before { color: #43609C; cursor: pointer; } <br>.pc_caldr table td.day { background-color: #5D94E6; color: #FFFFFF; } <br>/*文本框*/ <br>.tiemin{width:120px;border:1px solid #f00;} <br>.inline-block {display :inline-block; zoom:1 ; *display: inline; vertical-align:middle ;} <br> <br>//전체부包裹 <br>var sookerTime = (function ($) { <br>var OBJ; <br>function isLeap(year) { return (연도 % 100 == 0 ? (연도 % 400 == 0 ? 1 : 0) : (연도 % 4 == 0 ? 1 : 0)) } <br>function isValid(d) { return (d.getTime() - (new Date()).getTime() < 0) ? true : false; } //是否在今天以后 <BR>function setDate(연도, 월) { //建立日期table <BR>var n1 = new Date(연도, 월, 1), <BR>firstday = n1.getDay(), <BR>mdays = new Array(31, 28 isLeap(연도), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31), <BR>rows = 수학 .ceil((mdays[월] 첫날) / 7), <BR>table = $("<table>", { "class": "days" }), <br>tbody = $("<tbody> ;"); <BR>$("#calendar").find(".days").remove(); <BR>for (var i = 0; i < 행; i ) { <BR>var tr = $("<tr>"); <br>for (j = 0; j var idx = i * 7 j, <br>d = idx - 첫날 <br>if (d <= 0 || d > mdays[월]) { //无效日期 <br>d = " " <br>} <br>var td = $("<td>", { html: d }).appendTo(tr); <br>if (isValid(new Date(년, 월, d))) { //今天以后的时间都不绑定时间 <br>td.addClass(" 전에"); <br>td.hover(function () { <br>$(this).addClass("day"); <br>}, function () { $(this).removeClass("day"); }). click(function () { <br>OBJ.attr("value", $("#calendar .year").attr("value") "-" (parseInt($("#calendar .month").attr ("값")) 1) "-" $(this).text()) <br>$("#calendar").css("display", "none") <br>}); <br>} <br>} <br>tr.appendTo(tbody); <br>} <br>tbody.appendTo(테이블); <br>$("#calendar").append(테이블); <br>} <br>function createTime() { <br>var Calendar = $("<div>", { "class": "pc_caldr", id: "calendar" }), <br>td = new Date(), <br>of = OBJ.offset(); <br>if (document.getElementById("calendar")) { <br>calendar = $("#calendar").css({ left: of.left, top: of.top 18, display: "block" } ); <br>setDate(td.getFullYear(), td.getMonth()); <br>$("#calendar .year").attr("value", td.getFullYear()); <br>$("#calendar .month").attr("value", td.getMonth()); <br>} else { <br>var se = "<div class='selector'><select class='month'><option value='0'>一月</option> <옵션 값='1'>이월</option><옵션 값='2'>삼월</option><옵션 값='3'>사월</option> ;<옵션 값='4'>5월</option><옵션 값='5'>六월</option><옵션 값='6'>만월</ 옵션><옵션 값='7'>八월</option><옵션 값='8'>九월</option><옵션 값='9'>十월< /option><option value='10'>十一月</option><option value='11'>十two月</option></select><class 선택=' 연도'><옵션 값='2009'>2009</option><옵션 값='2010'>2010</option><옵션 값='2011'>2011</option>< ;/select></div> <ul class="weeks"> <li>日</li> <li>一</li> <li>two</li>< ;li>삼<li>사</li> <li>五</li> <li>六</li> </ul>"; <br>calendar.css({ 왼쪽: of.left, 위쪽: of.top 18 }).html(se).appendTo($("body")); <br>setDate(td.getFullYear(), td.getMonth()); <br>$("#calendar .year").attr("value", td.getFullYear()); <br>$("#calendar .month").attr("value", td.getMonth()); <br>바인드클릭(); <br>} <br>} <br>functionbindClick() { //给下拉列表绑정정时间 <br>var a = $("#calendar .month"), <br>b = $("#calendar .년도"); <br>a.change(function () { <br>setDate(b.attr("값"), $(this).attr("값")); <br>}); <br>b.change(function () { <br>setDate($(this).attr("값"), a.attr("값")); <br>}); <br>} <br>return { <br>init: function (obj) { //返回调사용적接口 <br>OBJ = obj; <br>createTime(); <br>} <br>} <br>})(jQuery); <br>//使사용 방법 <br>$(".tiemin").focus(function(){ <br>sookerTime.init($(this)); <br>}); <br>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
