写一个面试时间通知。用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. html5中event获取data和class

    获取data和class var tare=$(e.relatedTarget).data("id");var tar=event.target;console.log(tare) ...

  2. 【洛谷P4124】[CQOI2016]手机号码

    手机号码 数位DP模板题 记忆化搜索: #include<iostream> #include<cstring> #include<cstdio> using na ...

  3. SQLite动态库下载

    其中带有“bundle”字样的表示动态库是按混合模式编译的,在 使用的时候只需要System.Data.SQLite.dll就可以了 而不带“bundle”的则是将非托管部分和托管部分分别编 译,Sy ...

  4. Object Detection with Discriminatively Trained Part Based Models

    P. Felzenszwalb, R. Girshick, D. McAllester, D. RamananObject Detection with Discriminatively Traine ...

  5. TIDB3 —— 三篇文章了解 TiDB 技术内幕 - 说计算

    原文地址:https://pingcap.com/blog-cn/tidb-internal-2/ 关系模型到 Key-Value 模型的映射 在这我们将关系模型简单理解为 Table 和 SQL 语 ...

  6. 分组函数group by和Oracle中分析函数partition by的用法以及区别

    1.分组函数group by和Oracle中分析函数partition by的用法以及区别 2.开窗函数.

  7. oracle删除一个表内的重复数据,

    查询以及删除一个数据库表内的重复数据. 1.查询表中的多余的重复记录,重复记录是根据单个字段来判断的. select * from biao where id in (select id from b ...

  8. Less 常用基础知识

    LESS 中的注释 也可以额使用css 中的注释(/**/) 这种方式是可以被编译出来的. 也可以使用// 注释 不会被编译的 变量 声明变量的话一定要用@开头 例如:@变量名称:值: @test_w ...

  9. js关于if(''==0)

    在js当中,如下注意 if(''==0){ alert("空字符代表false"); } 空字符串代表false 0代表false false==false 结果就为true了

  10. Tomcat服务器的介绍、安装配置

    [1] Tomcat服务器的介绍 1.是一个免费的.开饭源代码的Servlet服务器,目前非常流行. 2.Tomcat服务器是Apache软件基金会的一个顶级项目,由Apache.Sun等公司共同开发 ...