Date Picker in Safari

HawkDev · June 16, 2019

I have been using a jquery work around for a datepicker which until today has been working perfectly. Suddenly, it has stopped functioning, so that the drop down calendar no longer appears. The code that I have used for the date picker is as follows:

<script type="text/javascript">
    var datefield=document.createElement("input");
    datefield.setAttribute("type", "date");

    if (datefield.type!="date"){ //if browser doesn't support input type="date", load files for jQuery UI Date Picker
        document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n');
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n');
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n');
    }
</script>
 
<script>
if (datefield.type!="date"){ //if browser doesn't support input type="date", initialize date picker widget:
    jQuery(function($){ //on document.ready
        $('#eventDate').datepicker({
			dateFormat: "dd-mm-yy"
		})
    })
}
</script>

In the past, this was always a work around for the lack of compatibility with the Safari browser. Has something changed?

Ingolme · June 16, 2019

I would assume Safari now gives the field a type of "date".

HawkDev · June 19, 2019

Can I force it to use the jQuery work around anyway? This must be possible?

Ingolme · June 20, 2019

I just checked on MDN and it seems that Safari actually does what I was thinking: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

Quote

The input type is recognized, but there is no date-specific control.

Probably the best you can do is some browser detection. Safari has a lot of stupid quirks that make even Internet Explorer look good.

HawkDev · June 21, 2019

This problem is driving me nuts!!!

I have checked using browser detection, and I can get the code to recognise the browser. I also managed to get it to load the jQuery as a consequence of that, but no matter what I do, I am not getting the drop down calendar that I was getting in the date picker field. I have checked that the type of the field is being recognised, and it is. It is just not producing the calendar. What could I possibly be doing wrong at this point? I created a brief sample of code to show the basic elements of what is in my code. Can you please explain where I might be going wrong?

<html charset='ISO-8859-1'>

<head>
<script type="text/javascript">

function getBrowserName() {
    var name = "Unknown";
    if(navigator.userAgent.indexOf("MSIE")!=-1){
        name = "MSIE";
    }
    else if(navigator.userAgent.indexOf("Firefox")!=-1){
        name = "Firefox";
    }
    else if(navigator.userAgent.indexOf("Opera")!=-1){
        name = "Opera";
    }
    else if(navigator.userAgent.indexOf("Chrome") != -1){
        name = "Chrome";
    }
    else if(navigator.userAgent.indexOf("Safari")!=-1){
        name = "Safari";
    }
    return name;   
}


var datefield=document.createElement("input");
datefield.setAttribute("type", "date");
if( getBrowserName() == "Safari" ){

    document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n');
    document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n');
    document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n');
}

  
if(getBrowserName() == "Safari"){
   jQuery(function($){ 
      $('#birthday').datepicker();
   });
} else {
    alert("You are surfing on " + getBrowserName(name));
} 
 
</script>
</head>

 
<body>
<form>
<b>Date of birth:</b>
<input type="date" id="birthday" name="birthday" size="20" />
<input type="button" value="Submit" name="B1"></p>
</form>
</body>
</html>

dsonesuk · June 21, 2019

Using document.write is a problematic option to code with, you might also have problem with jquery function running before the element has rendered fully. Try placing code after html elements it is referring to.

HawkDev · June 21, 2019

6 minutes ago, dsonesuk said:

Using document.write is a problematic option to code with, you might also have problem with jquery function running before the element has rendered fully. Try placing code after html elements it is referring to.

<html charset='ISO-8859-1'>

<head>

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript">

function getBrowserName() {
    var name = "Unknown";
    if(navigator.userAgent.indexOf("MSIE")!=-1){
        name = "MSIE";
    }
    else if(navigator.userAgent.indexOf("Firefox")!=-1){
        name = "Firefox";
    }
    else if(navigator.userAgent.indexOf("Opera")!=-1){
        name = "Opera";
    }
    else if(navigator.userAgent.indexOf("Chrome") != -1){
        name = "Chrome";
    }
    else if(navigator.userAgent.indexOf("Safari")!=-1){
        name = "Safari";
    }
    return name;   
}


var datefield=document.createElement("input");
datefield.setAttribute("type", "date");

  
 
</script>
</head>

 
<body>
<form>
<b>Date of birth:</b>
<input type="date" id="birthday" name="birthday" size="20" />
<input type="button" value="Submit" name="B1"></p>
</form>


<script type="text/javascript">

if(getBrowserName() == "Safari"){
   jQuery(function($){ 
      $('#birthday').datepicker();
   });
} else {
    alert("You are surfing on " + getBrowserName(name));
} 
</script>
</body>
</html>

Do you mean like this? There is no change in whether it is working.

dsonesuk · June 21, 2019

Call jquery function from outside surrounding the if/else condition with

$('#birthday ').datepicker() ;

Within the if condition itself.

Ingolme · June 21, 2019

Your browser detection code is going to pick up a whole lot of false positives. Please check the page I linked to earlier to read about more accurate detection for Safari.

AjayGohil · October 9, 2019

Hello Try this Script for date picker in safari

$(document).ready(function(){
     $('#date').datepicker();
});

Edited October 9, 2019 by AjayGohil

Ingolme · October 9, 2019

9 hours ago, AjayGohil said:
Hello Try this Script for date picker in safari
$(document).ready(function(){
     $('#date').datepicker();
});

That code is literally in the first post that he made. It would do to read more carefully before replying.

This topic is really old as well, most likely the person will never see your reply.

Date Picker in Safari

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in