前端JS特效第26波:jQuery日期时间选择器插件

jQuery日期时间选择器插件,先来看看效果:

部分核心的代码如下:

<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<title>jQuery日期时间选择器插件 - PHP中文网</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<style>body{font-family:'microsoft yahei';}em{font-style:normal;font-size:14px;}.form-group {position: relative;width:140px;}.form-group-txt{height:32px;line-height:32px;padding:0 10px;}.form-group-select {/*padding-left: 1px;*/}.form-control,.simulation-input {width: 100%;line-height: 16px;font-size: 12px;color: #4b555b;background: none;outline: none;border: 1px solid #d3dcdd;background-color: #fff;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;margin: 0 -1px;padding: 7px 8px;*padding-left: 0;*padding-right: 0;*text-indent: 8px;*float: left;transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;}.float-left{float:left;}
</style>
</head>
<body>
<!--主体开始-->
<div class="container" style="width:500px;margin:80px auto;"><div class="inner"><div class="service-wrap"><div class="main-form"><div class="table-form service-form"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="table table-cell"><tbody><tr><th width="14%"><span>时间:</span></th><td><div class="form-group float-left w140"><input type="text" name="datepicker" id="datetimepicker1" class="form-control" value="9:00"/></div><div class="float-left form-group-txt">至</div><div class="form-group float-left w140"><input type="text" name="datepicker" id="datetimepicker2" class="form-control" value="23:00"/></div></td></tr><tr><th><span></span></th><td>&nbsp;</td></tr><tr><th><span>日期:</span></th><td><div class="form-group float-left w140"><input type="text" name="datepicker" id="datetimepicker3" class="form-control" value="2015-5-20"/></div></td></tr></tbody></table></div></div></div></div>
</div>
<!--主体结束--><link rel="stylesheet" type="text/css" href="css/lq.datetimepick.css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src='js/selectUi.js' type='text/javascript'></script>
<script src='js/lq.datetimepick.js' type='text/javascript'></script>
<script type="text/javascript">
$(function (){$("#datetimepicker1").on("click",function(e){e.stopPropagation();$(this).lqdatetimepicker({css : 'datetime-hour'});});$("#datetimepicker2").on("click",function(e){e.stopPropagation();$(this).lqdatetimepicker({css : 'datetime-hour'});});$("#datetimepicker3").on("click",function(e){e.stopPropagation();$(this).lqdatetimepicker({css : 'datetime-day',dateType : 'D',selectback : function(){}});});
});
</script></body>
</html>

全部代码:jQuery日期时间选择器插件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/43819.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL手注之布尔型盲注详解

布尔型盲注简介 基于布尔型SQL盲注即在SQL注入过程中&#xff0c;应用程序仅仅返回True&#xff08;页面&#xff09;和False&#xff08;页面&#xff09;。 这时&#xff0c;我们无法根据应用程序的返回页面得到我们需要的数据库信息。但是可以通过构造逻辑判断&#xff08;…

WSL2编译使用6.6版本内核

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、有什么变化二、下载6.6内核三、开始编译1.安装环境2.开始编译 四、使用1.杀死虚拟机2.防止内核文件3.修改配置文件 总结 前言 最近出了一件不大不小的事&a…

品牌文化五大维度,构建品牌竞争力的秘诀!

品牌文化对于企业的发展和成功至关重要。 品牌文化不仅是企业和消费者之间的纽带&#xff0c;也是企业内部员工的凝聚力。 在当今竞争激烈的市场环境中&#xff0c;建立一个有活力和影响力的品牌文化是每个企业都需要认真思考和实践的事情。 品牌文化的五大维度包括价值观、…

前端面试题31(TCP与UDP区别)

TCP (Transmission Control Protocol) 和 UDP (User Datagram Protocol) 是两种在网络通信中常用的传输层协议&#xff0c;它们在多个方面存在显著差异&#xff0c;主要体现在以下几个方面&#xff1a; 连接方式&#xff1a; TCP 是面向连接的协议。在数据传输开始之前&#xf…

数字身份管理发展趋势:IAM 和数据安全相结合

数据安全和IAM作为网络安全领域中不同的学科而存在。然而&#xff0c;随着越来越多的组织利用云服务&#xff0c;情况发生了显著的转变。许多公司现在将重要的安全控制(例如管理存储、应用程序和网络的控制)委托给他们选择的云服务提供商(CSP)。 图&#xff1a;用户与云服务商职…

oracle(表空间分类、表空间操作、默认表空间)

文章目录 oracle数据库默认表空间列表表空间是什么&#xff1f;表空间的分类1.永久性表空间&#xff1a;2.临时性表空间&#xff1a;3.撤销表空间&#xff1a; 表空间的作用Oracle 系统自动建立的表空间默认表空间1&#xff0e;SYSTEM 表空间2&#xff0e;SYSAUX表空间3&#x…

01:简易的电动车防盗报警器

简易的电动车防盗报警器 1、震动传感器模块的使用2、使用震动传感器模块控制继电器开关3、433M无线发射接收模块的使用 需要材料&#xff1a; 1、51单片机 2、震动传感器模块 3、继电器模块 4、高功率喇叭 5、433M无线发射接收模块 6、弱干杜邦线 1、震动传感器模块的使用 接好…

u盘电脑格式化恢复,这里有3种简单有效的方法和视频教程!

我们今天将探讨如何在电脑格式化后恢复U盘数据。数据丢失是一个常见问题&#xff0c;尤其是当我们需要快速清理U盘或不慎执行了格式化操作时。在本文将分享几种简单而有效的方法&#xff0c;帮助您从格式化后的U盘中恢复数据。此外&#xff0c;我们还提供了相关的视频教程&…

大话光学原理:3.干涉与衍射

一、干涉 这是一束孤独的光&#xff0c;在真空的无垠中悄无声息地穿行。忽然&#xff0c;一堵高耸的墙壁挡住了它的去路&#xff0c;它别无选择&#xff0c;只能硬着头皮冲撞而去。在摸索中&#xff0c;它意外地发现墙壁上竟有两道孔隙&#xff0c;笔直而细长&#xff0c;宛如量…

嵌入式代码升级——IAP

目录 IAP的特点 实现 IAP 功能 STM32 正常的程序运行流程 STM32 加入IAP后的运行流程 程序执行流程 BootLoader程序 APP1程序 APP2程序 验证操作步骤 IAP&#xff08;In-Application Programming&#xff09;指的是在应用程序运行时对其自身的Flash存储器进行编程的操作…

【2024——CUMCM】Matlab快速入门

目录 常识 disp and input 字符串合并 sum 提取矩阵指定位置的元素 指定行列 指定行or指定列&#xff08;返回行/列向量&#xff09; 指定某些行 指定全部元素&#xff0c;按列拼接 size repmat 矩阵的运算 基本运算 形状相同的矩阵运算 每个元素同时和常数相乘或相…

异步主从复制

主从复制的概念 主从复制是一种在数据库系统中常用的数据备份和读取扩展技术&#xff0c;通过将一个数据库服务器&#xff08;主服务器&#xff09;上的数据变更自动同步到一个或多个数据库服务器&#xff08;从服务器&#xff09;上&#xff0c;以此来实现数据的冗余备份、读…

【2】A-Frame核心设计

一、基于HTML和Primitives的表达 1.HTML - 超文本标记语言 A-Frame 基于 HTML 和 DOM 之上&#xff0c;使用自定义元素的 polyfill。 HTML 是 Web 的构建块&#xff0c;提供了最易于访问的计算语言之一。无需安装或构建步骤&#xff0c;使用 HTML 创建仅涉及 HTML 文件中的文…

【STM32/HAL】嵌入式课程设计:简单的温室环境监测系统|DS18B20 、DHT11

前言 板子上的外设有限&#xff0c;加上想法也很局限&#xff0c;就用几个传感器实现了非常简单的监测&#xff0c;显示和效应也没用太复杂的效果。虽说很简单&#xff0c;但传感器驱动还是琢磨了不久&#xff0c;加上串口线坏了&#xff0c;调试了半天才发现不是代码错了而是…

ORA-12537: TNS:连接关闭/Io 异常: Got minus one from a read call

在另外一个数据库建立dblink的时候&#xff0c;发现执行命令报错&#xff1a; 被连接的数据库我也上去过&#xff0c;用工具尝试登陆也报错&#xff1a; IO Error: Got minus one from a read call, connect lapse 1 ms., Authentication lapse 0 ms. Got minus one from a …

设计模式探索:装饰器模式

1. 装饰器模式定义 装饰器模式&#xff08;Decorator Pattern&#xff09; 装饰器模式是一种结构型设计模式&#xff0c;允许向一个对象动态添加行为。在不改变类的接口的情况下&#xff0c;装饰器模式在原始类上增加额外的职责&#xff0c;并且支持多个装饰器嵌套使用。 装…

一个php文件怎么实现联系表单自动发送邮件

学习PHP&#xff1a;如何编写一个自动发送邮件的联系表单处理器&#xff1f; 无论是反馈意见、业务咨询&#xff0c;还是技术支持&#xff0c;联系表单都能为用户提供便捷的交流途径。AokSend将探讨如何通过一个PHP文件实现联系表单的自动发送邮件功能。 php文件&#xff1a;…

运用F5构建机器人防御,轻松应对恶意Bot威胁

数字化加快了信息的传播与交流&#xff0c;网络罪犯也借机纷纷涌向线上业务。攻击者通过暴力破解、字典攻击和撞库攻击破坏身份验证&#xff0c;导致账户被接管、欺诈、经济损失和客户不满&#xff0c;对应用的影响可能是灾难性的。面对日新月异的攻击&#xff0c;F5分布式云机…

作业/数据结构/2024/7/8

链表的相关操作作业&#xff1a; 1】 按值修改 2】按值查找&#xff0c;返回当前节点的地址 &#xff08;先不考虑重复&#xff0c;如果有重复&#xff0c;返回第一个&#xff09; 3】 逆置(反转) 4】释放链表 main.c #include "head.h"int main(int argc, con…

【IMU】 温度零偏标定

温度标定 IMU的零偏随着温度的变化而变化&#xff0c;在全温范围内形状各异&#xff0c;有些可能是单调的&#xff0c;有些可能出现拐点。 多项式误差温度标定 目的是对估计的参数进行温度补偿&#xff0c;获取不同温度时的参数值&#xff08;零偏、尺度、正交&#xff09;&…