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

会自动判断当前年份

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

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

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags"  prefix="s"%>
<script type="text/javascript" src="<%=path%>/js/jquery-1.9.0.js">
<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" onchange="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>

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

JavaScript 自动生成 年月范围 选择的更多相关文章

  1. JavaScript自动生成博文目录导航

    转载于:JavaScript自动生成博文目录导航 我们在写博客的时候,如果博文里面有目录,会给人结构清晰.一种一目了然的感觉,看目录就知道这篇博文要讲解的内容,并且点击目录标题就可以跳转到 具体的内容 ...

  2. JavaScript自动生成博文目录导航/TOP按钮

    博客园页面添加返回顶部TOP按钮 进入网页管理->设置 在"页面定制CSS代码"中添加如下css样式,当然你可以改为自己喜欢的样式 此处可以将背景色background-co ...

  3. eclipse android 不会自动生成R.java文件和包的解决办法

    eclipse下编写android程序突然不会自动生成R.java文件和包的解决办法   我的eclipse原来是好好的,什么问题都没有的,结果今天一打开新建一个android程序,发现工程里不会自动 ...

  4. [转]eclipse下编写android程序突然不会自动生成R.java文件和包的解决办法

    原网址 : http://www.cnblogs.com/zdz8207/archive/2012/11/30/eclipse-android-adt-update.html 网上解决方法主要有这几种 ...

  5. 基于MVC4+EasyUI的Web开发框架经验总结(14)--自动生成图标样式文件和图标的选择操作

    在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图标,从而是Web系统界面看起来更加美观和协调.但是在系统中一般内置的图标样式相对比较有限,而且硬编码写到样式表里面,这 ...

  6. JavaScript:自动生成博文目录导航

    感谢 孤傲苍狼 分享了 自动生成博文目录的方法,本文仅作存档使用. 图 1:效果预览 CSS 样式 #TOCbar{ font-size:12px; text-align:left; position ...

  7. 在visual studio code和visual studio中编写TypeScript文件自动生成JavaScript文件

    注:此处的自动生成都为保存ts文件时自动生成js文件 VS CODE 只需要在TypeScript的终端控制台中输入如下命令即可,并注意需要将其中的*换成对应的文件名,此处的*似乎不能作为通用匹配. ...

  8. 代码自动生成工具MyGeneration之一(程序员必备工具)

    代码自动生成工具MyGeneration之一(程序员必备工具) 转 分类: C#2008-08-06 18:12 16064人阅读 评论(12) 收藏 举报 工具数据库相关数据库stringbrows ...

  9. 反射实体自动生成EasyUi DataGrid模板 第二版--附项目源码

    之前写过一篇文章,地址 http://www.cnblogs.com/Bond/p/3469798.html   大概说了下怎么通过反射来自动生成对应EasyUi datagrid的模板,然后贴了很多 ...

随机推荐

  1. UWP开发之Template10实践:本地文件与照相机文件操作的MVVM实例(图文付原代码)

    前面[UWP开发之Mvvmlight实践五:SuspensionManager中断挂起以及复原处理]章节已经提到过Template10,为了认识MvvmLight的区别特做了此实例. 原代码地址:ht ...

  2. CuteSTL——跟着感觉造轮子

    置顶推荐: CuteSTL:https://github.com/jxd134/algorithm/tree/master/CuteSTL TinySTL:https://github.com/zou ...

  3. Linux下的Source命令及脚本的执行方式解析

    Linux Source命令及脚本的执行方式解析 http://blog.csdn.net/wangyangkobe/article/details/6595143 当我修改了/etc/profile ...

  4. Qt 添加外部库文件(四种方法)

    Qt添加外部库文件, 一种就是直接加库文件的绝对路劲,这种方法简单,但是遇到多个库文件的时候,会很麻烦,而且,如果工程移动位置以后还需要重新配置 另一种就是相对路径了,不过Qt 编译的文件会在一个单独 ...

  5. 把程序嵌入网页之ATL编写ActiveX[标准窗口+接受参数]

    从VS2010开始ATL ActiveX支持IObjectSafety接口,所以用VS2010来编写,新建一个ATL项目 向导的第一页没什么东西,直接下一步,选项可以根据具体需求调整 点“完成”,切换 ...

  6. 简单实用的下拉菜单(CSS+jquery)

    原文 简单实用的下拉菜单(CSS+jquery) 没什么可以说的,直接上例子 html+jquery代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...

  7. cookie跨域和js跨域问题

    js跨域:主机名,协议,端口号只要有任何一个不同,就不能成立

  8. 【quickhybrid】H5和Native交互原理

    前言 Hybrid架构的核心就是JSBridge交互,而实现这个交互的前提是弄清楚H5和Native端的交互 本文主要介绍Native端(Android/iOS)和H5端(泛指前端)的交互原理 (之前 ...

  9. 网页静态化解决方案-Freemarker demo+语法

    1.网页静态化技术Freemarker 1.1为什么要使用网页静态化技术 网页静态化解决方案在实际开发中运用比较多,例如新闻网站,门户网站中的新闻频道或者是文章类的频道. 对于电商网站的商品详细页来说 ...

  10. OO第一单元小结

    写在前面 在接触OO课程之前,自己是完全没有学习过java语言的,因此作为一名初的不能再初的初学者,无论是在哪方面都会有许多茫然,但是我相信通过一次次认真的完成OO作业,我对面向对象的理解应该会渐渐的 ...