0

通常の HTML ファイルで正常に動作する JavaScript カレンダーがあります。

[追加] ボタンをクリックしたときに作成される動的テキスト ボックスと統合する必要があります。テキスト ボックスをクリックするとカレンダーが表示されるように JavaScript を変更しました。最初に作成したテキスト ボックスでは機能しません。別のテキスト ボックスを追加すると、正常に機能します。

index.php

<html>
  <head>

<script src="calendar.js"></script>

<script>
intTextBox = 0;
function addElement()
{


intTextBox = intTextBox + 1;
var contentID = document.getElementById('content');
var newTBDiv = document.createElement('table');
newTBDiv.setAttribute('id','strText'+intTextBox);
newTBDiv.innerHTML ='<input type="text" name="arr1" class="calendarSelectDate" onclick="testtt();" />'
contentID.appendChild(newTBDiv);
}
function testtt()
{

popUpCal.init();


}

</script>
 <link href="cal.css" rel="stylesheet">
    </head>


    <body>



        <br/>
        <form action="" method="post">      
        <label>Data:</label>

        <?php ?>
       <a href="javascript:addElement();" >Add</a>
       <table><tr id="content"> <td></td></tr></table>

       <div id="calendarDiv"></div>
        <!--<input type="text" name="arr1" class="calendarSelectDate"/> 
           <input type="text" name="arr2" class="calendarSelectDate"/>  
              <input type="text" name="arr3" class="calendarSelectDate"/>  
                 <input type="text" name="arr4" class="calendarSelectDate"/>  
                    <input type="text" name="arr5" class="calendarSelectDate"/>  
                       <input type="text" name="arr6" class="calendarSelectDate"/>    -->

    <!--<div style="height:20;"></div>
    <div style="height:20;"></div>
    <div style="height:20;"></div>
    <div style="height:20;"></div>
    <div style="height:20;"></div>
    <div style="height:20;"></div>
    <table><tr><td><div id="calendarDiv"></div></td></tr></table>-->
    <?php ?>
    <input type="submit" name="button" value="call" />
    </form>
    <?php if(isset($_REQUEST['button'])) { extract($_REQUEST);
    print_r($arr); }?>
        </body>
</html>

calendar.js

/*!
  * Clean Calendar
  * Copyright 2007-2009 Marc Grabanski (m@marcgrabanski.com) http://marcgrabanski.com
  * Project Page: http://marcgrabanski.com/article/clean-calendar
  * Under the MIT License */

