JavaScript自动生成年月范围选择功能完整示例【基于jQuery插件】

2024-07-29 10:31:01

本文实例讲述了JavaScript实现的自动生成年月范围选择功能。分享给大家供大家参考，具体如下：

近日做项目涉及到日期选择，为了用户界面友好，于是加入了一年内的年月段的查询功能，先看效果

会自动判断当前年份

以下为html代码其中用到了 Jquery 和 struts 标签但是这两个都不是重要的主要书用于赋值和取值方便

还用到了 WdatePicker 插件进行具体日期选择

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 selectMonth();
})
//年月选择 star
function selectMonth(){
  var myDate = new Date();
  var year = myDate.getUTCFullYear();
  var month = myDate.getUTCMonth ();
  var dateList = new Array();
  var endDay;
  for(var i=0;i<=12;i++){
    var m = month+i;
    endDay = maxDay(m,year-1);
    if(m<12)
    dateList.push((year-1)+"-"+(m+1)+"~"+endDay);
    else
    dateList.push(year+"-"+(m-11)+"~"+endDay);
  }
  dateList.reverse();
  $.each(dateList,function(idx,item){
    var ym = item.split("~");
      var mon = ym[0].split("-");
      if(mon[1]==(month+1) && mon[0] == year)
    $("#dateList").append("<option value="+myDate.getDate()+">"+"本月"+"</option>");
    else
    $("#dateList").append("<option value="+ym[1]+">"+ym[0]+"</option>");
    })
 getEndTime();
}
function maxDay(month,year){//获得某年某月最大天数
var d= new Date();
d.setUTCFullYear(year,month);
return new Date(d.getFullYear(), d.getMonth()+1,0).getDate();
}
function getEndTime(){ //动态生成 月初日期 和 月末日期
  var list = $("#dateList option:selected");
  var selMonth = $("#dateList option:selected").html()
  if( selMonth == "本月"){
   var d = new Date();
    $("#starTime").val(d.getUTCFullYear()+"-"+(d.getUTCMonth()+1)+"-1");
    $("#endTime").val(d.getUTCFullYear()+"-"+(d.getUTCMonth()+1)+"-"+list.val());
  }else{
  $("#starTime").val(selMonth+"-1");
  $("#endTime").val(selMonth+"-"+list.val());
  }
}
//年月选择end
  </script>
<body>
<td nowrap="nowrap" style="width: 15%" align="center">
  日期：
  <select id="dateList" οnchange="getEndTime()"> </select>
  从
  <input name="starTime" id="starTime"
    value="<s:date name="starTime" format="yyyy-MM-dd"/>"
    onFocus="WdatePicker()" class="Wdate"
    style="width: 110px; height: 17px; border-left: 0; border-top: 0; border-right: 0; border-bottom-color: #C06" />
  至
  <input name="endTime" id="endTime"
    value="<s:date name="endTime" format="yyyy-MM-dd"/>"
    onFocus="WdatePicker()" class="Wdate"
    style="width: 110px; height: 17px; border-left: 0; border-top: 0; border-right: 0; border-bottom-color: #C06" />
</td>
</body>

以上为核心代码，有需要的兄弟尽管拿去用，如有更好的请帮忙推荐。

PS：这里再为大家推荐几款时间及日期相关工具供大家参考使用：

在线日期/天数计算器：
http://tools.jb51.net/jisuanqi/date_jisuanqi

在线日期计算器/相差天数计算器：
http://tools.jb51.net/jisuanqi/datecalc

在线日期天数差计算器：
http://tools.jb51.net/jisuanqi/onlinedatejsq

Unix时间戳(timestamp)转换工具：
http://tools.jb51.net/code/unixtime

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery日期与时间操作技巧总结》、《jQuery扩展技巧总结》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery DateTimePicker 日期和时间插件示例

jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等. 日期选择插件是一个配置灵活的插件,你可以定义它的展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等文档和下载地址: 1.jQuery-Timepicker-Addon的下载地址:http://xiazai.jb51.net/201701/yuanma/jQuery-Timepicker-Add
获取客户端电脑日期时间js代码(jquery)

