まず、これは車輪の再発明だという人もいますが、私はそうではないと思います。リラックスしたいのですが、それはできません。 ちなみに、私はそれを修正したり拡張したりするのが簡単です。 プレビューエフェクトを入れたのは次のとおりです。このページで自分で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 (year % 100 == 0 ? (year % 400 == 0) ? 1 : 0) : (年 % 4 == 0 ? 1 : 0)); } <br>function isValid(d) { return (d.getTime() - (new Date()).getTime() < 0) ? true : false; } //今天以降かどうか <BR>function setDate(year, month) { //建立日予定table <BR>var n1 = new Date(year, month, 1), <BR>firstday = n1.getDay(), <BR>mdays = new Array(31, 28 isLeap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31), <BR>rows = Math .ceil((mdays[month] firstday) / 7), <BR>table = $("<table>", { "class": "days" }), <BR>tbody = $("<tbody> ;"); <BR>$("#calendar").find(".days").remove(); <BR>for (var i = 0; i < rows; i ) { <BR>var tr = $("<tr>"); <BR>for (j = 0; j <7; j ) { <BR>var idx = i * 7 j, <BR>d = idx - 初日 1; 🎜>if (d <= 0 || d > mdays[month]) { //無效日期 <br>d = " " <br>} <br>var td = $("<td>", { html: d }).appendTo(tr); <BR>if (isValid(new Date(year, month, d))) { //今天以降の時刻间都不绑定時刻间 <BR>td.addClass("前に"）; <BR>td.hover(function () { <BR>$(this).addClass("day"); <BR>}, function () { $(this).removeClass("day"); })。 click(function () { <BR>OBJ.attr("値", $("#calendar .year").attr("値") "-" (parseInt($("#calendar .month").attr ("値")) 1) "-" $(this).text()); <BR>$("#calendar").css("display", "none"); <BR>} <BR>} <BR>tr.appendTo(tbody); <BR>} <BR>tbody.appendTo(テーブル); <BR>$("#calendar").append(table); <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.getFull Year(), td.getMonth()); <BR>$("#calendar .year").attr("value", td.getFull Year()); <BR>$("#calendar .month").attr("value", td.getMonth()); <BR>} else { <BR>var se = "<div class='selector'><select class='month'><option value='0'>一月</option> <option value='1'>二月</option><option value='2'>三月</option><option value='3'>四月</option> ;<option value='4'>5月</option><option value='5'>6月</option><option value='6'>7月</ option><option value='7'>8月</option><option value='8'>9月</option><option value='9'>10月< /option><option value='10'>11月</option><option value='11'>12月</option></select><select class=' year'><option value="2009">2009</option>gt;<option value="2010">2010</option>gt;<option value="2011">2011</option>gt;</div>gt;<ul class="weeks"> <li>日</li> <li>一</li>二三<li>四</li> <li>五</li> <li>六</li> <ul>"; <br>calendar.css({ left: of.left, top: of.top 18 }).html(se).appendTo($("body")); <br>setDate(td.getFull Year(), td.getMonth()); <br>$("#calendar .year").attr("value", td.getFull Year()); <br>$("#calendar .month").attr("value", td.getMonth()); <br>バインドクリック(); <br>} <br>} <br>function bindingClick() { //下拉列表绑定時刻 <br>var a = $("#calendar .month"), <br>b = $("#calendar 。年"）; <br>a.change(function () { <br>setDate(b.attr("value"), $(this).attr("value")); <br>}); <br>b.change(function () { <br>setDate($(this).attr("value"), a.attr("value")); <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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
