javascript显示本日,本周,本月
在对一些信息查询时通常会用到时间作为搜索条件,今天就做了个时间作为搜索条件的小页面,感觉还挺好看的。下面来看看效果图是如何的哈:
先说明操作步骤,就是点击本日,本周,本月前面的单选按钮就会把自动计算的日期显示到文本框中。
下面就简单的介绍下怎样用的,在页面上放置两个文本框,三个单选按钮和一个按钮,当然为了使自己的界面能够美观呢,用到css样式是必不可少的哈。同样要注意的一个问题是单选按钮的设置,要把这三个单选按钮放置在一个组里。当然也可以用单选按钮组。下面就把界面布局的代码贴上来,我的界面布局挺差的:用到了div和table标签
<div style="width:90%; text-align:center; margin-left:20px; margin-top:5px;"><table><tr><td>请输入时间段:</td><td>
<asp:TextBox ID="txtBeginTime" runat="server" CssClass="inputCss"></asp:TextBox></td><td>......</td><td>
<asp:TextBox ID="txtEndTime" runat="server" CssClass="inputCss"></asp:TextBox></td><td>
<asp:radiobutton id="rbtnthisDay" onclick="quickseldate('day');" runat="server" Text="本日" GroupName="quickdate"></asp:radiobutton>
<asp:radiobutton id="rbtnthisweek" onclick="quickseldate('week');" runat="server" Text="本周" GroupName="quickdate"></asp:radiobutton>
<asp:radiobutton id="rbtnthismonth" onclick="quickseldate('month');" runat="server" Text="本月" GroupName="quickdate"></asp:radiobutton>
</td><td ><asp:ImageButton ID="ImageButton1" ImageUrl="~/images/search.gif"
runat="server" onclick="ImageButton1_Click" /></td></tr></table></div>
现在大家看下我的那三个单选按钮是怎样放在一个组里的,设置单选按钮的GroupName等于同一个值就好了,在单选按钮的onclick事件中调用javascript写的函数。下面把代码给大家,
<script language="javascript" type="text/javascript">
function fillstring(str)
{
if(str.length==1)
{
str = "0" + str;
}
return(str);
}
function quickseldate(type)
{
var begintime,endtime;
var oneminute = 60*1000;
var onehour = 60*oneminute;
var oneday = 24*onehour;
var oneweek = 7*oneday;
var todayDate = new Date();
var date = todayDate.getDate();
var month= todayDate.getMonth() +1;
var year= todayDate.getYear();
var day = todayDate.getDay();
if(navigator.appName == "Netscape")
{
year = 1900 + year;
}
//-->
if(type=="day")
{
begintime = year.toString() + "-" + fillstring(month.toString()) + "-" +
fillstring(date.toString());
endtime = begintime;
}
else if(type=="week")
{
var daytoMon = day-1;
if(day==0)
daytoMon = 6;
todayDate.setTime(todayDate.getTime()-daytoMon*oneday);
date = todayDate.getDate();
month= todayDate.getMonth() +1;
year= todayDate.getYear();
day = todayDate.getDay();
begintime = year.toString() + "-" + fillstring(month.toString()) + "-" +
fillstring(date.toString());
todayDate.setTime(todayDate.getTime()+6*oneday);
date = todayDate.getDate();
month= todayDate.getMonth() +1;
year= todayDate.getYear();
endtime = year.toString() + "-" + fillstring(month.toString()) + "-" +
fillstring(date.toString());
}
else if(type=="month")
{
var dateto1 = date-1;
todayDate.setTime(todayDate.getTime()-dateto1*oneday);
date = todayDate.getDate();
month= todayDate.getMonth() +1;
year= todayDate.getYear();
day = todayDate.getDay();
begintime = year.toString() + "-" + fillstring(month.toString()) + "-" +
fillstring(date.toString());
todayDate.setMonth(month);
todayDate.setTime(todayDate.getTime()-oneday);
date = todayDate.getDate();
month= todayDate.getMonth() +1;
year= todayDate.getYear();
endtime = year.toString() + "-" + fillstring(month.toString()) + "-" +
fillstring(date.toString());
}
document.getElementById("<% =txtBeginTime.ClientID %>").value = begintime;
document.getElementById("<% =txtEndTime.ClientID %>").value = endtime;
}
</script>