var popUpCal = {
    selectedMonth: new Date().getMonth(),
    // 0-11
    selectedYear: new Date().getFullYear(),
    // 4-digit year
    selectedDay: new Date().getDate(),
    calendarId: 'calendarDiv',
    inputClass: 'calendarSelectDate',

    init: function() {
        var x = getElementsByClass(popUpCal.inputClass, document, 'input');
        var y = document.getElementById(popUpCal.calendarId);
        // set the calendar position based on the input position
        for (var i = 0; i < x.length; i++) {
            x[i].onfocus = function() {
                popUpCal.selectedMonth = new Date().getMonth();
                setPos(this, y);
                // setPos(targetObj,moveObj)
                y.style.display = 'block';
                popUpCal.drawCalendar(this);
                popUpCal.setupLinks(this);

            }
        }
    },

    drawCalendar: function(inputObj) {

        var html = '';
        html = '<a id="closeCalender"><img src="http://www.nzbmovieseeker.com/images/close.gif"></img></a>';
        html += '<table cellpadding="0" cellspacing="0" id="linksTable"><tr>';
        html += '    <td><a id="prevMonth"><b><< </b></a></td>';
        html += '<td colspan="7" class="calendarHeader">' + getMonthName(popUpCal.selectedMonth) + ' ' + popUpCal.selectedYear + '</td>';
        html += '    <td><a id="nextMonth"><b> >></b></a></td>';
        html += '</tr></table>';
        html += '<table id="calendar" cellpadding="0" cellspacing="0"><tr>';
        html += '</tr><tr class="weekDaysTitleRow">';
        var weekDays = new Array('D', 'S', 'T', 'Q', 'Q', 'S', 'S');
        for (var j = 0; j < weekDays.length; j++) {
            html += '<td>' + weekDays[j] + '</td>';
        }

        var daysInMonth = getDaysInMonth(popUpCal.selectedYear, popUpCal.selectedMonth);
        var startDay = getFirstDayofMonth(popUpCal.selectedYear, popUpCal.selectedMonth);
        var numRows = 0;
        var printDate = 1;
        if (startDay != 7) {
            numRows = Math.ceil(((startDay + 1) + (daysInMonth)) / 7);
            // calculate the number of rows to generate
        }

        // calculate number of days before calendar starts
        if (startDay != 7) {
            var noPrintDays = startDay + 1;
        } else {
            var noPrintDays = 0;
            // if sunday print right away    
        }
        var today = new Date().getDate();
        var thisMonth = new Date().getMonth();
        var thisYear = new Date().getFullYear();
        // create calendar rows
        for (var e = 0; e < numRows; e++) {
            html += '<tr class="weekDaysRow">';
            // create calendar days
            for (var f = 0; f < 7; f++) {
                if ((printDate == today) && (popUpCal.selectedYear == thisYear) && (popUpCal.selectedMonth == thisMonth) && (noPrintDays == 0)) {
                    html += '<td id="today" class="weekDaysCell">';
                } else {
                    html += '<td class="weekDaysCell">';
                }
                if (noPrintDays == 0) {
                    if (printDate <= daysInMonth) {
                        html += '<a>' + printDate + '</a>';
                    }
                    printDate++;
                }
                html += '</td>';
                if (noPrintDays > 0) noPrintDays--;
            }
            html += '</tr>';
        }
        html += '</table>';
        html += '<!--[if lte IE 6.5]><iframe src="javascript:false;" id="calendar_cover"></iframe><![endif]-->';

        // add calendar to element to calendar Div
        var calendarDiv = document.getElementById(popUpCal.calendarId);
        calendarDiv.innerHTML = html;

        // close button link
        document.getElementById('closeCalender').onclick = function() {
            calendarDiv.style.display = 'none';
        }
        // setup next and previous links
        document.getElementById('prevMonth').onclick = function() {
            popUpCal.selectedMonth--;
            if (popUpCal.selectedMonth < 0) {
                popUpCal.selectedMonth = 11;
                popUpCal.selectedYear--;
            }
            popUpCal.drawCalendar(inputObj);
            popUpCal.setupLinks(inputObj);
        }
        document.getElementById('nextMonth').onclick = function() {
            popUpCal.selectedMonth++;
            if (popUpCal.selectedMonth > 11) {
                popUpCal.selectedMonth = 0;
                popUpCal.selectedYear++;
            }
            popUpCal.drawCalendar(inputObj);
            popUpCal.setupLinks(inputObj);
        }

    },
    // end drawCalendar function
    setupLinks: function(inputObj) {
        // set up link events on calendar table
        var y = document.getElementById('calendar');
        var x = y.getElementsByTagName('a');
        for (var i = 0; i < x.length; i++) {
            x[i].onmouseover = function() {
                this.parentNode.className = 'weekDaysCellOver';
            }
            x[i].onmouseout = function() {
                this.parentNode.className = 'weekDaysCell';
            }
            x[i].onclick = function() {
                document.getElementById(popUpCal.calendarId).style.display = 'none';
                popUpCal.selectedDay = this.innerHTML;
                inputObj.value = formatDate(popUpCal.selectedDay, popUpCal.selectedMonth, popUpCal.selectedYear);
            }
        }
    }

}
// Add calendar event that has wide browser support
if (typeof window.addEventListener != "undefined") window.addEventListener("load", popUpCal.init, false);
else if (typeof window.attachEvent != "undefined") window.attachEvent("onload", popUpCal.init);
else {
    if (window.onload != null) {
        var oldOnload = window.onload;
        window.onload = function(e) {
            oldOnload(e);
            popUpCal.init();
        };
    }
    else window.onload = popUpCal.init;
}

