如何在一个ASP页面中插入一个日期程序

Question

我在写一个产品保质期的页面时.想在该页面的一个表格中插入一个asp写的日期程序.就如同,我们注册一些网站要填写出生日期的那样.入下图.我要在保质期那里输入.我已经有一个日期的ASP程序了,只是不会运用.该日期ASP程序是日历版那种.

Answer 1

需要放控件的页面
<link rel="stylesheet" type="text/css" href="ezcalendar.css" />
<script type="text/javascript" src="ezcalendar.js"></script>
<input type="text" name="datetime" size="12" rows="3" id="datetime" value="" onClick="javascript: showCalendar(datetime)">
<IMG SRC="data.jpg" WIDTH="18" HEIGHT="17" BORDER="0" onClick="javascript: showCalendar(datetime)">

文件 ezcalendar.js

var EZcalendar = false; // Loaded or not?
var bfadeIn = false; // Fade in or not? Not suitable for slow machines
var selectedDate; // whether the users cursor is over the calendar
var target; // the target element for the date value
var dateSeparator = " "; // date separator unit
var overCalendar = false; // whether the users cursor is over the calendar
var months = new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");

// simply return an object by id
function getID(id) {
return document.getElementById(id);
}

// return a number with 2 digits ("2" becomes "02")
function formatNumber(n) {
return (n<10) ? "0"+n : n;
}

function getScrollFromTop() {
if (self.pageYOffset) {
return self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop) {
return document.documentElement.scrollTop;
} else {
return document.body.scrollTop;
}
}

// return a number > 10 as one single digit ("09" becomes "9")
function removeFormatNumber(n) {
return (n.substr(0,1)=="0") ? n.substr(1,1) : n;
}

// return the on-screen LEFT(x) position of an element
function getPageOffsetLeft(el) {
return (el.offsetParent != null) ? el.offsetLeft + getPageOffsetLeft(el.offsetParent) : el.offsetLeft;
}

// return the on-screen TOP(y) position of an element
function getPageOffsetTop(el) {
return (el.offsetParent != null) ? el.offsetTop + getPageOffsetTop(el.offsetParent) : el.offsetTop;
}

// Checks a string to see if it in a valid date format
// of (D)D/(M)M/(YY)YY and returns true/false
function isValidDate(s) {
// format D(D)/M(M)/(YY)YY
var dateFormat = /^\d{1,2}\/\d{1,2}\/\d{2,4}$/;
if (dateFormat.test(s)) {
// remove any leading zeros from date values
s = s.replace(/0*(\d*)/gi,"$1");
var dateArray = s.split("/");
// correct month value
dateArray[1] = dateArray[1]-1;
// correct year value
if (dateArray[2].length<4) {
// correct year value
dateArray[2] = (parseInt(dateArray[2]) < 50) ? 2000 + parseInt(dateArray[2]) : 1900 + parseInt(dateArray[2]);
}
var testDate = new Date(dateArray[2], dateArray[1], dateArray[0]);
if (testDate.getDate()!=dateArray[0] || testDate.getMonth()!=dateArray[1] || testDate.getFullYear()!=dateArray[2]) {
return false;
} else {
return true;
}
} else {
return false;
}
}

// get the calendar week of a date
function getWeek(d) {
/* thanks to http://www.quirksmode.org/js/week.html */
var today = new Date(d);
Year = today.getFullYear();
Month = today.getMonth();
Day = today.getDate();
now = Date.UTC(Year,Month,Day+1,0,0,0);
var Firstday = new Date();
Firstday.setYear(Year);
Firstday.setMonth(0);
Firstday.setDate(1);
then = Date.UTC(Year,0,1,0,0,0);
var Compensation = Firstday.getDay();
if (Compensation > 3) Compensation -= 4;
else Compensation += 3;
NumberOfWeek = Math.round((((now-then)/86400000)+Compensation)/7);
return formatNumber(NumberOfWeek);
}

// change the calendar to the PREVIOUS month
function prevMonth() {
var months = getID("months");
var years = getID("years");
if (parseInt(months.value) - 1 >= 0) {
months.value = parseInt(months.value) - 1;
} else if (parseInt(years.value) > 1901) {
months.value = 11;
years.value = parseInt(years.value) - 1;
}
updateCalendar();
}

