需要一個JavaScript日曆，應該只顯示日期對應於文本框中的日期

大家好我想顯示彈出日曆，當我點擊我的應用程序中的日曆。以前我會在我的文本框中有一個日期，可能是當年的任何日期。我需要的是如果我的文本框中的日期是01/03/2008之類的東西..我想只顯示下一個日期之後，我想要禁用所有以前的日期爲不可選。需要一個JavaScript日曆，應該只顯示日期對應於文本框中的日期

我使用的腳本是這樣的

function positionInfo(object) { 

var p_elm = object; 

this.getElementLeft = getElementLeft; 
function getElementLeft() { 
var x = 0; 
var elm; 
if(typeof(p_elm) == "object"){ 
    elm = p_elm; 
} else { 
    elm = document.getElementById(p_elm); 
} 
while (elm != null) { 
    x+= elm.offsetLeft; 
    elm = elm.offsetParent; 
} 
return parseInt(x); 
} 

this.getElementWidth = getElementWidth; 
function getElementWidth(){ 
var elm; 
if(typeof(p_elm) == "object"){ 
    elm = p_elm; 
} else { 
    elm = document.getElementById(p_elm); 
} 
return parseInt(elm.offsetWidth); 
} 

    this.getElementRight = getElementRight; 
    function getElementRight(){ 
    return getElementLeft(p_elm) + getElementWidth(p_elm); 
    } 

    this.getElementTop = getElementTop; 
    function getElementTop() { 
    var y = 0; 
    var elm; 
    if(typeof(p_elm) == "object"){ 
    elm = p_elm; 
    } else { 
    elm = document.getElementById(p_elm); 
    } 
    while (elm != null) { 
    y+= elm.offsetTop; 
    elm = elm.offsetParent; 
} 
return parseInt(y); 
} 

this.getElementHeight = getElementHeight; 
    function getElementHeight(){ 
    var elm; 
    if(typeof(p_elm) == "object"){ 
    elm = p_elm; 
    } else { 
    elm = document.getElementById(p_elm); 
    } 
    return parseInt(elm.offsetHeight); 
} 

this.getElementBottom = getElementBottom; 
function getElementBottom(){ 
    return getElementTop(p_elm) + getElementHeight(p_elm); 
} 
} 

