写一个面试时间通知。用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. 在vue项目中的axios使用配置记录

    默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关. axiosConfig.js import Vue from 'vue' import axios from ' ...

  2. java连接数据库(sqlserver和mysql)

    java连接sqlserver数据库 废话不多说,直接看代码: public static void main(String[] args) { // TODO Auto-generated meth ...

  3. Android学习笔记_32_通过WebView实现JS代码与Java代码互相通信

    webview两种实现方法,覆盖onKeyDown()方法 缓存 WebSettings应用注意的几个问题 1.要实现JS代码与Java代码互相通信,需要通过Android的WebView控件,在视图 ...

  4. 关于前端token

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

  5. redis介绍及在购物车项目中的应用,用户认证

    1.redis 2.购物车的构建 api结构: models.py(创建完后自行添加数据) from django.db import models from django.contrib.conte ...

  6. Easyui前端、JAVA后台 上传附件

    前端使用easyui框架,后台使用JAVA 的JFinal框架开发 功能描述:实现附件上传功能.文件上传路径为:../upload(上传文件夹)/身份证号/慢病编码/上传的附件. 细节要求:实现多图片 ...

  7. C/C++远程开机

    // 2C:4D:54:ED:08:F0 #include <stdio.h> #include <Windows.h> #include <winsock.h> ...

  8. numpy的总结

    一:基础篇 1)数值 import numpy as np np.set_printoptions(linewidth=200,suppress=True) a = np.array([1,2,3,4 ...

  9. 通过Ambari2.2.2部署HDP大数据服务

    node1 amari-server   node2 amari-agent namenode1,datanode,resourcemanager,zk node3 amari-agent namen ...

  10. 6 大主流 Web 框架优缺点对比(转)

    英文: Kit Kelly   译文:oschina https://www.oschina.net/translate/web-frameworks-conclusions 是该读些评论和做一些总结 ...