Code666 (代码贴、代码片段)

[JavaScript] js日期选择器，自动填充日期 →→→→→进入此内容的聊天室

来自 , 2020-06-26, 写在 JavaScript, 查看 109 次.
URL http://www.code666.cn/view/4fa91c19
  1. <html>
  2. <head>
  3. <title>JS日期选择器</title>
  4. <script type="text/javascript">
  5.         function HS_DateAdd(interval, number, date) {
  6.                 number = parseInt(number);
  7.                 if (typeof (date) == "string") {
  8.                         var date = new Date(date.split("-")[0], date.split("-")[1], date
  9.                                         .split("-")[2])
  10.                 }
  11.                 if (typeof (date) == "object") {
  12.                         var date = date
  13.                 }
  14.                 switch (interval) {
  15.                 case "y":
  16.                         return new Date(date.getFullYear() + number, date.getMonth(), date
  17.                                         .getDate());
  18.                         break;
  19.                 case "m":
  20.                         return new Date(date.getFullYear(), date.getMonth() + number,
  21.                                         checkDate(date.getFullYear(), date.getMonth() + number,
  22.                                                         date.getDate()));
  23.                         break;
  24.                 case "d":
  25.                         return new Date(date.getFullYear(), date.getMonth(), date.getDate()
  26.                                         + number);
  27.                         break;
  28.                 case "w":
  29.                         return new Date(date.getFullYear(), date.getMonth(), 7 * number
  30.                                         + date.getDate());
  31.                         break;
  32.                 }
  33.         }
  34.         function checkDate(year, month, date) {
  35.                 var enddate = [ "31", "28", "31", "30", "31", "30", "31", "31", "30",
  36.                                 "31", "30", "31" ];
  37.                 var returnDate = "";
  38.                 if (year % 4 == 0) {
  39.                         enddate[1] = "29"
  40.                 }
  41.                 if (date > enddate[month]) {
  42.                         returnDate = enddate[month]
  43.                 } else {
  44.                         returnDate = date
  45.                 }
  46.                 return returnDate;
  47.         }
  48.  
  49.         function WeekDay(date) {
  50.                 var theDate;
  51.                 if (typeof (date) == "string") {
  52.                         theDate = new Date(date.split("-")[0], date.split("-")[1], date
  53.                                         .split("-")[2]);
  54.                 }
  55.                 if (typeof (date) == "object") {
  56.                         theDate = date
  57.                 }
  58.                 return theDate.getDay();
  59.         }
  60.         function HS_calender() {
  61.                 var lis = "";
  62.                 var style = "";
  63.                 style += "<style type='text/css'>";
  64.                 style += ".calender { width:170px; height:auto; font-size:12px; margin-right:14px; background:url(calenderbg.gif) no-repeat right center #fff; border:1px solid #397EAE; padding:1px}";
  65.                 style += ".calender ul {list-style-type:none; margin:0; padding:0;}";
  66.                 style += ".calender .day { background-color:#EDF5FF; height:20px;}";
  67.                 style += ".calender .day li,.calender .date li{ float:left; width:14%; height:20px; line-height:20px; text-align:center}";
  68.                 style += ".calender li a { text-decoration:none; font-family:Tahoma; font-size:11px; color:#333}";
  69.                 style += ".calender li a:hover { color:#f30; text-decoration:underline}";
  70.                 style += ".calender li a.hasArticle {font-weight:bold; color:#f60 !important}";
  71.                 style += ".lastMonthDate, .nextMonthDate {color:#bbb;font-size:11px}";
  72.                 style += ".selectThisYear a, .selectThisMonth a{text-decoration:none; margin:0 2px; color:#000; font-weight:bold}";
  73.                 style += ".calender .LastMonth, .calender .NextMonth{ text-decoration:none; color:#000; font-size:18px; font-weight:bold; line-height:16px;}";
  74.                 style += ".calender .LastMonth { float:left;}";
  75.                 style += ".calender .NextMonth { float:right;}";
  76.                 style += ".calenderBody {clear:both}";
  77.                 style += ".calenderTitle {text-align:center;height:20px; line-height:20px; clear:both}";
  78.                 style += ".today { background-color:#ffffaa;border:1px solid #f60; padding:2px}";
  79.                 style += ".today a { color:#f30; }";
  80.                 style += ".calenderBottom {clear:both; border-top:1px solid #ddd; padding: 3px 0; text-align:left}";
  81.                 style += ".calenderBottom a {text-decoration:none; margin:2px !important; font-weight:bold; color:#000}";
  82.                 style += ".calenderBottom a.closeCalender{float:right}";
  83.                 style += ".closeCalenderBox {float:right; border:1px solid #000; background:#fff; font-size:9px; width:11px; height:11px; line-height:11px; text-align:center;overflow:hidden; font-weight:normal !important}";
  84.                 style += "</style>";
  85.  
  86.                 var now;
  87.                 if (typeof (arguments[0]) == "string") {
  88.                         selectDate = arguments[0].split("-");
  89.                         var year = selectDate[0];
  90.                         var month = parseInt(selectDate[1]) - 1 + "";
  91.                         var date = selectDate[2];
  92.                         now = new Date(year, month, date);
  93.                 } else if (typeof (arguments[0]) == "object") {
  94.                         now = arguments[0];
  95.                 }
  96.                 var lastMonthEndDate = HS_DateAdd("d", "-1",
  97.                                 now.getFullYear() + "-" + now.getMonth() + "-01").getDate();
  98.                 var lastMonthDate = WeekDay(now.getFullYear() + "-" + now.getMonth()
  99.                                 + "-01");
  100.                 var thisMonthLastDate = HS_DateAdd("d", "-1", now.getFullYear() + "-"
  101.                                 + (parseInt(now.getMonth()) + 1).toString() + "-01");
  102.                 var thisMonthEndDate = thisMonthLastDate.getDate();
  103.                 var thisMonthEndDay = thisMonthLastDate.getDay();
  104.                 var todayObj = new Date();
  105.                 today = todayObj.getFullYear() + "-" + todayObj.getMonth() + "-"
  106.                                 + todayObj.getDate();
  107.  
  108.                 for (i = 0; i < lastMonthDate; i++) { // Last Month's Date
  109.                         lis = "<li class='lastMonthDate'>" + lastMonthEndDate + "</li>"
  110.                                         + lis;
  111.                         lastMonthEndDate--;
  112.                 }
  113.                 for (i = 1; i <= thisMonthEndDate; i++) { // Current Month's Date
  114.  
  115.                         if (today == now.getFullYear() + "-" + now.getMonth() + "-" + i) {
  116.                                 var todayString = now.getFullYear() + "-"
  117.                                                 + (parseInt(now.getMonth()) + 1).toString() + "-" + i;
  118.                                 lis += "<li><a href=javascript:void(0) class='today' onclick='_selectThisDay(this)' title='"
  119.                                                 + now.getFullYear()
  120.                                                 + "-"
  121.                                                 + (parseInt(now.getMonth()) + 1)
  122.                                                 + "-"
  123.                                                 + i
  124.                                                 + "'>"
  125.                                                 + i
  126.                                                 + "</a></li>";
  127.                         } else {
  128.                                 lis += "<li><a href=javascript:void(0) onclick='_selectThisDay(this)' title='"
  129.                                                 + now.getFullYear()
  130.                                                 + "-"
  131.                                                 + (parseInt(now.getMonth()) + 1)
  132.                                                 + "-"
  133.                                                 + i
  134.                                                 + "'>"
  135.                                                 + i
  136.                                                 + "</a></li>";
  137.                         }
  138.  
  139.                 }
  140.                 var j = 1;
  141.                 for (i = thisMonthEndDay; i < 6; i++) { // Next Month's Date
  142.                         lis += "<li class='nextMonthDate'>" + j + "</li>";
  143.                         j++;
  144.                 }
  145.                 lis += style;
  146.  
  147.                 var CalenderTitle = "<a href='javascript:void(0)' class='NextMonth' onclick=HS_calender(HS_DateAdd('m',1,'"
  148.                                 + now.getFullYear()
  149.                                 + "-"
  150.                                 + now.getMonth()
  151.                                 + "-"
  152.                                 + now.getDate() + "'),this) title='Next Month'>&raquo;</a>";
  153.                 CalenderTitle += "<a href='javascript:void(0)' class='LastMonth' onclick=HS_calender(HS_DateAdd('m',-1,'"
  154.                                 + now.getFullYear()
  155.                                 + "-"
  156.                                 + now.getMonth()
  157.                                 + "-"
  158.                                 + now.getDate() + "'),this) title='Previous Month'>&laquo;</a>";
  159.                 CalenderTitle += "<span class='selectThisYear'><a href='javascript:void(0)' onclick='CalenderselectYear(this)' title='Click here to select other year' >"
  160.                                 + now.getFullYear()
  161.                                 + "</a></span>年<span class='selectThisMonth'><a href='javascript:void(0)' onclick='CalenderselectMonth(this)' title='Click here to select other month'>"
  162.                                 + (parseInt(now.getMonth()) + 1).toString() + "</a></span>月";
  163.  
  164.                 if (arguments.length > 1) {
  165.                         arguments[1].parentNode.parentNode.getElementsByTagName("ul")[1].innerHTML = lis;
  166.                         arguments[1].parentNode.innerHTML = CalenderTitle;
  167.  
  168.                 } else {
  169.                         var CalenderBox = style
  170.                                         + "<div class='calender'><div class='calenderTitle'>"
  171.                                         + CalenderTitle
  172.                                         + "</div><div class='calenderBody'><ul class='day'><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul><ul class='date' id='thisMonthDate'>"
  173.                                         + lis
  174.                                         + "</ul></div><div class='calenderBottom'><a href='javascript:void(0)' class='closeCalender' onclick='closeCalender(this)'>×</a><span><span><a href=javascript:void(0) onclick='_selectThisDay(this)' title='"
  175.                                         + todayString + "'>Today</a></span></span></div></div>";
  176.                         return CalenderBox;
  177.                 }
  178.         }
  179.         function _selectThisDay(d) {
  180.                 var boxObj = d.parentNode.parentNode.parentNode.parentNode.parentNode;
  181.                 boxObj.targetObj.value = d.title;
  182.                 boxObj.parentNode.removeChild(boxObj);
  183.         }
  184.         function closeCalender(d) {
  185.                 var boxObj = d.parentNode.parentNode.parentNode;
  186.                 boxObj.parentNode.removeChild(boxObj);
  187.         }
  188.  
  189.         function CalenderselectYear(obj) {
  190.                 var opt = "";
  191.                 var thisYear = obj.innerHTML;
  192.                 for (i = 1970; i <= 2020; i++) {
  193.                         if (i == thisYear) {
  194.                                 opt += "<option value="+i+" selected>" + i + "</option>";
  195.                         } else {
  196.                                 opt += "<option value="+i+">" + i + "</option>";
  197.                         }
  198.                 }
  199.                 opt = "<select onblur='selectThisYear(this)' onchange='selectThisYear(this)' style='font-size:11px'>"
  200.                                 + opt + "</select>";
  201.                 obj.parentNode.innerHTML = opt;
  202.         }
  203.  
  204.         function selectThisYear(obj) {
  205.                 HS_calender(obj.value
  206.                                 + "-"
  207.                                 + obj.parentNode.parentNode.getElementsByTagName("span")[1]
  208.                                                 .getElementsByTagName("a")[0].innerHTML + "-1",
  209.                                 obj.parentNode);
  210.         }
  211.  
  212.         function CalenderselectMonth(obj) {
  213.                 var opt = "";
  214.                 var thisMonth = obj.innerHTML;
  215.                 for (i = 1; i <= 12; i++) {
  216.                         if (i == thisMonth) {
  217.                                 opt += "<option value="+i+" selected>" + i + "</option>";
  218.                         } else {
  219.                                 opt += "<option value="+i+">" + i + "</option>";
  220.                         }
  221.                 }
  222.                 opt = "<select onblur='selectThisMonth(this)' onchange='selectThisMonth(this)' style='font-size:11px'>"
  223.                                 + opt + "</select>";
  224.                 obj.parentNode.innerHTML = opt;
  225.         }
  226.         function selectThisMonth(obj) {
  227.                 HS_calender(obj.parentNode.parentNode.getElementsByTagName("span")[0]
  228.                                 .getElementsByTagName("a")[0].innerHTML
  229.                                 + "-" + obj.value + "-1", obj.parentNode);
  230.         }
  231.         function HS_setDate(inputObj) {
  232.                 var calenderObj = document.createElement("span");
  233.                 calenderObj.innerHTML = HS_calender(new Date());
  234.                 calenderObj.style.position = "absolute";
  235.                 calenderObj.targetObj = inputObj;
  236.                 inputObj.parentNode.insertBefore(calenderObj, inputObj.nextSibling);
  237.         }
  238. </script>
  239.  
  240. </head>
  241. <body>
  242. <h3>js日期选择器，自动填充日期</h3>
  243.  
  244. 日期：
  245. <input type="text" style="width: 70px" onfocus="HS_setDate(this)">
  246.  
  247. </body>
  248. </html>

回复 "js日期选择器，自动填充日期"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666