jquery 选择时间（小时）区间（一）

最新推荐文章于 2024-06-01 09:48:41 发布
最新推荐文章于 2024-06-01 09:48:41 发布
阅读量334 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/shuaisam/archive/2012/05/17/2505817.html
版权
  • select hours interval 选择时间区间
  1. 开始时间须小于结束时间
  2. 开始时间选定后，结束时间自动变更取值范围
  3. 结束时间选定后，开始时间自动变更取值范围

　　源码

View Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
 <title>select hours1</title>
 <SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></SCRIPT>
 <script language="javascript">
     $(function(){
             var jq_hour_start_select = $('#hour_start_select');
             var jq_hour_end_select = $('#hour_end_select');
             $('#statistics_btn').bind("click",function(){
                     if(''==jq_hour_start_select.val()){
                         alert('请选择开始的时间！！');
                         jq_hour_start_select.focus();    
                         return;
                     }
                     if(''==jq_hour_end_select.val()){
                             alert('请选择结束的时间！！');
                             jq_hour_end_select.focus();
                             return;    
                     }
                     confirm(jq_hour_start_select.val()+'---'+jq_hour_end_select.val());
                 
                 });
                 jq_hour_start_select.bind('change',function(){
                         //记录先前hour_end_select值
                         var  hour_end_select_val = jq_hour_end_select.val();
                         
                         //    先清空，再添加符合条件的
                         if(''!=jq_hour_start_select.val()){
                             jq_hour_end_select.empty();
                             jq_hour_end_select.append($('<option value="">请选择</option>'));
                             for(var i=parseInt(jq_hour_start_select.val())+1;i<25;i++ ){
                                 jq_hour_end_select.append($('<option value='+i+'>'+i+'时</option>'));
                             }    
                         }
                                     
                             //赋予先前选中的值
                             jq_hour_end_select.val([hour_end_select_val]);
                 });
                 jq_hour_end_select.bind('change',function(){
                         //记录先前hour_start_select值
                         var  hour_start_select_val = jq_hour_start_select.val();
                         
                         //    先清空，再添加符合条件的
                         if(''!=jq_hour_end_select.val()){
                             jq_hour_start_select.empty();
                             jq_hour_start_select.append($('<option value="">请选择</option>'));
                             for(var i=0;i < parseInt(jq_hour_end_select.val());i++ ){
                                 jq_hour_start_select.append($('<option value='+i+'>'+i+'时</option>'));
                             }    
                         }
                     
                     //赋予先前选中的值
                         jq_hour_start_select.val([hour_start_select_val]);
                     
                 });
                 
         });
         
     </script>
</head>
<body>
  <div id="mode_div">
      按天统计：
          <select id='hour_start_select'>
              <option value=''>请选择</option>
              <option value='0'>0时</option>
              <option value='1'>1时</option>
              <option value='2'>2时</option>
              <option value='3'>3时</option>
              <option value='4'>4时</option>
              <option value='5'>5时</option>
              <option value='6'>6时</option>
              <option value='7'>7时</option>
              <option value='8'>8时</option>
              <option value='9'>9时</option>
              <option value='10'>10时</option>
              <option value='11'>11时</option>
              <option value='12'>12时</option>
              <option value='13'>13时</option>
              <option value='14'>14时</option>
              <option value='15'>15时</option>
              <option value='16'>16时</option>
              <option value='17'>17时</option>
              <option value='18'>18时</option>
              <option value='19'>19时</option>
              <option value='20'>20时</option>
              <option value='21'>21时</option>
              <option value='22'>22时</option>
              <option value='23'>23时</option>
          </select>
          至
          <select id="hour_end_select">
              <option value=''>请选择</option>
              <option value='1'>1时</option>
              <option value='2'>2时</option>
              <option value='3'>3时</option>
              <option value='4'>4时</option>
              <option value='5'>5时</option>
              <option value='6'>6时</option>
              <option value='7'>7时</option>
              <option value='8'>8时</option>
              <option value='9'>9时</option>
              <option value='10'>10时</option>
              <option value='11'>11时</option>
              <option value='12'>12时</option>
              <option value='13'>13时</option>
              <option value='14'>14时</option>
              <option value='15'>15时</option>
              <option value='16'>16时</option>
              <option value='17'>17时</option>
              <option value='18'>18时</option>
              <option value='19'>19时</option>
              <option value='20'>20时</option>
              <option value='21'>21时</option>
              <option value='22'>22时</option>
              <option value='23'>23时</option>
              <option value='24'>24时</option>
          </select>
          &nbsp;&nbsp;<button id="statistics_btn">统计</button>
  </div>
