HawkDev Posted June 16, 2019 Share Posted 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? Link to comment Share on other sites More sharing options...
Ingolme Posted June 16, 2019 Share Posted June 16, 2019 I would assume Safari now gives the field a type of "date". Link to comment Share on other sites More sharing options...
HawkDev Posted June 19, 2019 Author Share Posted June 19, 2019 Can I force it to use the jQuery work around anyway? This must be possible? Link to comment Share on other sites More sharing options...
Ingolme Posted June 20, 2019 Share Posted 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. Link to comment Share on other sites More sharing options...
HawkDev Posted June 21, 2019 Author Share Posted 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> Link to comment Share on other sites More sharing options...
dsonesuk Posted June 21, 2019 Share Posted 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. Link to comment Share on other sites More sharing options...
HawkDev Posted June 21, 2019 Author Share Posted 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 21, 2019 Share Posted June 21, 2019 Call jquery function from outside surrounding the if/else condition with $('#birthday ').datepicker() ; Within the if condition itself. Link to comment Share on other sites More sharing options...
Ingolme Posted June 21, 2019 Share Posted 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. Link to comment Share on other sites More sharing options...
AjayGohil Posted October 9, 2019 Share Posted October 9, 2019 (edited) Hello Try this Script for date picker in safari $(document).ready(function(){ $('#date').datepicker(); }); Edited October 9, 2019 by AjayGohil Link to comment Share on other sites More sharing options...
Ingolme Posted October 9, 2019 Share Posted 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now