// change the calendar to the NEXT month
function nextMonth() {
var months = getID("months");
var years = getID("years");
if (parseInt(months.value) + 1 < 12) {
months.value = parseInt(months.value) + 1;
} else if (parseInt(years.value) < 2099) {
months.value = 0;
years.value = parseInt(years.value) + 1;
}
updateCalendar();
}

// change the calendar to the PREVIOUS year
function prevYear() {
var years = getID("years");
if (parseInt(years.value) > 1901) {
years.value = parseInt(years.value) - 1;
}
updateCalendar();
}

// change the calendar to the NEXT year
function nextYear() {
var years = getID("years");
if (parseInt(years.value) < 2099) {
years.value = parseInt(years.value) + 1;
}
updateCalendar();
}

// update the calendars values
// this changes the <a> tags innerHTML and href values
function updateCalendar() {
var today = new Date();
var y = getID("years");
var m = getID("months");
y = y.value;
m = m.value;

var calendarDate = new Date(y,m,1);
getID("EZcalendar_text").innerHTML = months[calendarDate.getMonth()] + " " + calendarDate.getFullYear();

var defaultMonth = calendarDate.getMonth();
var difference = calendarDate.getDay()+6;
calendarDate.setDate(calendarDate.getDate()-difference);

for (r=0;r<6;r++) {
getID("week"+r).innerHTML = getWeek(calendarDate);
for (c=0;c<7;c++) {
if (calendarDate.getMonth()!=defaultMonth) {
getID("cell"+r+c).className="outsideMonth";
} else {
getID("cell"+r+c).className="";
}

// is it today's date?
if (calendarDate.getDate()+"/"+calendarDate.getMonth()+"/"+calendarDate.getFullYear()==today.getDate()+"/"+today.getMonth()+"/"+today.getFullYear()) {
getID("cell"+r+c).className="today";
}

getID("cell"+r+c).title = "";
getID("cell"+r+c).innerHTML = calendarDate.getDate();
getID("cell"+r+c).href = "javascript:setDate('" + calendarDate.getFullYear() + dateSeparator + formatNumber(calendarDate.getMonth()+1) + dateSeparator + formatNumber(calendarDate.getDate()) + "')";
calendarDate.setDate(calendarDate.getDate()+1);
}
}
}

// when a user click the show calendar link, this function opens
// the calendar and tries to show the correct calendar for the date in
// the input field.
function showCalendar(id) {
if (EZcalendar) {
target=id;
var y = getID("years");
var m = getID("months");
var calendar = getID("EZcalendar");
var el = getID(id);

// test if string is valid date and if so, show calendar relative to the date they have chosen.
if (isValidDate(el.value)) {
var elDate = el.value.replace(/0*(\d*)/gi,"$1");
var dateArray = elDate.split(dateSeparator);
// correct month value
dateArray[1] = dateArray[1]-1;
if (dateArray[2].length<4) {
// correct year value
dateArray[2] = (parseInt(dateArray[2]) < 50) ? 2000 + parseInt(dateArray[2]) : 1900 + parseInt(dateArray[2]);
}
m.value = dateArray[1];
y.value = dateArray[2];
} else {
m.value = selectedDate.getMonth();
y.value = selectedDate.getFullYear();
}

updateCalendar();

var x = getPageOffsetLeft(el);
var y = getPageOffsetTop(el) + el.clientHeight;
calendar.style.top = (y+5)+"px";
calendar.style.left = x+"px";
if (bfadeIn) {
getID("EZcalendar").style.opacity = 0;
getID("EZcalendar").style.filter = "alpha(opacity=0)";
setTimeout("fadeIn(5)",25)
}
calendar.style.display = "block";
} else {
alert("NOTICE:\n\nCalendar not finished loading, please wait...");
}
}

/* When the user clicks, this function tries to detect
if they have clicked outside the calendar and if so
it tries to hide it. */
function clickbg(e) {
if (!overCalendar) {
getID("EZcalendar").style.display="none";
}
}

/* When a user click the calendar date, this function updates the input field */

function setDate(d) {
getID("EZcalendar").style.display = "none";
getID(target).value=d;
}

/* Fading in the calendar in a nice way */
function fadeIn(p) {
getID("EZcalendar").style.opacity = p/100;
getID("EZcalendar").style.filter = "alpha(opacity="+p+")";
if (p<100) {
setTimeout("fadeIn("+(p+5)+")",25);
}
}