</body>
</html>

　　演示

按天统计： 请选择0时1时2时3时4时5时6时7时8时9时10时11时12时13时14时15时16时17时18时19时20时21时22时23时 至 请选择1时2时3时4时5时6时7时8时9时10时11时12时13时14时15时16时17时18时19时20时21时22时23时24时   统计
 

转载于:https://www.cnblogs.com/shuaisam/archive/2012/05/17/2505817.html

DragonWar%
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
只选择小时、分的时间插件jquery-timepicker.js
05-10
@author 李凯飞 描述：选择时间组件，先选择小时再选择分钟，只支持00-23小时、00-05-10...50-55分钟。回调函数的e为源对象。 示例如下： 1 2 3 4 5 $('.time-picker').hunterTimePicker({ callback: function(e){ .... } });
jQuery jcDate时间选取插件(选取时间段)
05-11
摘要:脚本资源,jQuery,时间插件,皇冠代理备用 jQuery jcDate时间选取插件，支持选取时间段，日期选取插件，可选择起始时间和结束时间的日期选择器，适合用于酒店预订、车票预订、数据统计等应用场合。 运行环境：HTML/PHP/ASP/
jquery 选择时间（小时）区间（三）
weixin_34342992的博客
05-18 318
select hours interval 选择时间区间 　　jquery 选择时间（小时）区间（二）的改造版本 　 源码 View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti...
探索时间的优雅选择：jQuery UI DateRangePicker
最新发布
gitblog_00010的博客
06-01 294
探索时间的优雅选择：jQuery UI DateRangePicker 项目地址:https://gitcode.com/tamble/jquery-ui-daterangepicker 在数据分析与日程管理的世界里，高效而直观的时间选取工具至关重要。今天，让我们一同探索一个集简洁性、灵活性于一身的开源宝藏——jQuery UI DateRangePicker。这个项目，正如其名，是向Google...
分享自己编写的一个jquery日历控件，可以选择日期区间
鬼烧java
08-01 311
先来个截图     初版未经全面测试，难免有bug，功能比较单一，简单说一下功能吧 1、可以选择单个日期 2、可以选择日期区间 3、面板显示月份可以自定义 4、日期格式可以自定义，但是目前只支持几种（格式见js内部） 5、准备增加确定和取消按钮的回调函数   其他功能暂时没有想到，所以都没加，目前V1.0版本 日历源码见附件   ...
jquery 选择时间（小时）区间（二）
weixin_33919941的博客
05-17 404
select hours interval 选择时间区间 　　完成jquery 选择时间（小时）区间（一）中同样的功能 　　源码 　　 View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran...
jQuery一星期时间段选择插件
06-24
用户可以选择每天的任意24小时区间，提供了一种灵活且直观的方式来输入时间信息。 该插件的核心特性包括： 1. **多日选择**：用户可以同时为一周的每一天设置不同的时间段。 2. **时间段选择**：支持每个小时段的...
jQuery日期时间范围选择插件
06-24
首先，daterangepicker.js是一个强大的jQuery插件，允许用户在网页上方便地选择日期和时间范围。它通常用于需要用户指定一段日期时间跨度的场合，例如酒店预订系统中，用户可能需要选择入住和离开的日期及具体时间。...
jQuery手机移动端时分秒时间选择器代码
12-31
本篇文章将深入探讨一个基于jQuery的手机移动端时分秒时间选择器代码。这个轻量级的插件允许用户通过点击屏幕上的按钮，弹出一个时间选择窗口，用户可以通过触屏滑动来方便地选择小时、分钟和秒钟。 首先，我们来看...
jQuery左右滑块拖动选取营业时间范围
10-29
在HTML中，我们需要创建一个滑块元素（`<input type="range">`）以及显示当前选择时间的元素。例如，可以创建两个`<span>`元素来分别显示起始时间和结束时间。 ```html <span class="start-time">09:00 ...
datetimepicker时间选择器
09-24
它支持年月日的完整选择，以及小时和分钟的精确区间选择，极大地提高了用户体验。 在前端开发中，时间选择器通常用于表单填写、事件预约、预订系统等需要用户输入日期或时间的场景。js（JavaScript）是实现这种功能...
jQuery带日期区间的日期选择插件
03-22
插件描述：HTML5/CSS3带日期区间的日期选择插件.
基于jquery-ui的中文版时间段选择插件
11-10
基于jquery-ui的时间段选择插件，已经实现汉化，可以选择到具体天数，不能选择时、分、秒。
jQuery日期时间范围选择插件设置日期范围选择代码
04-27
jQuery日期时间范围选择插件设置日期范围选择代码 jQuery日期时间范围选择插件设置日期范围选择代码
Android（Kotlin）日期区间选择器/时间区间选择器——日历区间选择器
08-15
Kotlin语言写安卓项目 选择日期范围，刷新选择的时间区间所检索的数据 在某大牛原控件的基础上，做了一个拓展使用，可解决一些原控件的bug问题。 文内只写了日期的选择使用，时间的选择类似，详情可参照博客内容： https://blog.csdn.net/w630886916/article/details/81701149
jquery 选择时间（小时）区间（五）
weixin_34234721的博客
06-04 149
用插件的形式编写升级版 jquery_select_interval.js 源码 /* * select_interval 0.1 * Copyright (c) 2012 shuaisam http://shuaisam.cnblogs.com/ * Date: 2012-06-04 * Desc: 提供时间的选择区间，用josn数据初始化 * s...
jquery时间区间获取
冷小风的博客
08-01 1006
Demo: //获取当前日期 var myDate = new Date(); var nowY = myDate.getFullYear(); var nowM = myDate.getMonth()+1; var nowD = myDate.getDate(); var enddate = nowY+"-"+(nowM&lt;10 ? "0" + nowM : nowM)+"-"...
jq 日期区间处理
dibeichan3033的博客
04-28 103
<html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/jquery-2.1.1.js"></script> </head> <body...
jquery 选择时间（小时）
weixin_30790841的博客
01-25 676
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &lt...
jquery 选择年月区间同年
06-07
首先，我们可以使用jQuery中的选择器操作DOM中的元素。针对选择年月区间同年，我们可以使用以下代码实现： ```javascript // 获取起始年份和月份的select元素 var startYearSelect = $("#startYear"); var startMonthSelect = $("#startMonth"); // 获取结束年份和月份的select元素 var endYearSelect = $("#endYear"); var endMonthSelect = $("#endMonth"); // 监听起始年份和月份的变化事件 startYearSelect.change(function() { var startYear = startYearSelect.val(); // 获取起始年份的值 var endYear = endYearSelect.val(); // 获取结束年份的值 // 如果结束年份等于起始年份 if (endYear == startYear) { // 隐藏结束月份的select元素中小于起始月份的option元素 endMonthSelect.find("option").each(function() { var optionMonth = parseInt($(this).val()); // 获取当前option的月份值 if (optionMonth < startMonthSelect.val()) { $(this).hide(); } else { $(this).show(); } }); } else { // 如果结束年份不等于起始年份，则显示所有结束月份的option元素 endMonthSelect.find("option").show(); } }); // 监听结束年份和月份的变化事件，同理操作 endYearSelect.change(function() { var startYear = startYearSelect.val(); var endYear = endYearSelect.val(); if (startYear == endYear) { startMonthSelect.find("option").each(function() { var optionMonth = parseInt($(this).val()); if (optionMonth > endMonthSelect.val()) { $(this).hide(); } else { $(this).show(); } }); } else { startMonthSelect.find("option").show(); } }); ``` 以上代码适用于起始年份和月份在同一<select>元素中，结束年份和月份也在同一<select>元素中的情况。如果不在同一<select>元素中，则需要修改对应的选择器。 以上是一个简单的实现，可以根据具体需求进行扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值