単純なウェブアプリはアンドロイドで動作しますがサファリでは機能しません

私は、特定の日付をとり、今後日数X日を返す仕事で使うための簡単なウェブアプリを作った。アンドロイドで完璧に動作します。 Safariは私が想像できる最高の入力値を取っていないようです。 Safariは未定義のNaNのみを返します。 HTMLはW3Cバリデーターでチェックアウトします。私はまた、 'use strict'を試して、変数にconstをつけるようにしました。私は今は無知で、頭を叩いて疲れている。単純なウェブアプリはアンドロイドで動作しますがサファリでは機能しません

<head> 
    <style> 
     body { 
      background-color: lightblue; 
      text-align: center; 
     } 

     button { 
      margin: 50px 0 25px; 
     } 
    </style> 
</head> 
<body> 
    <div> 
     <h3>Welcome to the</h3> 
     <h1>Ko-culator</h1> 
    </div> 
    <div> 
     <p>Enter last fill/pick up date:</p> 
     <input type="text" id="lastFillDate" placeholder="M-D-YY" style="text-align: center"> 
     <p>Enter day supply:</p> 
     <input type="text" id="daySupply" placeholder="30, 60, etc" style="text-align: center"> 
    </div> 
    <div> 
     <button type="submit" onClick="getNextFill()">Next Fill Date</button> 
    </div> 
    <div> 
     <p class="date-due"></p> 
    </div> 

    <script> 
     function getNextFill() { 
      const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; 
      const lastFillDate = new Date(document.querySelector('#lastFillDate').value); 
      const daySupply = document.querySelector('#daySupply').value; 
      const dayOfMonth = lastFillDate.getDate(); 
      lastFillDate.setDate(dayOfMonth + Number.parseInt(daySupply)); 
      const nextFillDate = days[lastFillDate.getDay()] + " " + (lastFillDate.getMonth() + 1) + "-" + lastFillDate.getDate() + "-" + lastFillDate.getFullYear(); 
      document.querySelector('.date-due').innerHTML = 'Next fill is due on: <br/><br/>' + nextFillDate; 
     }; 
    </script> 
</body>

出典

2017-08-16 user3393940

私はSafariが 'Date.getDate（）'に問題があることを知っています：[ここ]（https://stackoverflow.com/questions/21883699/safari-javascript-date-nan-issue-yyyy-mm-dd- hhmmss） – TricksfortheWeb

それは次のように日付文字列をDateオブジェクトを作成しながら、ISO 8601形式（例えば、「2017年8月16日」）にあなたの日付文字列を維持する方が良いでしょう。そのブラウザ間で矛盾があるため

new Date("2017-08-16");

あなたは期待しません。

Safariで「8-16-17」のような文字列からDateオブジェクトを作成しようとしているときに、実際には無効な日付が返されます。

は

一方、日付と時刻の操作がa disaster in JavaScriptである（また、どのように新しいDate（日付ストリング）hereから作品を見つけることができます）。あなたは、たとえば、エレガントな方法でコードを書くことができるように、私はmoment.js（https://momentjs.com/）のようなライブラリを使用することをお勧めします：

// Create a date in specific date format var date = moment("12-25-2017", "MM-DD-YYYY"); // Adding N days date.add(10, 'days'); // Now it's 2018-01-04 // Output with custom format: console.log(date.format("MM-DD-YY")); // You'll get: 01-04-18

自分でそれらの既存のJavaScriptの問題を処理する必要がないように。

出典

2017-08-16 06:54:48

Safariが日付形式に関してより厳密であるため、コードが機能しません。あなたは有効なフォーマットを入力する必要があります。は、テスト

const lastFillDate = new Date(Date());

で

const lastFillDate = new Date(document.querySelector('#lastFillDate').value);

を交換し、それが動作しますするには。

「2017-09-01」と入力しても問題ありません。

出典

2017-08-16 06:37:10 Vega

YYYY-MM-DD形式は機能しましたが、あなたが提案したコードに変更した時点では機能しません。ご協力ありがとうございました – user3393940

単純なウェブアプリはアンドロイドで動作しますがサファリでは機能しません

答えて

関連する問題