JS实现当前选择日期是星期几

使用到的日期插件是My97 Datepicker，这里通过onpicked方法触发getDay()方法，在getDay()方法中获取已选择的日期来判断是星期几。

插件下载地址：http://www.my97.net/dp/down.asp。

实现方法如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>获取星期</title>
 6     <script src="../jquery-1.7.2.min.js"></script>
 7     <script src="datepicker/WdatePicker.js"></script>
 8     <style type="text/css">
 9         .search-input {
10             padding: 3px 24px 3px 6px;
11             width: 190px;
12             height: 30px;
13             border-radius: 4px;
14             font-size: 12px;
15             line-height: 1.42857143;
16             color: #555;
17             background-color: #fff;
18             border: 1px solid #ccc;
19             vertical-align: middle;
20         }
21 
22         .search-input:focus {
23             border-color: #66afe9;
24             outline: 0;
25             -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
26             box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
27         }
28     </style>
29 </head>
30 <body>
31     <div class="search-block">
32         <label class="search-label" for="startTime">日期：</label>
33         <input class="search-input" id="selDate" type="text" placeholder="选择时间" onfocus="WdatePicker({ dateFmt: 'yyyy-MM-dd', onpicked: getDay() })" autocomplete="off">
34         <span class="input-day" id="curDay">星期一</span>
35     </div>
36     <script type="text/javascript">
37         function getDay() {
38             var value = $("#selDate").val().trim();
39             if (value == "") {
40                 return;
41             } else {
42                 var day = new Date(value).getDay(),
43                     text = "";
44                 switch (day) {
45                     case 0:
46                         text = "星期日";
47                         break;
48                     case 1:
49                         text = "星期一";
50                         break;
51                     case 2:
52                         text = "星期二";
53                         break;
54                     case 3:
55                         text = "星期三";
56                         break;
57                     case 4:
58                         text = "星期四";
59                         break;
60                     case 5:
61                         text = "星期五";
62                         break;
63                     case 6:
64                         text = "星期六";
65                         break;
66                 }
67                 $("#curDay").text(text);
68             }
69         }
70     </script>
71 </body>
72 </html>

效果如图：

完成！

 

posted @ 2017-03-04 16:10  Lena_叶  阅读(10749)  评论(0)  编辑  收藏  举报