客户提了个需求,输入日期,想也不用想,立刻翻查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. JS ~ Promise 对象

    Promise 对象用于表示一个异步操作的最终状态(完成或失败),以及该异步操作的结果值. Promise.all(iterable) 这个方法返回一个新的promise对象,该promise对象在i ...

  2. 标准JAVA工程结构

  3. tomcat的8080,8009,8443,8005都是什么端口

    <Server port="8005" shutdown="SHUTDOWN"> 远程停服务端口<Connector port="8 ...

  4. C++中的string详解

    标准库类型string表示可变长的字符序列,为了在程序中使用string类型,我们必须包含头文件: #include <string>  声明一个字符串 声明一个字符串有很多种方式,具体如 ...

  5. 每天一点点之数据结构与算法 - 应用 - 分别用链表和数组实现LRU缓冲淘汰策略

    一.基本概念: 1.什么是缓存? 缓存是一种提高数据读取性能的技术,在硬件设计.软件开发中都有着非广泛的应用,比如常见的CPU缓存.数据库缓存.浏览器缓存等等.   2.为什么使用缓存?即缓存的特点缓 ...

  6. 7. react 基础 - React Developer Tools 的安装 及 使用

    1. 安装 react 开发调试工具 React Developer Tools 打开 chrome 浏览器访问 chrome://extensions/ 点击右上角的 拓展程序 -> 打开 c ...

  7. CTF-域渗透--HTTP服务--命令注入2

    开门见山 1. 启动metasploit 2. 设置参数参数选项 3. 查看最后设置后的结果 4. 启动监听 5. 使用msfvemon制作webshell 6. 开启apache服务 7. 使用ba ...

  8. Python连接Oracle问题

    Python连接Oracle问题 1.pip install cx_oracle 2.会出现乱码问题:     方法一:配置环境变量     export NLS_LANG="SIMPLIF ...

  9. windows server 2012 ftp搭建

    1.安装IIS的时候勾选ftp 2.创建ftp站点,先检查21端口是否开放 一定要勾选身份认证,匿名去掉,不然一直登陆不了,也不提示 一直点下一步, 遇到的坑,第一个:出现“打开ftp服务器上的文件夹 ...

  10. POJ 3659 再谈树形DP

    Cell Phone Network Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5325   Accepted: 188 ...