写一个面试时间通知。用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. 前端html,css基础总结

    0.1.css引入界面的方式: 内联式:通过标签的style属性,在标签上直接写样式. <div style="width:100px; height:100px; backgroun ...

  2. ios断点续传:NSURLSession和NSURLSessionDataTask实现

    苹果提供的NSURLSessionDownloadTask虽然能实现断点续传,但是有些情况是无法处理的,比如程序强制退出或没有调用 cancelByProducingResumeData取消方法,这时 ...

  3. 只包含因子2 3 5的数(51NOD 1010)

    K的因子中只包含2 3 5.满足条件的前10个数是:2,3,4,5,6,8,9,10,12,15. 所有这样的K组成了一个序列S,现在给出一个数n,求S中 >= 给定数的最小的数. 例如:n = ...

  4. DevOps - 版本控制 - GitHub

    README Badges 徽章 Shields.io: Quality metadata badges for open source projects  徽章 官网:https://shields ...

  5. winform Treeview控件使用

    做角色菜单权限时用到treeview控件做树状显示菜单,简单总结了一下用法: 1.在winform窗体中拖入treeview控件,注意修改属性CheckBoxes属性为true,即在节点旁显示复选框 ...

  6. 网站标题被篡改成北京赛车、PK10的解决处理办法

    客户网站于近日被跳转到赌博网站,打开后直接跳转到什么北京赛车,PK10等内容的网站上去,客户网站本身做了百度的推广,导致所有访问用户都跳转到赌博网站上去,给客户带来很大的经济损失,再一个官方网站的形象 ...

  7. C语言实例解析精粹学习笔记——42(插入排序)

    实例说明: 将一个整数数组按从小到大的顺序进行排序.(主要学习基本的插入排序和改进的冒泡排序的算法和应用) 思路1: 从第一个数据开始,分别比较其后的数据,若比它小,则将这两个数的位置交换:从第一个数 ...

  8. HyperLedger Fabric 1.4 关键技术(6.4)

    本节介绍从最底层的账本开始,逐一讲解账本的结构和存储.智能合约的编写和部署.通道的操作.节点的背书和提交.排序的共识和客户端SDK的接口调用,与交易流程顺序相反,由里及表的说明Fabric最关键的技术 ...

  9. nyoj 525 一道水题【字符串(分割)】

    参考:https://blog.csdn.net/dxx_111/article/details/48154687 #include <iostream> #include <cst ...

  10. 最短路径问题 3.Bellman-Ford算法

    简要:Bellman-Ford算法计算的仍然是从一个点到其他所有点的最短路径算法,其时间复杂度是O(NE),N表示点数,E表示边数,不难看出,当一个图稍微稠密一点,边的数量会超过点数那么实际上效率是低 ...