Jump to content
HawkDev

Date Picker in Safari

Recommended Posts

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? 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

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

Within the if condition itself.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Hello Try this Script for date picker in safari

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...