CODEWITHSUNDEEP
javascript
MarkC
MarkC

Reputation: 39

Why doesn't this function work in Safari? (works fine in Chrome)

I have a simple function that calculates the number of days between 2 picked dates. Can anyone help me explain why it is only currently working in Chrome, it does not currently work in Safari. The field Total Days (id="display1") returns NaN.

Thanks

<!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>

Upvotes: 0

Views: 853

Answers (2)

Maxime Helen
Maxime Helen

Reputation: 1412

The question went out of my radar! I had a closer look and discovered we need to default the dates taken from the inputs. I am not sure why browsers weren't behaving the same. Try it!

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

Edit:

Turns out m-d-Y is not an accepted string input to Safari Date, while Chrome is ok with it. Removing dateFormat: 'm-d-Y' config, passed to flatpickr, solved the issue

Upvotes: 2

Robin Lindner
Robin Lindner

Reputation: 605

You forgot the paragraph-ending-tags. It is also recommended to declare variables that are not changed as const instead of var/let.

Correction:

    <!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>

Upvotes: 0

Related Questions