/* Loads the calendar for the first time by creating all the HTML */
function initCalendar() {
// create our container DIV
document.body.innerHTML += '\n<div id="EZcalendar" onmouseover="overCalendar=true;" onmouseout="overCalendar=false;"></div>';
var calendarHTML = "";
selectedDate = new Date();
calendarHTML += '<form action="#" method="get">';
calendarHTML += ' <input id="months" name="months" type="hidden" value="' + selectedDate.getMonth() + '" />';
calendarHTML += ' <input id="years" name="years" type="hidden" value="' + selectedDate.getFullYear() + '" />';
calendarHTML += ' <div id="EZcalendar_table">';
calendarHTML += ' <table border="1" cellpadding="0" cellspacing="0">';
calendarHTML += ' <tr>';
calendarHTML += ' <td><input type="button" value="«" onclick="prevYear()" title="Previous Year" /></td>';
calendarHTML += ' <td><input type="button" value="‹" onclick="prevMonth()" title="Previous Month" /></td>';
calendarHTML += ' <td colspan="4" id="EZcalendar_text">' + months[selectedDate.getMonth()] + " " + selectedDate.getFullYear() + '</td>';
calendarHTML += ' <td><input type="button" value="›" onclick="nextMonth()" title="Next Month" /></td>';
calendarHTML += ' <td><input type="button" value="»" onclick="nextYear()" title="Next Year" /></td>';
calendarHTML += ' </tr>';
// build table using for loops...
calendarHTML += ' <tr>';
calendarHTML += ' <th scope="col"> </th>';
calendarHTML += ' <th scope="col">一</th>';
calendarHTML += ' <th scope="col">二</th>';
calendarHTML += ' <th scope="col">三</th>';
calendarHTML += ' <th scope="col">四</th>';
calendarHTML += ' <th scope="col">五</th>';
calendarHTML += ' <th scope="col">六</th>';
calendarHTML += ' <th scope="col">日</th>';
calendarHTML += ' </tr>';
for (r=0;r<6;r++) {
calendarHTML += ' <tr>';
calendarHTML += ' <th scope="row" id="week' + r + '">00</th>';
for (c=0;c<7;c++) {
calendarHTML += ' <td><a href="#" id="cell'+ r + "" + c +'">00</a></td>';
}
}
calendarHTML += ' </tr>';
calendarHTML += '</table>';
// ... end
calendarHTML += ' </div>';
calendarHTML += ' </form>';
getID("EZcalendar").innerHTML = calendarHTML;
EZcalendar = true;
document.onmousedown = clickbg;
updateCalendar();
}

/* Initialise the page by preparing the calendar when the page has loaded */
document.onload = setTimeout("initCalendar()",250);

文件 ezcalendar.css
@charset "utf-8";
/* CSS Document */

#EZcalendar {
display: none;
position: absolute;
margin: 0;
z-index: 99;
background: #005083;
color: #fff;
/* safer to use fixed font sizes */
font: 11px Arial, Helvetica, sans-serif;
border: 5px solid #044771;
}
#EZcalendar form {
margin: 0;
padding: 0;
}
#EZcalendar table {
background: #005083;
border: none;
font-size: 100%;
margin: 0;
padding: 0;
}
#EZcalendar table td, #EZcalendar table th {
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
}
/*tds*/
#EZcalendar table td a.outsideMonth {
background: gray;
color: #fff;
}
#EZcalendar table td a.today{
background: #aaa;
color: #fff;
}
#EZcalendar table td a {
background: silver;
color: #333;
display: block;
color: #333;
margin: 0;
padding: 0;
width: 20px;
height: 20px;
line-height: 20px;
text-decoration: none;
}
#EZcalendar table td a:hover {
color: #fff;
background: red;
}

#EZcalendar table td#EZcalendar_text {
background: #0E649B;
text-align: center;
width: 80px;
height: 20px;
}

#EZcalendar input {
border: none;
background: #1C78B2;
color: #fff;
cursor: pointer;
width: 20px;
height: 20px;
padding: 0;
margin: 0;
text-align: center;
}
#EZcalendar input.left {
float: left;
}
#EZcalendar input.right {
float: right;
}
#EZcalendar_table {
clear: both;
}

Answer 2

用JS日期控件就行了。网上很多的，详见参考网站的WdatePicker控件

参考资料：http://www.my97.net/dp/demo/

本回答被提问者采纳