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>
这段函数的最后两句就是前面定义的文本框的标签,大家好好看下吧。这代码不是我写的,但我知道怎样把它用在合适的位置也是所值的。
posted @ 2011-06-02 17:25  亿典通柄棋  阅读(632)  评论(0编辑  收藏  举报