Javascript - 日曆在Safari上不起作用

我設計了一個日曆，您可以在其中點擊日期以顯示日曆。它在除Safari之外的所有瀏覽器中都能正常工作。我搜索了幾個小時的錯誤，但我無法找到它，我在谷歌搜索說，我不得不改變日期字符串的格式，但我直接創建日期對象，而不使用日期字符串或初始化，所以那裏必須是另一種方式。你發現錯誤嗎？我會非常感謝！Javascript - 日曆在Safari上不起作用

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; 
}

來源

2017-01-20 Klaus Dieter

你得到Safari瀏覽器控制檯上的錯誤？ –

當你點擊另一個日期，然後他顯示無效日期 –

使用* document.write *編寫無效HTML代碼片段不是一個好主意，即使最終它是「有效的」（例如，在不同的語句中寫入表格打開標籤寫結束標記）。最好是構造整個字符串，並在完成時使用一個* document.write *。腳本元素的* language *屬性在HTML 4中被棄用，並從此被刪除。 – RobG

功能onReturnToHome()沒有定義。它只是從你的js文件中丟失？

來源

2017-01-20 09:38:19 remib

我把重要部分放在一個更大的項目中，只是爲了顯示重要部分:) –

除了那個缺失的函數，我還得到日期格式的錯誤。看起來你使用'2017-1-1'這樣的字符串來設置新的日期。這些格式無效，無法直接通過新的Date（）進行分析。您必須爲每個低於10的數字添加前導零。

所以「二○一七年一月二十〇日」爲今天而不是「二○一七年一月二十〇日」

（PS：不要忘了，因爲01號可能被用來作爲以字符串「01」工作八進制，並給出新的錯誤。）

完整的代碼，HTML保持原來的職位相同。在JS我不僅改變了對循環FN日曆裏面：

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; 
}

來源

2017-01-20 10:00:34 Shilly

感謝您的回答！ :)你可以直接告訴我你在哪裏進行了更改，或者你可以發佈編輯好的代碼嗎？如果我嘗試輸入它，它會出錯 –

添加了我更改的塊。如果您願意，可以用正常的if/else代替三元組。別忘了在html中替換我。 – Shilly

非常感謝您的幫助！但是這也不能正常工作:(我不知道你的意思是什麼，我應該在HTML文件中替換，對不起我的壞技能：D但是，我非常感謝你的幫助！也許我們發現我的錯誤！ –

正如扭扭指出，您的問題源於new Date(date)其中日期是不受支持的和非標準格式。

通常，您不應該使用Date構造函數（或Date.parse）解析字符串，因爲它在很大程度上依賴於實現，並且在實現中不一致。

例如，如果您更改爲ISO 8601格式和使用：

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

那麼「2017年1月20日」會被解析爲UTC，所以對於用戶格林威治以西的日期可能會出現比預期提前一天，除非你對所有事情都使用UTC（然後你可能會被夏令時發現）。

更好的手動解析字符串或使用庫。

來源

2017-01-21 00:18:12 RobG

爲了記錄，以UTC計算所有內容，然後根據需要進行區域設置轉換，這是我工作的最佳實踐，因爲您希望能夠比較世界各地的日期。 – Shilly

@ Shilly-sure，我不認爲我發佈的任何內容都與此相矛盾。 – RobG

問題是解決了，這是解決方案：的

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

代替

myDate = new Date(date);

在功能onCalendarClick（日期）

來源

2017-01-23 14:36:34

Javascript - 日曆在Safari上不起作用

回答

相關問題