Question

我编写了一个日历，您可以在其中点击日期以显示日期。它在除Safari之外的所有浏览器中都能正常工我搜索错误几个小时但我找不到，我在google上的搜索说我必须更改日期字符串的格式，但我直接创建日期对象而不使用日期字符串或初始化，所以那里必须是另一种方式。你发现错误了吗？我会非常感激的！

main.html中：

<html>
    <head>
        <script language="javascript" type="text/javascript" src="functions.js"></script>
    </head>

    <body>
        <script>
            displayMyDate();
            calendar();
        </script>
    </body>
</html>

functions.js：

var myDate = new Date();

function setStyle(id,style,value)
{
    id.style[style] = value;
}

function opacity(el,opacity)
{
        setStyle(el,"filter:","alpha(opacity="+opacity+")");
        setStyle(el,"-moz-opacity",opacity/100);
        setStyle(el,"-khtml-opacity",opacity/100);
        setStyle(el,"opacity",opacity/100);
}

function onCalendarClick(date) {
    myDate = new Date(date);
    var div = document.getElementById('myDate');
    if (div != null) {
        div.innerHTML = 'Datum: ' + myDate.toLocaleDateString();
    }
    onReturnToHome();
}

function displayMyDate() {
    document.write('<div id="myDate" onclick="onMyDateClick();">Datum: ' + myDate.toLocaleDateString() + '</div>');
}

function calendar(date)
{
    if (date == null) var date = new Date();
    else myDate =date;
        var day = date.getDate();
        var month = date.getMonth();
        var year = date.getYear();
        if(year<=200)
        {
                year += 1900;
        }
        months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'Jully', 'August', 'September', 'October', 'November', 'December');
        days_in_month = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
        if(year%4 == 0 && year!=1900)
        {
                days_in_month[1]=29;
        }
        total = days_in_month[month];
        var date_today = day+' '+months[month]+' '+year;
        beg_j = date;
        beg_j.setDate(1);
        if(beg_j.getDate()==2)
        {
                beg_j=setDate(0);
        }
        beg_j = beg_j.getDay();
        document.write('<table class="cal_calendar" onload="opacity(document.getElementById(\'cal_body\'),20);"><tbody id="cal_body"><tr><th colspan="7">'+date_today+'</th></tr>');
        document.write('<tr class="cal_d_weeks"><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr><tr>');
        week = 0;
        for(i=1;i<=beg_j;i++)
        {
                document.write('<td class="cal_days_bef_aft">'+(days_in_month[month-1]-beg_j+i)+'</td>');
                week++;
        }
        for(i=1;i<=total;i++)
        {
                if(week==0)
                {
                        document.write('<tr>');
                }
                if(day==i)
                {
                        document.write('<td class="cal_today" onClick="onCalendarClick(\''+ year + '-' + (month+1) + '-' + i + '\');">'+i+'</td>');
                }
                else
                {
                        document.write('<td onClick="onCalendarClick(\''+ year + '-' + (month+1) + '-' + i + '\');">'+i+'</td>');
                }
                week++;
                if(week==7)
                {
                        document.write('</tr>');
                        week=0;
                }
        }
        for(i=1;week!=0;i++)
        {
                document.write('<td class="cal_days_bef_aft">'+i+'</td>');
                week++;
                if(week==7)
                {
                        document.write('</tr>');
                        week=0;
                }
        }
        document.write('</tbody></table>');
        opacity(document.getElementById('cal_body'),70);
        return true;
}

Answer 1

未定义函数onReturnToHome()。它只是从你的js文件中丢失了吗？

Answer 2

除了缺少该功能外，我还会收到日期格式的错误。您似乎使用“2017-1-1”之类的字符串来设置新日期。这些格式无效，无法直接通过新的Date（）进行解析。您必须为每个低于10的数字添加前导零。

所以'2017-01-20'代表今天而不是'2017-1-20'

（ps：不要忘记使用字符串'01'，因为数字01可能被用作八进制并给出新的错误。）