function CalendarControl() { 

var calendarId = 'CalendarControl'; 
var currentYear = 0; 
    var currentMonth = 0; 
    var currentDay = 0; 

var selectedYear = 0; 
var selectedMonth = 0; 
    var selectedDay = 0; 

var months =  ['January','February','March','April','May','June','July','August','September','October','November','December']; 
var dateField = null; 

function getProperty(p_property){ 
var p_elm = calendarId; 
var elm = null; 

if(typeof(p_elm) == "object"){ 
    elm = p_elm; 
} else { 
    elm = document.getElementById(p_elm); 
} 
if (elm != null){ 
    if(elm.style){ 
    elm = elm.style; 
    if(elm[p_property]){ 
     return elm[p_property]; 
    } else { 
     return null; 
    } 
    } else { 
    return null; 
    } 
} 
} 

function setElementProperty(p_property, p_value, p_elmId){ 
var p_elm = p_elmId; 
var elm = null; 

if(typeof(p_elm) == "object"){ 
    elm = p_elm; 
} else { 
    elm = document.getElementById(p_elm); 
} 
if((elm != null) && (elm.style != null)){ 
    elm = elm.style; 
    elm[ p_property ] = p_value; 
} 
} 

function setProperty(p_property, p_value) { 
setElementProperty(p_property, p_value, calendarId); 
} 

    function getDaysInMonth(year, month) { 
return [31,((!(year % 4) && ((year % 100) || !(year % 400)))?29:28),31,30,31,30,31,31,30,31,30,31][month-1]; 
} 

function getDayOfWeek(year, month, day) { 
var date = new Date(year,month-1,day) 
return date.getDay(); 
} 

this.setDate = setDate; 
function setDate(year, month, day) { 
    if (dateField) { 
    if (month < 10) {month = "0" + month;} 
    if (day < 10) {day = "0" + day;} 

    var dateString = month+"-"+day+"-"+year; 
    dateField.value = dateString; 
    hide(); 
    } 
return; 
} 

    this.changeMonth = changeMonth; 
function changeMonth(change) { 
    currentMonth += change; 
    currentDay = 0; 
if(currentMonth > 12) { 
    currentMonth = 1; 
    currentYear++; 
    } else if(currentMonth < 1) { 
    currentMonth = 12; 
    currentYear--; 
    } 

calendar = document.getElementById(calendarId); 
calendar.innerHTML = calendarDrawTable(); 
} 

this.changeYear = changeYear; 
function changeYear(change) { 
currentYear += change; 
currentDay = 0; 
calendar = document.getElementById(calendarId); 
calendar.innerHTML = calendarDrawTable(); 
} 

function getCurrentYear() { 
var year = new Date().getYear(); 
if(year < 1900) year += 1900; 
return year; 
} 

function getCurrentMonth() { 
return new Date().getMonth() + 1; 
} 

function getCurrentDay() { 
return new Date().getDate(); 
} 

function calendarDrawTable() { 

    var dayOfMonth = 1; 
    var validDay = 0; 
    var startDayOfWeek = getDayOfWeek(currentYear, currentMonth, dayOfMonth); 
    var daysInMonth = getDaysInMonth(currentYear, currentMonth); 
    var css_class = null; //CSS class for each day 

    var table = "<table cellspacing='0' cellpadding='0' border='0'>"; 
    table = table + "<tr class='header'>"; 
    table = table + " <td colspan='2' class='previous'><a href='javascript:changeCalendarControlMonth(-1);'>&lt;</a> <a href='javascript:changeCalendarControlYear(-1);'>&laquo;</a></td>"; 
table = table + " <td colspan='3' class='title'>" + months[currentMonth-1] + "<br>" + currentYear + "</td>"; 
table = table + " <td colspan='2' class='next'><a href='javascript:changeCalendarControlYear(1);'>&raquo;</a> <a href='javascript:changeCalendarControlMonth(1);'>&gt;</a></td>"; 
table = table + "</tr>"; 
table = table + "<tr><th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th></tr>"; 

for(var week=0; week < 6; week++) { 
    table = table + "<tr>"; 
    for(var dayOfWeek=0; dayOfWeek < 7; dayOfWeek++) { 
    if(week == 0 && startDayOfWeek == dayOfWeek) { 
     validDay = 1; 
    } else if (validDay == 1 && dayOfMonth > daysInMonth) { 
     validDay = 0; 
    } 

    if(validDay) { 
     if (dayOfMonth == selectedDay && currentYear == selectedYear && currentMonth == selectedMonth) { 
     css_class = 'current'; 
     } else if (dayOfWeek == 0 || dayOfWeek == 6) { 
     css_class = 'weekend'; 
     } else { 
     css_class = 'weekday'; 
     } 

     table = table + "<td><a class='"+css_class+"' href=\"javascript:setCalendarControlDate("+currentYear+","+currentMonth+","+dayOfMonth+")\">"+dayOfMonth+"</a></td>"; 
     dayOfMonth++; 
    } else { 
     table = table + "<td class='empty'>&nbsp;</td>"; 
    } 
    } 
    table = table + "</tr>"; 
} 

table = table + "<tr class='header'><th colspan='7' style='padding: 3px;'><a href='javascript:hideCalendarControl();'>Close</a></td></tr>"; 
table = table + "</table>"; 

return table; 
} 

this.show = show; 
function show(field) { 

// If the calendar is visible and associated with 
// this field do not do anything. 
if (dateField == field) { 
    return; 
} else { 
    dateField = field; 
} 

if(dateField) { 
    try { 
    var dateString = new String(dateField.value); 
    var dateParts = dateString.split("-"); 

    selectedMonth = parseInt(dateParts[0],10); 
    selectedDay = parseInt(dateParts[1],10); 
    selectedYear = parseInt(dateParts[2],10); 
    } catch(e) {} 
} 

if (!(selectedYear && selectedMonth && selectedDay)) { 
    selectedMonth = getCurrentMonth(); 
    selectedDay = getCurrentDay(); 
    selectedYear = getCurrentYear(); 
} 

currentMonth = selectedMonth; 
currentDay = selectedDay; 
currentYear = selectedYear; 

if(document.getElementById){ 

    calendar = document.getElementById(calendarId); 
    calendar.innerHTML = calendarDrawTable(currentYear, currentMonth); 

    setElementProperty('display', 'block', 'CalendarControlIFrame'); 
    setProperty('display', 'block'); 

    var fieldPos = new positionInfo(dateField); 
    var calendarPos = new positionInfo(calendarId); 

    var x = fieldPos.getElementLeft(); 
    var y = fieldPos.getElementBottom(); 
    x=x+155; 
    y=y-22; 
    setProperty('left', x + "px"); 
    setProperty('top', y + "px"); 
    setElementProperty('left', x + "px", 'CalendarControlIFrame'); 
    setElementProperty('top', y + "px", 'CalendarControlIFrame'); 
    setElementProperty('width', calendarPos.getElementWidth() + "px", 'CalendarControlIFrame'); 
    setElementProperty('height', calendarPos.getElementHeight() + "px", 'CalendarControlIFrame'); 
} 
} 

this.hide = hide; 
    function hide() { 
    if(dateField) { 
    setProperty('display', 'none'); 
    setElementProperty('display', 'none', 'CalendarControlIFrame'); 
    dateField = null; 
    } 
    } 
} 

    var calendarControl = new CalendarControl(); 

function showCalendarControl(textField) { 
calendarControl.show(textField); 

} 

    function hideCalendarControl() { 
    calendarControl.hide(); 
    } 

    function setCalendarControlDate(year, month, day) { 
    calendarControl.setDate(year, month, day); 
    } 

    function changeCalendarControlYear(change) { 
calendarControl.changeYear(change); 
} 

function changeCalendarControlMonth(change) { 
calendarControl.changeMonth(change); 
} 

document.write("<iframe id='CalendarControlIFrame' src='javascript:false;'  frameBorder='0' scrolling='no'></iframe>"); 
document.write("<div id='CalendarControl'></div>");

來源

2010-08-14 Dotnet

這似乎是工作。儘管如此，測試它。

由於某種原因，格式不起作用。

所以，我把它粘貼到了shorttext.com上。這裏是鏈接： link text

來源

2010-08-15 09:47:47 krishna

它的工作是否足夠好，我問的意思是我想根據文本框中的日期禁用日曆的所有以前的日期字段 – Dotnet 2010-08-15 13:10:29

嘿，你能告訴你在代碼中所做的更改，請 – Dotnet 2010-08-15 13:13:54

宣佈三變量：minDay，minMonth和minYear以及drawCalendarTable方法中的一些更改。使用文件比較軟件檢查更改 – krishna 2010-08-15 14:03:07

不要重新發明輪子...看看jQuery UI。

來源

2010-08-14 14:53:21 roosteronacid

頁面沒有被加載 – Dotnet 2010-08-15 13:11:02

更新了我的答案。現在工作。 – roosteronacid 2010-08-15 14:12:18

需要一個JavaScript日曆，應該只顯示日期對應於文本框中的日期

回答

相關問題