基于Bootstrap的时分秒选择控件timepicker

最新推荐文章于 2024-10-18 11:48:14 发布

iTheoChan

最新推荐文章于 2024-10-18 11:48:14 发布

阅读量8.2k

点赞数 8

分类专栏：前端文章标签： bootstrap 时分秒 timepicker 时间控件

本文链接：https://blog.csdn.net/iTheoChan/article/details/101522844

版权

本文介绍如何利用Bootstrap实现一个简单的时分秒选择控件timepicker。由于bootstrap-datetimepicker无法仅选择时分秒，作者自行编写了一个依赖jQuery和Bootstrap CSS的组件。文章包括添加引用和依赖、HTML及JS代码示例，并提供了实际效果截图。

摘要由CSDN通过智能技术生成

基于Bootstrap的时分秒选择控件timepicker

最近项目中要用到时间选择控件，然而研究了半天并没有发现 bootstrap-datetimepicker 控件只选择时分秒的配置方法。自己动手，丰衣足食，索性就用自己半路出家的功力写一个。成品简单实用，缺点是功能单一、依赖jQuery和bootstrap(css部分)。不废话了直接上代码

添加引用、依赖

	<!-- 依赖bootstrap, jQuery -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">&