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 >

这段函数的最后两句就是前面定义的文本框的标签，大家好好看下吧。这代码不是我写的，但我知道怎样把它用在合适的位置也是所值的。

转载于:https://www.cnblogs.com/wangsaiming/archive/2011/06/02/2068735.html