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

会自动判断当前年份

以下为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. CreateThread简单那多线程编程

    CreateThread简单那多线程编程 作者:vpoet mail:vpoet_sir@163.com 在进行多任务处理的时候我们往往会用到多线程技术,多线程理论上是多个线程同事处理不同的工作,但是 ...

  2. hdu 4502 吉哥系列故事——临时工计划_简单dp

    题意:        俗话说一分钱难倒英雄汉,高中几年下来,吉哥已经深深明白了这个道理,因此,新年开始存储一年的个人资金已经成了习惯,不过自从大学之后他不好意思再向大人要压岁钱了,只能把唯一的希望放到 ...

  3. C/C++误区四：char c = getchar();

    许多初学者都习惯用 char 型变量接收 getchar.getc,fgetc 等函数的返回值,其实这么做是不对的,并且隐含着足以 致命的错误 .getchar 等函数的返回值类型都是  int  型 ...

  4. 如何区分监督学习(supervised learning)和非监督学习(unsupervised learning)

    监督学习:简单来说就是给定一定的训练样本(这里一定要注意,样本是既有数据,也有数据对应的结果),利用这个样本进行训练得到一个模型(可以说是一个函数),然后利用这个模型,将所有的输入映射为相应的输出,之 ...

  5. textContent、innerText 以及Event事件兼容性问题

    今天在完成前端的简单练习时发现了一些兼容性的问题,百度后得以解决. 这里主要讨论Firefox与Chrome的兼容性问题. textContent与 innerText 在javascript中, 为 ...

  6. LED音乐频谱之输出数据处理

    转载请注明出处:http://blog.csdn.net/ruoyunliufeng/article/details/38023539 一.PWM调节 1.初始化 void DACInit() { C ...

  7. 点击返回键退出popupwindow的方法

    点击返回键退出popupwindow mPopupWindow.setFocusable(true); 这句非常重要,对背景不会有影响 mPopupWindow.setBackgroundDrawab ...

  8. 编程获取linux的CPU使用的内存使用情况

    Linux可用下top.ps命令检查当前的cpu.mem用法.下面简单的例子: 一.采用ps查看资源消耗的过程 ps -aux 当您查看进程信息,第三列是CPU入住. [root@localhost ...

  9. Respond.js让IE6-8支持CSS3 Media Query

    原文地址:http://caibaojian.com/respondjs.html   使用方式   官方demo地址:http://scottjehl.github.com/Respond/test ...

  10. django学习笔记二:一个项目多个App项目搭建

    django充许在一个项目中存在多个app,如一个大门户网站中可以包含论坛,新闻等内容,其中每一个模块称之为一个App,也可以理解为一个个独立的小型项目最终集成在一个门户网站中最终呈现给用户 本次测试 ...