jQuery中用户友好 下拉时间选择器

  • 源码大小:6.51KB
  • 所需积分:1积分
  • 源码编号:19JP-3783
  • 浏览次数:316次
  • 最后更新:2023年07月22日
  • 所属栏目:时间和时钟
本站默认解压密码:19jp.com 或 19jp_com

简介

一个快速、可访问、用户友好、与Bootstrap兼容的时间选择器插件,可生成小时/分钟选择框和AM/PM按钮,以便更轻松地选择时间。

参见:

  • 查询
  • Unobtrusive时间选择器下拉插件-jQuery timeSelect.js
  • 简单的日期和时间下拉选择器插件-日期时间选择器
  • 带有jQuery的最小下拉年份选择器-年份选择

如何使用它:

1.在文档中加载最新版本的jQuery库和Bootstrap(可选但推荐)。

<!-- Bootstrap Stylesheet -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />

<!-- jQuery -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>

2.创建一个容器来容纳时间选择器。

<div id="timePicker"></div>

3.调用容器元素上的函数来生成一个基本的时间选择器。

$(function(){
  $("#timePicker").timepicker();
});

4.设置时间选择器的初始值。

$("#timePicker").timepicker({
  value: "08:45 PM"
});

5.确定是否禁用时间选择器。默认值:false。

$("#timePicker").timepicker({
  disabled: true,
});

6.选择一个时间后触发一个功能。

$("#timePicker").timepicker({
  onChange: function(value){
   alert(value); 
   }
});

7.获取所选时间。

$("#timePicker").timepicker().getValue();

8.设置时间。

$("#timePicker").timepicker().setValue("10:10 PM");

9.启用/禁用时间选择器。

$("#timePicker").timepicker().setDisabled();
$("#timePicker").timepicker().setEnabled();

预览截图