客户提了个需求,输入日期,想也不用想,立刻翻查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. mybaits的注解方式与配置文件方式比较

    注解方式比配置文件方式简单了更多. 俩种配置 一个是制定配置文件路径,一个直接class指向dao层接口 只需加一个注解@**** 就能够实现 比写一个xml的配置文件简单更多.

  2. HDU - 4082 Hou Yi's secret

    题意:射箭落在n个点,任取三点可构成一个三角形,问最大的相似三角形集(一组互相相似的三角形)的个数. 分析: 1.若n个点中有相同的点,要去重,题目中说射箭会形成洞,任选三个洞构成三角形,因此射在同一 ...

  3. Android之Intent相关知识

    什么是Intent?Intent的作用? Intent是一个消息传递对象,我们可以通过它来启动其他组件或者在组件之间传递数据. 通过Intent启动其他组件 Intent可以用来启动Activity, ...

  4. ROS常见问题(一) 安装ROS时sudo rosdep init指令报错 最全解决方法

    安装ROS时sudo rosdep init指令报错: ERROR: cannot download default sources list from: https://raw.githubuser ...

  5. Python之日志处理(logging模块)《转载》

    Python之日志处理(logging模块): https://www.cnblogs.com/yyds/p/6901864.html

  6. 大二暑假第四周总结--开始学习Hadoop基础(三)

    简单学习云数据库系统架构(以UMP系统为例) 一.UMP系统概述 低成本和高性能的MySQL云数据库方案 二.UMP系统架构 架构设计遵循以下原则: 保持单一的系统对外入口,并且为系统内部维护单一的资 ...

  7. 《新标准C++程序设计》2.1-2.3(C++学习笔记3)

    1.结构化程序设计的不足 程序=算法+数据结构 数据结构和变量相对应,算法和函数相对应,算法是用来操作数据结构的. 结构化程序设计中,函数和其所操作的数据结构,没有直观的联系.随着程序规模的增加,程序 ...

  8. js 月份选择器(只选择到月)

    需要如下js https://pan.baidu.com/s/1c1T9wY0 在html中添加如下代码 <input onclick="setmonth(this)" /& ...

  9. Swift4 - GCD的使用

    Swift4 - GCD的使用 2018年03月30日 17:33:27 Longshihua 阅读数:1165 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csd ...

  10. 吴裕雄--天生自然 JAVASCRIPT开发学习:语法

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