客户提了个需求,输入日期,想也不用想,立刻翻查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. VUE中常用的一些方法

    1.获取URL中的参数 export function getUrlKey(name) { return decodeURIComponent((new RegExp('[?|&]' + na ...

  2. UVA - 10570 Meeting with Aliens(外星人聚会)(暴力枚举)

    题意:输入1~n的一个排列(3<=n<=500),每次可以交换两个整数.用最少的交换次数把排列变成1~n的一个环状序列. 分析:正序反序皆可.枚举每一个起点,求最少交换次数,取最小值. 求 ...

  3. UVA - 11093 Just Finish it up(环形跑道)(模拟)

    题意:环形跑道上有n(n <= 100000)个加油站,编号为1~n.第i个加油站可以加油pi加仑.从加油站i开到下一站需要qi加仑汽油.你可以选择一个加油站作为起点,起始油箱为空(但可以立即加 ...

  4. EBGP的多跳与验证命令

    EBGP的多跳与验证命令: ①:neighbor router-id ebgp-multihop “int”——设置多跳. ②:neighbor router-id password “str”——设 ...

  5. VUE注册全局组件和局部组件

    全局组件 第一步:在components文件夹下建立一个子文件Users.vue <template> <div class="users"> {{msg} ...

  6. UML-异常处理

    1.名词解释 缺陷(Fault):错误引起的行为.如:程序员拼写错了数据库名称 错误(Error):缺陷在运行系统中的表现.如:当使用拼写错误的名称调用数据库时,抛出数据库异常 故障(Failure) ...

  7. 启动运行python3时 UnicodeDecodeError: 'gbk' codec can't decode byte 0xa2 in position 170: illegal multibyte sequence

    重现 在cmd中输入Python,运行后,出现以下错误: Python 3.7.3 (default, Mar 27 2019, 17:13:21) [MSC v.1915 64 bit (AMD64 ...

  8. Bootstrap-模态框 modal.js

    参考网址:http://v3.bootcss.com/(能抄不写) 1.大模态框 图片效果图: 代码:(button的属性data-target对应的是具体模态框的class) <!-- Lar ...

  9. scala通过尾递归解析提取字段信息

    一.背景 获取数据中以“|”作为字段间的分隔符,但个别字段中数据也是以“|”作为分隔符.因此,在字段提取时需要保护数据完整性. 二.实现 1.数据以“|”分隔,可以采用递归方式迭代解析.通过尾递归方式 ...

  10. SQLite数据库以及增删改查的案例

    Android使用开源的与操作系统无关的SQL数据库——SQLite 一:在命令行下创建数据库: 1.启动模拟器后,打开命令行,执行adb shell 2.进入所在工程目录 3.执行sqlite3 m ...