/* Functions Dealing with Dates */

function formatDate(Day, Month, Year) {
    Month++;
    // adjust javascript month
    if (Month < 10) Month = '0' + Month;
    // add a zero if less than 10
    if (Day < 10) Day = '0' + Day;
    // add a zero if less than 10
    var dateString = Year + '-' + Month + '-' + Day;
    return dateString;
}

function getMonthName(month) {
    var monthNames = new Array('Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'july', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro');
    return monthNames[month];
}

function getDayName(day) {
    var dayNames = new Array('Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday')
    return dayNames[day];
}

function getDaysInMonth(year, month) {
    return 32 - new Date(year, month, 32).getDate();
}

function getFirstDayofMonth(year, month) {
    var day;
    day = new Date(year, month, 0).getDay();
    return day;
}

/* Common Scripts */

function getElementsByClass(searchClass, node, tag) {
    var classElements = new Array();
    if (node == null) node = document;
    if (tag == null) tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\s)" + searchClass + "(\s|$)");
    for (i = 0, j = 0; i < elsLen; i++) {
        if (pattern.test(els[i].className)) {
            classElements[j] = els[i];
            j++;
        }
    }
    return classElements;
}

/* Position Functions */

function setPos(targetObj, moveObj) {
    var coors = findPos(targetObj);
    moveObj.style.position = 'absolute';
    moveObj.style.top = coors[1] + 18 + 'px';
    moveObj.style.left = coors[0] + 'px';
}

function findPos(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        curleft = obj.offsetLeft
        curtop = obj.offsetTop
        while (obj = obj.offsetParent) {
            curleft += obj.offsetLeft
            curtop += obj.offsetTop
        }
    }
    return [curleft, curtop];
}

cal.css

/* calendar style */
#calendarDiv table, #calendarDiv th, #calendarDiv td, #calendarDiv, #calendarDiv a {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 12px;
    font-family: inherit;
    vertical-align: baseline;
}

div#calendarDiv {
    display: block;
    display: none;
    position: relative;
    border: 1px solid #777;
}
div#calendarDiv a {
    cursor: pointer;
    cursor: hand;
    color: #000;
    text-decoration: none;
}
table#calendar {
    background: #ddd;
    clear: both;
    text-align: center;
    font-size: 105%;
}
table#calendar, #linksTable {
    width: 180px;
}
.calendarHeader {
    background-color: #0080CC;
    border-bottom: 1px solid #444;
    color: #fff;
}
table#calendar tr.weekDaysTitleRow td {
    background: #777;
    color: #fff;
}
table#calendar tr.weekDaysRow {
    background: #eee;
    color: #666;
}
table#calendar td.weekDaysCell {
    color: #000;
    border: 1px solid #ddd;
}
table#calendar td.weekDaysCellOver {
    background: #fff;
    border: 1px solid #777;
}
a#closeCalender {
    position: absolute;
    right: 0;
    bottom: 100%;
    margin-bottom: 1px;
    display: block;
    padding: 2px;
    cursor: pointer;
    cursor: hand;
    font-size: 60%;
    letter-spacing: 1px;
}
a#closeCalender:hover {
    background-color: transparent;
    color: #fff;
}
div#calendarDiv table#linksTable td {
    background: #000;
}
table#linksTable a {
    text-align: center;
    display: block;
    color: #fff;
    letter-spacing: 1px;
    font-weight: bold;
    font-size: 80%;
    padding: 2px 5px;
}
table#linksTable a:hover {
    background: #ddd;
    color: #333;
}
a#prevMonth {
    float: left;
}
a#nextMonth {
    float: right;
}
td#today {
    background: #999;
}
#calendar_cover {
    display: none; /*sorry for IE5*/
    display/**/: block; /*sorry for IE5*/
    position: absolute; /*must have*/
    z-index: -1; /*must have*/
    filter: mask(); /*must have*/
    top: -4px; /*must have*/
    left: -4px; /*must have*/
    width: 193px; /*must have to match width and borders*/
    height: 200px; /*must have to match maximum height*/ 
}
4

0 に答える 0