客户提了个需求,输入日期,想也不用想,立刻翻查Jquery,发现是有timepicker.js这个控件,马上就用。

1. 导入库

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="../../js/jquery.timepicker.min.js" type="text/javascript" ></script>

2. HTML

<input type="text" class="datePicker" name="section1_date" placeholder="">

3. JS

<script>
$( function() {
$(".datePicker").datepicker();
$(".datepicker").datepicker( "option", "dateFormat", "yy-mm-dd" ); $(".timePicker").timepicker();
$(".timePicker").timepicker({ 'timeFormat': 'H:i' });
} );
</script>

4. 定义格式

'yy-mm-dd' = 2017-12-07

'H:i' = 14:00

还有很多可以修改的东西,我只是看了一点官方的API,有机会再修改个好看的UI。

jquery.timepicker.js - 最常用的日期JS控件的更多相关文章

  1. jquery 带农历天干地支的日期选择控件

    效果图:

  2. js 跨域的问题 (同一个主域名不同的二级域名下的跨域问题) 解决 WdatePicker.js my97日期选择控件

    例如域名是  a.xx.com  和 b.xx.com    如果一个页面中引入多个iframe,要想能够操作所有iframe,必须都得设置相同domain. 如果iframe的时候  a包含b  为 ...

  3. [Ext JS 4] 实战之 带week(星期)的日期选择控件(三)

    前言 在 [Ext JS 4] 实战之 带week(星期)的日期选择控件(二) 的最后,有提到一个解决方案. 不过这方案有一个条件  ==> “2. 每年的周数从(1-52), 如果超过52 周 ...

  4. JQuery好用的日期选择控件 DatePicker

    近期发现一个很好的基于JQ的前端UI日期选择控件Jquery.DatePicker.js 下载地址:jquery.DatePIcker.js 演示地址:DatePicker - 基于jQuery 1. ...

  5. jquery日期时间控件

    代码下载地址:  jquery日期时间控件下载地址 .  工作中用到, 这里分享一下, 避免重复摸索劳动. 一. HTML 文件    <!DOCTYPE HTML PUBLIC "- ...

  6. jquery mobiscroll移动端日期选择控件(无乱码)

    jquery mobiscroll移动端日期选择控件(无乱码) <pre><!DOCTYPE html><html lang="en">< ...

  7. ASP.NET开发中主要的字符验证方法-JS验证、正则表达式、验证控件、后台验证

    ASP.NET开发中主要的字符验证方法-JS验证.正则表达式.验证控件.后台验证 2012年03月19日 星期一 下午 8:53 在ASP.NET开发中主要的验证方法收藏 <1>使用JS验 ...

  8. JS调用Android、Ios原生控件

    在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...

  9. 【高德地图API】从零开始学高德JS API(二)地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

    原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...

随机推荐

  1. POJ 2239:Selecting Courses 选课

    Selecting Courses Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9380   Accepted: 4177 ...

  2. 【分布式】流式计算Storm框架

    Storm简介: Storm起源Twitter开源的一个类似于Hadoop的实时数据处理框架,不过两则还是有区别的,Hadoop是批量处理数据,而Storm处理的是实时的数据流. Storm应用场景: ...

  3. 大二暑假第六周总结--开始学习Hadoop基础(五)

    简单学习数据仓库HIVE HIVE是一个构建于Hadoop顶端的数据仓库工具 支持大规模数据存储,分析,具有良好的可扩展性 某种程度上可以看做是用户编程接口,本身不存储和处理数据 依赖分布式系统HDF ...

  4. Web前端工程师需要注意的开发规范有哪些?

    从事web前端开发工作我们就需要了解web前端开发的规范,这样才能保证高效快速的完成工作,本篇就和大家分享一下web前端开发工程师需要注意的web前端开发规范有哪些,希望对小伙伴们有所帮助. web前 ...

  5. tf.summary可视化参数

    1.tf.summary.scalar('accuracy', accuracy) 损失值.准确率随着迭代次数的进行,其指标变化情况:一般在画loss,accuary时会用到这个函数. 2.tenso ...

  6. PAT Advanced 1003 Emergency (25) [Dijkstra算法]

    题目 As an emergency rescue team leader of a city, you are given a special map of your country. The ma ...

  7. MyBatis:分页的实现

    日志工厂 思考:我们在测试SQL的时候,要是能够在控制台输出 SQL 的话,是不是就能够有更快的排错效率? 如果一个 数据库相关的操作出现了问题,我们可以根据输出的SQL语句快速排查问题. 对于以往的 ...

  8. SpringBoot+Shiro (一)

    从网上搜索SpringBoot+Shiro相关文章,大部分都需要DB和Ecache的支持.这里提供一个最简单的Spring+Shiro的配置. 前言: 1. 由于SpringBoot官方已经不再建议使 ...

  9. Python String startswith() Method

    一,摘自官方API  https://docs.python.org/3/library/stdtypes.html#methods str.startswith(prefix[, start[, e ...

  10. redis常用命令--zsets

    zsets常用命令: zadd key score1 mb1 [score2 mb2....]:像key中添加元素和这个元素的分数,如果元素已经存在,则替换分数. zscore key mb :获取k ...