在对一些信息查询时通常会用到时间作为搜索条件,今天就做了个时间作为搜索条件的小页面,感觉还挺好看的。下面来看看效果图是如何的哈:
先说明操作步骤,就是点击本日,本周,本月前面的单选按钮就会把自动计算的日期显示到文本框中。
下面就简单的介绍下怎样用的,在页面上放置两个文本框,三个单选按钮和一个按钮,当然为了使自己的界面能够美观呢,用到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 >
< 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 >
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 >