写一个面试时间通知。用jquery ui 具体功能已经可以了,不过样式还没调

一、需要引入的文件,这些可以到官网下载

<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>

二、HTML代码如下

<input type="text" id="amount" readonly >
<br>
选择日期:
<br>
<input type="hidden" id="actualDate" readonly>
<div id="datepicker" class="w270"></div>
<br>
选择小时:
<br>
<div id="slider_hour" class="w270"></div>
<br>
选择分钟:
<br>
<div id="slider_minute" class="w270"></div>

三、js代码如下

function refreshSwatch() {
var date = $( "#actualDate" ).val(),
hour = $( "#slider_hour" ).slider( "value" ),
minute = $( "#slider_minute" ).slider( "value" );
$( "#amount" ).val( date+" "+hour+":"+minute );
} $(function() {
//时间和分钟
$( "#slider_hour, #slider_minute" ).slider({
orientation: "horizontal",
slide: refreshSwatch,
change: refreshSwatch
});
$( "#slider_hour" ).slider({
value:new Date().getHours(),
min: 6,
max: 23,
step: 1
});
$( "#slider_minute" ).slider({
value:new Date().getMinutes(),
min: 0,
max: 50,
step: 10
});
//日期
$("#datepicker").datepicker({
dateFormat:'yy-mm-dd',
dayNamesMin:['日', '一', '二', '三', '四', '五', '六'],
monthNames:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
minDate:new Date().getFullYear()+"-"+(new Date().getMonth()+1)+"-"+new Date().getDate(),
altField: '#actualDate',//将选择的日期同步到另一个域
onSelect:refreshSwatch
});
});

四、问题

1)、日历的回调函数是哪个??? 就是点击日期时,可以获取的时间(yy-mm-dd)。这样就不用再多写一个input(<input type="hidden" id="actualDate" readonly>)了,用来存日期。

JQuery UI 日历加时间的更多相关文章

  1. Jquery ui datepicker 设置日期范围,如只能隔3天

    最近的后台项目前端使用了jquery ui 日历控件自然就使用了jquery ui 的   datepicker 后台数据比较好大,一般是千万级的和百万级的关联,查询会很慢,所以后加想多加些过滤条件, ...

  2. 2015第10周三jquery ui position

    jQuery UI API - .position() 所属类别 方法重载(Method Overrides) | 方法(Methods) | 实用工具(Utilities) 用法 描述:相对另一个元 ...

  3. jQuery ui 中文日历

    jQuery ui 中文日历 <link href="css/jquery-ui-1.10.4.custom.min.css" rel="stylesheet&qu ...

  4. 第一好用的时间 日期插件(Adding a Timepicker to jQuery UI Datepicker)

          最近在一个项目中用到了My97DatePicker,国人写的一个挺不错的时间选择插件,简单易用,但是在调试静态时却发现此插件必须产生一个iframe标签指向其主页,试了很多种方法都不能去除 ...

  5. element ui step组件在另一侧加时间轴显示

    这是我开发的时候遇到的一个问题:项目需要在步骤条(竖直方向)的另一侧加时间显示,但是我在element ui 的step组件中一直没找着设置方法,所以就自己想了个办法加进来,效果如下: 代码如下,先上 ...

  6. JQuery UI datepicker 使用方法(转)

    官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/. 一个不错的地址,用来DIY ...

  7. jquery ui widgets-datepicker

    jquery ui的用法就不在此讲述,直接进入jquery ui的窗体小部件(widgets)——datepicker. 相信很多像我这样子的菜鸟少年,如果同一个页面上有两个input文本输入框是用来 ...

  8. 页面日期选择控件--jquery ui datepicker 插件

    日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等.官方地址:http://docs.jquery.com ...

  9. 使用 jQuery UI 和 jQuery 插件构建更好的 Web 应用程序

    简介: 对于那些使用 JavaScript 和 jQuery 库从桌面应用程序转向 Web 应用程序的开发人员来说,他们还不习惯去考虑应用程序基本的外观,因为这些以前都是由操作系统来处理的.了解 jQ ...

随机推荐

  1. 【洛谷P2574】XOR的艺术

    XOR的艺术 题目链接 用线段树维护sum, 修改时 tag[p]^=1; sum=r-l+1-sum; 详见代码 #include<iostream> #include<cstdi ...

  2. HDU1069 Monkey and Banana

    HDU1069 Monkey and Banana 题目大意 给定 n 种盒子, 每种盒子无限多个, 需要叠起来, 在上面的盒子的长和宽必须严格小于下面盒子的长和宽, 求最高的高度. 思路 对于每个方 ...

  3. 关于前端token

    主要是一些前端使用的流程: 客户端使用用户名密码登录.服务端收到请求,去验证用户名与密码.验证成功后,服务端会签发一个 Token,把这个 Token 发送给客户端.客户端将收到的Token存储起来. ...

  4. 19.springboot邮件服务服务器部署访问不到邮箱服务器解决方案

    1.前言 在Springboot项目的生产环境中,win系统环境下,邮箱服务是可以正常使用的. 当项目部署到阿里云服务器上之后,因为服务器端口采用安全组的方式,25端口访问不到. 在网上查找了一部分资 ...

  5. TIDB4 —— 三篇文章了解 TiDB 技术内幕 - 谈调度

    原文地址:https://pingcap.com/blog-cn/tidb-internal-3/ 为什么要进行调度 先回忆一下第一篇文章提到的一些信息,TiKV 集群是 TiDB 数据库的分布式 K ...

  6. 如何配置Java环境变量

    百度经验 | 百度知道 | 百度首页 | 登录 | 注册 新闻 网页 贴吧 知道 经验 音乐 图片 视频 地图 百科 文库 帮助   发布经验 首页 分类 任务 回享 商城 特色 知道 百度经验 &g ...

  7. VUE插件整理

    转自:https://blog.csdn.net/miaozhenzhong/article/details/80138174 1.VsCode官方插件地址: https://marketplace. ...

  8. 『ACM C++』HDU杭电OJ | 1415 - Jugs (灌水定理引申)

    今天总算开学了,当了班长就是麻烦,明明自己没买书却要带着一波人去领书,那能怎么办呢,只能说我善人心肠哈哈哈,不过我脑子里突然浮起一个念头,大二还要不要继续当这个班委呢,既然已经体验过就可以适当放下了吧 ...

  9. 滑动窗口(poj,线段树维护区间最值)

    题目描述 现在有一堆数字共N个数字(N<=10^6),以及一个大小为k的窗口.现在这个从左边开始向右滑动,每次滑动一个单位,求出每次滑动后窗口中的最大值和最小值. 例如: The array i ...

  10. chromium之ThreadLocalStorage

    看看头文件怎么用 // Wrapper for thread local storage. This class doesn't do much except provide // an API fo ...