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

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

实现方法如下：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>获取星期</title>

     <script src="../jquery-1.7.2.min.js"></script>

     <script src="datepicker/WdatePicker.js"></script>

     <style type="text/css">

         .search-input {

             padding: 3px 24px 3px 6px;

             width: 190px;

             height: 30px;

             border-radius: 4px;

             font-size: 12px;

             line-height: 1.42857143;

             color: #555;

             background-color: #fff;

             border: 1px solid #ccc;

             vertical-align: middle;

         }

         .search-input:focus {

             border-color: #66afe9;

             outline: 0;

             -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);

             box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);

         }

     </style>

 </head>

 <body>

     <div class="search-block">

         <label class="search-label" for="startTime">日期：</label>

         <input class="search-input" id="selDate" type="text" placeholder="选择时间" onfocus="WdatePicker({ dateFmt: 'yyyy-MM-dd', onpicked: getDay() })" autocomplete="off">

         <span class="input-day" id="curDay">星期一</span>

     </div>

     <script type="text/javascript">

         function getDay() {

             var value = $("#selDate").val().trim();

             if (value == "") {

                 return;

             } else {

                 var day = new Date(value).getDay(),

                     text = "";

                 switch (day) {

                     case 0:

                         text = "星期日";

                         break;

                     case 1:

                         text = "星期一";

                         break;

                     case 2:

                         text = "星期二";

                         break;

                     case 3:

                         text = "星期三";

                         break;

                     case 4:

                         text = "星期四";

                         break;

                     case 5:

                         text = "星期五";

                         break;

                     case 6:

                         text = "星期六";

                         break;

                 }

                 $("#curDay").text(text);

             }

         }

     </script>

 </body>

 </html>

效果如图：

完成！

JS实现当前选择日期是星期几的更多相关文章

  1. [js开源组件开发]js手机联动选择日期 开源git

    js手机联动选择日期 这里在前面的<js手机联动选择地区>的基础上,改造数据源之后形成的一个日期的选择器,当然你可以使用之前的PC上模式的<日期控件>,它同时也支持手机端,ht ...

  2. [Ext JS 4] 实战之 带week(星期)的日期选择控件(三)

    前言 在 [Ext JS 4] 实战之 带week(星期)的日期选择控件(二) 的最后,有提到一个解决方案. 不过这方案有一个条件  ==> “2. 每年的周数从(1-52), 如果超过52 周 ...

  3. [Ext JS 4] 实战之 带week(星期)的日期选择控件

    前言 Ext JS 3 和 Ext JS 4中都有提供日期选择的组件(当然早期版本也有). 但是有一些日期选择的需求是要看到星期,就是日期中的哪一天是这一年的第几周. 遗憾的是Ext js 并没有提供 ...

  4. 根据日期字符串获取星期几，日期获取星期，时间获取星期，js获取星期

    根据日期字符串获取星期几,日期获取星期,时间获取星期,js获取星期 >>>>>>>>>>>>>>>>&g ...

  5. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  6. 自己封装的一个js方法用于获取显示的星期和日期时间

    自己封装的一个js方法用于获取显示的星期和日期时间 /** * 获取用于显示的星期和日期时间 * @param date * @returns {string} */ function getWeek ...

  7. 用JS把数组内的日期转换为星期

    核心代码 给定日期是星期几,应把字符串转为Date: new.Date('2017-12-30').getDay(); // 返回0,表示星期天,1:星期一…… 案例: 需求: 调用此方法 funct ...

  8. mui选择时间、选择日期

      完整代码: <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-i ...

  9. bootstrap的datepicker在选择日期后调用某个方法

    bootstrap的datepicker在选择日期后调用某个方法 2016-11-08 15:14 1311人阅读 评论(0) 收藏 举报 首先感谢网易LOFTER博主Ivy的博客,我才顿悟了问题所在 ...

随机推荐

  1. JavaScript中三个等号和两个等号的区别（“===”与“==”的区别）

    1.===:三个等号我们称为等同符,当等号两边的值为相同类型的时候,直接比较等号两边的值,值相同则返回true,若等号两边的值类型不同时直接返回false. 例:100===“100”   //返回f ...

  2. django模型多对多调用

    对于如下的模型: from django.db import models # Create your models here. class Student(models.Model): name = ...

  3. StyleCop学习笔记-文档规则

    文档规则: .SA1600:ElementsMustBeDocumented元素必须添加注释 .SA1601: PartialElementsMustBeDocumented Partial修饰的成员 ...

  4. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_15-课程预览功能开发-接口开发

    红色部分 定义model 定义api接口 Service 主要分为这几步 定义feignClient 打开cms接口,根据接口来写feignClient Service调用 service调用feig ...

  5. 阶段5 3.微服务项目【学成在线】_day17 用户认证 Zuul_03-用户认证-认证服务查询数据库-查询用户接口-接口定义

    1.2.4 查询用户接口 完成用户中心根据账号查询用户信息接口功能. 在ucenter这个服务里面定义查询用户信息的接口 这个接口在auth的服务的loadUserByUserName这个方法里面被调 ...

  6. ireport如何拼接sql?

    ireport如何拼接sql   ireport如何拼接sql? 解决方法: 1.ireport的sql select * from emp as e $P!{whereSQL}; 2.java代码 ...

  7. 123456123456#0#-----com.threeapp.xiongMaoPaoPao01----熊猫跑酷01

    com.threeapp.xiongMaoPaoPao01----熊猫跑酷01

  8. python数据分析数据标准化及离散化详解

    python数据分析数据标准化及离散化详解 本文为大家分享了python数据分析数据标准化及离散化的具体内容,供大家参考,具体内容如下 标准化 1.离差标准化 是对原始数据的线性变换,使结果映射到[0 ...

  9. Dapper.NET—轻量ORM

    Dapper.NET使用 本文目录 Dapper.NET使用 1.为什么选择Dapper 2.以Dapper(4.0)为例. 2.1 在数据库中建立几张表. 2.2实体类. 3.使用方法 3.1  一 ...

  10. [学习笔记] Blender layout 视图切换

    layout 数字键5  --- 正交视图/透视图 切换 数字键0 -- 摄像机视图 数字键7 -- 顶视图 数字键1 --- 前视图 数字键3 --- 右视图 ctrl +数字键3 --- 左视图 ...