原生态javascript获取日期复制代码代码如下: <SCRIPT LANGUAGE="JavaScript">var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-????) myDate.getMonth(); //获取当前月份(0-11,0代表1月) myDate.getDat
jQuery时间日期三级联动(推荐)

废话不多说了,直接给大家贴js代码了,具体代码如下所述: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &
jQuery时间戳和日期相互转换操作示例

本文实例讲述了jQuery时间戳和日期相互转换操作.分享给大家供大家参考,具体如下: 网上找的很多都没都是这样显示的2017-8-7 3:5:3 自己搜索改下了一下加了0这样显示 2017-08-07 15:05:03 (function($) { $.extend({ myTime: { /** * 当前时间戳 * @return <int> unix时间戳(秒) */ CurTime: function(){ return Date.parse(new Date())/1000; }, /
贴近用户体验的Jquery日期、时间选择插件

分享一款贴近Jquery日期.时间选择插件.这是一款双日历jQuery日期选择时间插件pickerDateRange.效果图如下: 在线预览源码下载 Js代码 var dateRange = new pickerDateRange('date_demo3', { aRecent7Days: 'aRecent7DaysDemo3', //最近7天 isTodayValid: false, //startDate : '2013-04-14', //endDate : '2013-04-21
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载

我们经常会应用到日期和时间选择器,之前我们使用最多的是jQuery UI的datepicker(),那么今天我给大家介绍一款非常有趣的日期和时间选择器,它分为日期选择器datedropper以及时间选择器timedropper,他们俩尤其适合在移动端上应用. 在线演示源码下载日期选择器datedropper 使用非常简单,分三步, 1.引入相关js和css文件.注意datedropper和timedropper都是基于jQuery的插件,所以也要引入jQuery库文件. <scr
jquery仿苹果的时间/日期选择效果

1.html文件,index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./jquery-1.12.4.min.js"></script> <script src="./pic
jquery中实现时间戳与日期相互转换

直接看代码: 提醒:不要忘记了引用jquery的类库 (function($) { $.extend({ myTime: { /** * 当前时间戳 * @return <int> unix时间戳(秒) */ CurTime: function(){ return Date.parse(new Date())/1000; }, /** * 日期转换为 Unix时间戳 * @param <string> 2014-01-01 20:20:20 日期格式 * @return <
jQuery实现动态生成年月日级联下拉列表示例

本文实例讲述了jQuery实现动态生成年月日级联下拉列表.分享给大家供大家参考,具体如下: html代码: <form name="form1" id="dateForm"> <select name="year"></select>年 <select name="month"></select>月 <select name="day">
jQuery实现倒计时（倒计时年月日可自己输入）

$(function(){ var tYear = ""; //输入的年份 var tMonth = ""; //输入的月份 var tDate = ""; //输入的日期 var iRemain = ""; //开始和结束之间相差的毫秒数 var sDate = ""; //倒计的天数 var sHour = ""; //倒计时的小时 var sMin = "";
jQuery带时间的日期控件代码分享

本文实例讲述了JS+CSS3实现的类似于苹果iwatch计时器特效.分享给大家供大家参考.具体如下: 带时间的jQuery日期控件代码是一款基于jQueryUI实现的,可自定义日期插件语言,这个日期控件的亮点就在于选择的时间可精确到分钟. 运行效果图: -------------------查看效果下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery带时间的日期控件代码如下 <h
jquery 日期分离成年月日的代码

复制代码代码如下: function bh_LoadViewState(){ var v=$("#hBirthday").val(); if(v=="")return; var birthday=new Date(Date.parse(v.replace(/-/g, '/'))) $("#ddlYear").val(birthday.getFullYear()); $("#ddlMonth").val(birthday.ge

JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】

相关推荐

随机推荐

JavaScript自动生成年月范围选择功能完整示例【基于jQuery插件】