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

会自动判断当前年份

以下为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>

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

随机推荐

  1. [jquery]模仿radio单项选择

    今天写了个小功能,模仿radio单选, //单选收货地址 $(".wuliu-table-to").find(".called").click(function ...

  2. 示例Oracle 10.2.0.1.0升级到10.2.0.4.0一例

    1.查看当前系统版本 [oracle@std Disk1]$ sqlplus '/as sysdba' SQL*Plus: Release - Production on Thu Jan :: Cop ...

  3. Linux之一次性安装开发工具:yum groupinstall Development tools

    [spark@sparksinglenode ~]$ yum grouplist | moreLoaded plugins: fastestmirror, refresh-packagekit, se ...

  4. NEV_SDK开发环境部署手册

    根据项目开发需求,要在MEC服务器上部署如下内容:Nginx.Nginx push stream module.Jason CPP.Spawn-fcgi.libfcgi.Redis.Hiredis.B ...

  5. Spark生态之Spark BlinkDB

  6. [MySQL 5.6] 初识5.6的optimizer trace

      在MySQL5.6中,支持将执行的SQL的查询计划树记录下来,目前来看,即使对于非常简单的查询,也会打印出冗长的查询计划,看起来似乎不是很可读,不过对于一个经验丰富,对查询计划的生成过程比较了解的 ...

  7. 排序 之 快排、归并、插入 - &lt;时间复杂度&gt;----掌握思想和过程

    俗话说:天下武功无坚不破,唯快不破.对于算法当然也是要使用时间最短.占用空间最小的算法来实现了. 注意:我代码里面打的备注仅供参考,建议不要背模板(因为没有固定的模板),可以写一个数列按着代码跑两圈或 ...

  8. docker 日志方案

    docker logs默认会显示命令的标准输出(STDOUT)和标准错误(STDERR).下面使用echo.sh和Dockerfile创建一个名为echo.v1的镜像,echo.sh会一直输出”hel ...

  9. windows cmd相关操作

    一:文件夹1. 新建文件夹方式一:md[盘符:\][路径\]新目录例如:md c:\test\newtest 方式二:先使用cmd进入需要新建文件的根目录下,使用md或者mkdir 直接创建文件夹ne ...

  10. Django模型定义参考

    字段 对字段名称的限制 字段名不能是Python的保留字,否则会导致语法错误 字段名不能有多个连续下划线,否则影响ORM查询操作 Django模型字段类 字段类 说明 AutoField 自增ID字段 ...