使用到的日期插件是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. SQL-W3School-函数:SQL FORMAT() 函数

    ylbtech-SQL-W3School-函数:SQL FORMAT() 函数 1.返回顶部 1. FORMAT() 函数 FORMAT 函数用于对字段的显示进行格式化. SQL FORMAT() 语 ...

  2. Ionic4.x 创建页面以及页面跳转

    创建页面: 1.cd 到项目目录 2.通过ionic g page 页面名称 3.创建完成组件以后会在 src 目录下面多一个 button 的目录,它既是一个页面也是一个 模块. 4.如果我们想在 ...

  3. java中byte数组,二进制binary安装chunk大小读取数据

    int CHUNKED_SIZE = 8000; public void recognizeText(byte[] data) throws InterruptedException, IOExcep ...

  4. shutter 安装和设置快捷键

    1. 打开系统设置 2. 打开 Keyboard 键盘设置 3. 添加成功的状态 4. 单击右侧 Disabled,然后快速按下 Ctrl+Alt+A 如下图 5. Ctrl+Alt+A 测试OK. ...

  5. Python3之高阶函数filter

    Python内建的filter()函数用于过滤序列 和map()一样,filter()也接收一个函数和一个序列.和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是T ...

  6. 【c# 学习笔记】使用新成员隐藏基类成员

    如果想在派生类中定义与基类成员同名的成员,则可以使用new关键字把基类成员隐藏起来. 如果不适应new关键字,在派生类中定义一个与基类成员同名的成员,编译器将产生警告信息,如下代码演示: public ...

  7. LVS负载均衡在Ubuntu环境下部署详解

    一.本地环境介绍: 负载均衡的三台机器均为Ubuntu Server 14.04 64位系统,内核中已集成ipvs模块( modprobe -l | grep ipvs 查看 ).为演示LVS负载均衡 ...

  8. 码云clone提示“you do not have permission to pull from the repository”

    使用git进行项目下载,换了电脑,配置了账号和邮箱后,pull一个私有项目的时候,出现如下问题: 原因分析: 由于没有设置Gitee的SSH公钥.生成公钥和配置公钥的办法,可以参考Gitee帮助里面的 ...

  9. [转载]DriverStore文件夹特别大,能删除吗?

    [转载]DriverStore文件夹特别大,能删除吗? 转自博客园https://www.cnblogs.com/lovebing/p/6951833.html 这篇文章,清理完C盘多了20G!不要太 ...

  10. Haar-like特征来龙去脉

    Haar-like特征来龙去脉 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ haar-like特征概念 haar-like特征是是计算机视觉领域一种常用的 ...