zoukankan      html  css  js  c++  java
  • 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>

    效果如图:

    完成!

  • 相关阅读:
    如何解决列表框控件宽度不够的问题
    SQL Server 2005的服务器角色(public)的问题
    使用多结果集读取数据减少服务器往返,提高性能
    SQL SERVER的单用户模式以及专用管理员连接
    SQL Server错误严重性级别和异常处理
    使用TransactionScope做分布式事务协调
    通过编程为Outlook 2007添加邮件规则
    微软中国的相关研发团队 交流平台
    有关连接字符串的一些细节
    Web Application和Web Site两个模板的比较
  • 原文地址:https://www.cnblogs.com/yeqrblog/p/6501685.html
Copyright © 2011-2022 走看看