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

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

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

二、HTML代码如下

  1. <input type="text" id="amount" readonly >
  2. <br>
  3. 选择日期:
  4. <br>
  5. <input type="hidden" id="actualDate" readonly>
  6. <div id="datepicker" class="w270"></div>
  7. <br>
  8. 选择小时:
  9. <br>
  10. <div id="slider_hour" class="w270"></div>
  11. <br>
  12. 选择分钟:
  13. <br>
  14. <div id="slider_minute" class="w270"></div>

三、js代码如下

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

四、问题

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. grunt_beginner

    前端集成解决方案:一套包含框架 和 工具,便于开发者快速构建美丽实用的web应用程序的工作流,同时 这套工作流必须是稳健强壮的. Yeman Bower web包管理器 框架.库.公共部分 Grunt ...

  2. android(eclipse)广播机制知识梳理(三)

    1:分类:   标准广播:没有先后顺序,无法被截断   有序广播:又先后顺序,可以截断 2:接收广播:首先进行注册,注册的方式有静态注册和动态注册.也就是在代码中注册和在AndroidManifest ...

  3. JavaScript自己整理的基础-01

    1.JavaScript 简介: JavaScript是互联网上最流行的脚本语言,所有现代的HTML都使用JavaScript.既然是脚本语言,那么它的特点就有一下三种: (1)弱类型: (2)解释型 ...

  4. JavaScript 基础(四) 循环

    JavaScript的循环有两种,一种是for 循环,通过初始条件,结束条件和递增条件来循环执行语句块: var x = 0; var i; for(i=1; i <=10000; i++){ ...

  5. Java的内存--内存溢出vs内存泄露(2)

    系统上线后,经常会出现内存不足等错误out of memory,很是头疼,决定要一探究竟 内存溢出 1. 定义及原因          内存溢出是指应用系统中存在无法回收的内存或使用的内存过多,最终使 ...

  6. vuex vue状态管理

    第一步安装vuex(安装在生产环境) npm install vuex 第二步 src下新建store文件夹 用来专门放状态管理,store文件夹下新建四个js文件 index.js  actions ...

  7. let's encrypt部署免费泛域名证书

    环境说明 [root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.5.1804 (Core) [root@localhos ...

  8. vue-cli中vuex IE兼容

    vue2.0 兼容ie9及其以上 vue-cli中使用vuex的项目 在IE中会出现页面空白 控制台报错的情况:我们只需要安装一个插件,然后在main.js中全局引入即可 安装 npm install ...

  9. springmvc处理器拦截器

    处理器拦截器(interceptor)是做什么用的? 想知道处理拦截器做什么用的,你要先了解下处理·流程链·. 前端控制器(dispatcherServlet)接收到请求,通过handleMappin ...

  10. 【shell脚本学习-4】

    文本处理 #!/bin/bash#----------文本处理---------- #---------------echo----------------- # "-n":处理光 ...