JQuery UI 日历加时间
写一个面试时间通知。用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 日历加时间的更多相关文章
- Jquery ui datepicker 设置日期范围,如只能隔3天
最近的后台项目前端使用了jquery ui 日历控件自然就使用了jquery ui 的 datepicker 后台数据比较好大,一般是千万级的和百万级的关联,查询会很慢,所以后加想多加些过滤条件, ...
- 2015第10周三jquery ui position
jQuery UI API - .position() 所属类别 方法重载(Method Overrides) | 方法(Methods) | 实用工具(Utilities) 用法 描述:相对另一个元 ...
- jQuery ui 中文日历
jQuery ui 中文日历 <link href="css/jquery-ui-1.10.4.custom.min.css" rel="stylesheet&qu ...
- 第一好用的时间 日期插件(Adding a Timepicker to jQuery UI Datepicker)
最近在一个项目中用到了My97DatePicker,国人写的一个挺不错的时间选择插件,简单易用,但是在调试静态时却发现此插件必须产生一个iframe标签指向其主页,试了很多种方法都不能去除 ...
- element ui step组件在另一侧加时间轴显示
这是我开发的时候遇到的一个问题:项目需要在步骤条(竖直方向)的另一侧加时间显示,但是我在element ui 的step组件中一直没找着设置方法,所以就自己想了个办法加进来,效果如下: 代码如下,先上 ...
- JQuery UI datepicker 使用方法(转)
官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/. 一个不错的地址,用来DIY ...
- jquery ui widgets-datepicker
jquery ui的用法就不在此讲述,直接进入jquery ui的窗体小部件(widgets)——datepicker. 相信很多像我这样子的菜鸟少年,如果同一个页面上有两个input文本输入框是用来 ...
- 页面日期选择控件--jquery ui datepicker 插件
日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等.官方地址:http://docs.jquery.com ...
- 使用 jQuery UI 和 jQuery 插件构建更好的 Web 应用程序
简介: 对于那些使用 JavaScript 和 jQuery 库从桌面应用程序转向 Web 应用程序的开发人员来说,他们还不习惯去考虑应用程序基本的外观,因为这些以前都是由操作系统来处理的.了解 jQ ...
随机推荐
- maven学习记录三——maven整合ssh框架
6 整合ssh框架 6.1 依赖传递 只添加了一个struts2-core依赖,发现项目中出现了很多jar, 这种情况 叫 依赖传递 6.2 依赖版本冲突的解决 1. 第 ...
- FastJSON、Gson、Jackson(简单了解使用)
下载地址(maven) Jackson:http://mvnrepository.com/search?q=jackson FastJson:http://mvnrepository.com/sear ...
- [LuoguP1141]01迷宫
1141 01迷宫 题目描述 有一个仅由数字0与1组成的n×n格迷宫.若你位于一格0上,那么你可以移动到相邻4格中的某一格1上,同样若你位于一格1上,那么你可以移动到相邻4格中的某一格0上. 你的任务 ...
- IPv4和IPv6的兼容问题
一网络拓扑 Ipv6网络1 路由器A IPv4网络 路由器B IPv6网络2 二知识补充 [注]双协议栈主机(路由器A.B)通过域名解析器区分传过来的是IPv4还是IPv6 三处理技术 双协议栈 Ip ...
- Select 语句执行顺序以及如何提高Oracle 基本查询效率
今天把这几天做的练习复习了一下,不知道自己写得代码执行的效率如何以及要如何提高,于是乎上网开始研究一些材料,现整理如下: 首先,要了解在Oracle中Sql语句运行的机制.以下是sql语句的执行步骤: ...
- Python3集成安装xadmin
Python3集成安装xadmin1:创建虚拟环境C:\Users\Adminstrator>mkvirtualenv -p C:\Python34\python.exe MyDjango如果提 ...
- Eclipse中各种文件的注释与取消注释的快捷键
Eclipse中各种文件的注释与取消注释的快捷键 Java文件: 注释和取消注释的快捷键都是:CTRL + / 或 Shift+Ctrl+C JS文件: 注释和取消注释的快捷键都是:CTRL + / ...
- haystack+Elasticsearch搜素引擎
搜索引擎原理 通过搜索引擎进行数据查询时,搜索引擎并不是直接在数据库中进行查询,而是搜索引擎会对数据库中的数据进行一遍预处理,单独建立起一份索引结构数据. 我们可以将索引结构数据想象成是字典书籍的索引 ...
- Learning Experience of Big Data: Learn to install CentOs 6.5 on my laptop
I have learnt some experience about Big Data during my summer vocation,I was told that The first thi ...
- shell重温---基础篇(shell数组&数组操作)
上篇博客已经分析重温了shell的运行方式以及其中的变量还有字符串,之后按照套路就是数组方面了,废话不多说,直接进入正题哈.(小白笔记,各位看官勿喷...) bash shell呢,支持一位数 ...