客户提了个需求,输入日期,想也不用想,立刻翻查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. JVM探秘:MAT分析内存溢出

    本系列笔记主要基于<深入理解Java虚拟机:JVM高级特性与最佳实践 第2版>,是这本书的读书笔记. MAT是分析Java堆内存的一个工具,全称是 The Eclipse Memory A ...

  2. JS页面校验

    结构: 1.导入正则表达式校验包:https://blog.csdn.net/weixin_44718300/article/details/88726653 2.页面校验.HTML <!DOC ...

  3. Objective-C 和 Swift 第三方库使用

    https://www.jianshu.com/p/6be32a047ca7 原文地址: Objective-C 和 Swift 第三方库使用 注1:文章写于2016年9月,(swift 3.0.Xc ...

  4. 浅谈$NTT$

    \(NTT\),快速数论变换,可以理解为带模数的FFT. 原根 & 阶 先来补一点数论.(这里讲的应该很少,都是针对\(ntt\)胡的,具体的话可以去看<初等数论>那本小黄书). ...

  5. 吴裕雄--天生自然 JAVASCRIPT开发学习:函数

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 关于SOA的架构设计案例分析

    SOA体系架构及相关技术,主要应用在企业应用集成领域,它能够以服务的方式共享和复用企业现有应用资产,保护用户IT投资,并能够以服务的方式构建新的业务流程,对企业流程进行灵活重构和优化,增强业务的敏捷性 ...

  7. cf 1241 E. Paint the Tree(DP)

    题意: 有一颗树,n个点,边有边权. 有无限多种颜色,每个点可以同时染上k种颜色,如果一条边的两个端点 拥有至少一种相同的颜色,那么说这条边是“饱和的”. 问:所有“饱和边”的权值和最大为多少,只需要 ...

  8. 选择排序_python

    def selectdata(ls): for i in range(len(ls)): index=i for j in range(i+1,len(ls)): if ls[j]<ls[ind ...

  9. Java实用小工具

    工具一:对Java中的List<Map<String,Object>>格式数据实现递归 /** * 递归List<Map<String,Object>> ...

  10. 和为S的连续正序列

    [问题]小明很喜欢数学,有一天他在做数学作业时,要求计算出9~16的和,他马上就写出了正确答案是100.但是他并不满足于此,他在想究竟有多少种连续的正数序列的和为100(至少包括两个数).没多久,他就 ...