完整代码，HTML保留与原始帖子相同。在JS中我只更改了fn calendar中的for循环：

var myDate = new Date();

function setStyle(id,style,value) {
    id.style[style] = value;
}

function opacity(el,opacity) {
        setStyle(el,"filter:","alpha(opacity="+opacity+")");
        setStyle(el,"-moz-opacity",opacity/100);
        setStyle(el,"-khtml-opacity",opacity/100);
        setStyle(el,"opacity",opacity/100);
}

function onCalendarClick(date) {
    myDate = new Date(date);
    var div = document.getElementById('myDate');
    if (div != null) {
        div.innerHTML = 'Datum: ' + myDate.toLocaleDateString();
    }
    //onReturnToHome();
}

function displayMyDate() {
    document.write('<div id="myDate" onclick="onMyDateClick();">Datum: ' + myDate.toLocaleDateString() + '</div>');
}

function calendar(date) {
    if (date == null) var date = new Date();
    else myDate =date;
        var day = date.getDate();
        var month = date.getMonth();
        var year = date.getYear();
        if(year<=200)
        {
                year += 1900;
        }
        months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'Jully', 'August', 'September', 'October', 'November', 'December');
        days_in_month = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
        if(year%4 == 0 && year!=1900)
        {
                days_in_month[1]=29;
        }
        total = days_in_month[month];
        var date_today = day+' '+months[month]+' '+year;
        beg_j = date;
        beg_j.setDate(1);
        if(beg_j.getDate()==2)
        {
                beg_j=setDate(0);
        }
        beg_j = beg_j.getDay();
        document.write('<table class="cal_calendar" onload="opacity(document.getElementById(\'cal_body\'),20);"><tbody id="cal_body"><tr><th colspan="7">'+date_today+'</th></tr>');
        document.write('<tr class="cal_d_weeks"><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr><tr>');
        week = 0;
        for(i=1;i<=beg_j;i++)
        {
                document.write('<td class="cal_days_bef_aft">'+(days_in_month[month-1]-beg_j+i)+'</td>');
                week++;
        }
        for(i=1;i<=total;i++)
        {
            var dateToWrite = (i < 10) ? '0' + i : i;
            var monthToWrite = (month + 1 < 10) ? '0' + (month + 1) : month + 1;
                if(week==0)
                {
                        document.write('<tr>');
                }
                if(day==i)
                {
                        document.write('<td class="cal_today" onClick="onCalendarClick(\''+ year + '-' + monthToWrite + '-' + dateToWrite + '\');">'+ dateToWrite +'</td>');
                }
                else
                {
                        document.write('<td onClick="onCalendarClick(\''+ year + '-' + monthToWrite + '-' + dateToWrite + '\');">'+ dateToWrite +'</td>');
                }
                week++;
                if(week==7)
                {
                        document.write('</tr>');
                        week=0;
                }
        }
        for(i=1;week!=0;i++)
        {
                document.write('<td class="cal_days_bef_aft">'+i+'</td>');
                week++;
                if(week==7)
                {
                        document.write('</tr>');
                        week=0;
                }
        }
        document.write('</tbody></table>');
        opacity(document.getElementById('cal_body'),70);
        return true;
}

Answer 3

正如Shilly所指出的，您的问题源于new Date(date)，其中 date 是不受支持的非标准格式。

通常，您不应该使用Date构造函数（或Date.parse）解析字符串，因为它在很大程度上取决于实现，并且在实现之间不一致。

例如，如果您更改为ISO 8601格式并使用：

var date = new Date('2017-01-20')

然后＆＃39; 2017-01-20＆＃39;将被解析为UTC，因此对于格林威治以西的用户而言，日期可能比预期提前一天，除非您将UTC用于所有事情（然后您可能会被夏令时捕获）。

更好地手动解析字符串或使用库。

Answer 4

问题解决了，这是解决方案：

myDate = new Date(date.replace(/-/g, "/"));

而不是

myDate = new Date(date);

in function onCalendarClick（date）

Javascript - 日历在Safari上不起作用

4 个答案: