Почему эта функция не работает в Safari? (отлично работает в Chrome) - PullRequest
Новая
       2

Почему эта функция не работает в Safari? (отлично работает в Chrome)

0 голосов
/ 01 августа 2020

У меня есть простая функция, которая вычисляет количество дней между двумя выбранными датами. Может ли кто-нибудь помочь мне объяснить, почему в настоящее время он работает только в Chrome, в настоящее время он не работает в Safari. Поле Всего дней (id = "display1") возвращает NaN.

Спасибо 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="generator" content="BBEdit 13.1" />
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    
    <script>
    var example = flatpickr('.flatpickr');
    </script>
    
</head>
<body>

<h2>Calculate How many days</h2>
<p>Start Date: <input id="pick1" class="flatpickr">

<br>
<br>
End Date: <input id="pick2" class="flatpickr">

<br>
<p>Total Days: <input id="display1" value=0>

<br>
<br>
<button id=pushCalc1 type="button" onclick="dispResult()"> Get Result</button>

</body>


<script type = "text/javascript" > 
    
function dispResult(){
  
    // To set two dates to two variables 
    var date1 = new Date(' "' + document.getElementById('pick1').value + '" '); 
    var date2 = new Date(' "' + document.getElementById('pick2').value + '" ');

// To calculate the time difference of two dates 
var Difference_In_Time = date2.getTime() - date1.getTime(); 
  
// To calculate the no. of days between two dates 
var Difference_In_Days = Difference_In_Time / (1000 * 3600 * 24); 
               
document.getElementById('display1').value = Difference_In_Days +1 ;            
            
}


flatpickr('.flatpickr',{
dateFormat: 'm-d-Y',
});
</script>

</html>

Ответы [ 2 ]

2 голосов
/ 04 августа 2020

Вопрос пропал с моих радаров! Я присмотрелся и обнаружил, что нам нужно установить даты, взятые из входных данных, по умолчанию. Я не уверен, почему браузеры ведут себя иначе. Попробуйте! 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta name="generator" content="BBEdit 13.1" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
    var example = flatpickr('.flatpickr');
    </script>
</head>

<body>
    <h2>Calculate How many days</h2>
    <p>Start Date:
        <input id="pick1" class="flatpickr">
        <br>
        <br> End Date:
        <input id="pick2" class="flatpickr">
        <br>
        <p>Total Days:
            <input id="display1" value=0>
            <br>
            <br>
            <button id=pushCalc1 type="button" onclick="dispResult()"> Get Result</button>
        </p>
    </p>
</body>
<script type="text/javascript">
    function dispResult() {
        const date1Value = document.getElementById('pick1').value || new Date();
        const date2Value = document.getElementById('pick2').value || new Date();
        // To set two dates to two variables 
        const date1 = new Date(date1Value);
        const date2 = new Date(date2Value);
        // To calculate the time difference of two dates 
        const differenceInTime = date2.getTime() - date1.getTime();
        // To calculate the no. of days between two dates 
        const differenceInDays = differenceInTime / (1000 * 3600 * 24);
        document.getElementById('display1').value = differenceInDays;
    }
    flatpickr('.flatpickr');
</script>

</html>

Изменить:

Оказывается, m-d-Y не является допустимым строковым вводом в Safari Date, а Chrome с этим можно. Удаление конфигурации dateFormat: 'm-d-Y', переданной в flatpickr, решило проблему

0 голосов
/ 02 августа 2020

Вы забыли теги в конце абзаца. Также рекомендуется объявлять переменные, которые не изменяются, как const вместо var / let.

Исправление: 

    <!DOCTYPE html>
    <html>
       <head>
          <title></title>
          <meta name="generator" content="BBEdit 13.1" />
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
          <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
          <script>
             var example = flatpickr('.flatpickr');
          </script>
       </head>
       <body>
          <h2>Calculate How many days</h2>
          <p>Start Date: <input id="pick1" class="flatpickr"></p>
          <br>
          <br>
          End Date: <input id="pick2" class="flatpickr">
          <br>
          <p>Total Days: <input id="display1" value=0></p>
          <br>
          <br>
          <button id=pushCalc1 type="button" onclick="displayResult()"> Get Result</button>
       </body>
       <script type = "text/javascript" > 
          function displayResult() {
            
              // To set two dates to two variables 
              const date1 = new Date(' "' + document.getElementById('pick1').value + '" '); 
              const date2 = new Date(' "' + document.getElementById('pick2').value + '" ');
          
                // To calculate the time difference of two dates 
                const timeDiff = date2.getTime() - date1.getTime(); 
            
                // To calculate the no. of days between two dates 
                const dayDiff = timeDiff / (1000 * 3600 * 24); 
                         
                document.getElementById('display1').value = dayDiff + 1 ;            
                      
          }
          
          
          flatpickr('.flatpickr',{
            dateFormat: 'm-d-Y',
          });
       </script>
    </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...