All geek questions in one place

JQuery Date Picker not working in Chrome

I have a jQuery UI calendar, as shown below, and it only works with IE in Chrome:

<input type="image" src="/images/caleder.jpg" id="btnCalendar" /> <script type="text/javascript"> $(function () { $("#btnPeriodCal").datepicker(); }); </script>

If I change type="text" , this will work. Can someone please help me in solving this problem. I cannot use type="text" because I need to show an image.

Thanks.

+6
source share
8 answers

I have a problem with choosing a date.

I used a date picker and it worked fine in Firefox and IE, but not in chrome. I see the calendar when I click on the input field. I selected a date, but the date values ​​are not included in the input field.

I have no option, so I changed type='text' , then it works in chrome ..

Input type is date

Input type is text

+12
source

You can use the handler:

 <script> $(function() { $( "#datepicker" ).datepicker({ showOn: "button", buttonImage: "images/calendar.gif", buttonImageOnly: true }); }); </script>

Hope this works! :)

+4
source

I had the same problem. And I thought why input might work, but the button couldn't. The trick is that when you click, the focus gets focus, but the button doesn't. Try the following:

 $(function () { $("#btnPeriodCal").datepicker().click(function () { $(this).focus(); }); });
+1
source

If I am mistaken, only div tags, span tags, etc. may be date picks.

0
source

Use it as -

 <p>Date: <input type="text" id="datepicker"></p> $(function() { $( "#datepicker" ).datepicker({ showOn: "button", buttonImage: "images/calendar.gif", buttonImageOnly: true }); });

Check it out in action - http://jqueryui.com/demos/datepicker/#icon-trigger

And don't forget to include these files in the <head>

 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js">

0
source

I had a similar problem: I wanted my date picker to appear when the link was clicked and I don't have a field (or rather a hidden field). (My use case was that the date on the calendar should have been used to determine the date range before and including this date picker, so I don't need the actual date value, except that it needs to be passed to the onSelect handler.)

So this works in Firefox:

 <a ...>click for calendar: <input type="hidden" value="" /> </a>

but not in Chrome. Replace with:

 <input type="text" value="" style="display: none" />

also failed. I ended up with this:

 <input type="text" value="" style="width: 0px; height: 0px; border: none; position: absolute; top: 0; left: 0" />

although I'm not proud of it!

0
source

I spent 3 hours trying to understand this problem, and that is how I solved the problem.

use the following lines as your libraries.

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

and this is javascript used to fix the problem:

 $(function() { $("#date_of_birth_date").datepicker({ maxDate: '+0', changeYear: true, yearRange: "-70:+0" }); });

do not forget to delete all previous libraries, etc.

0
source

I think I was late, but none of the answers above worked for me. It worked.

This is from the Chrome documentation. It is working. Just make your input type = "text" and not "date".

How to avoid conflicts between jQuery Datepicker and the built-in date picker? If you tried jQuery Datepicker when entering [type = date] in Google Chrome, you might notice overlapping calendars from both the jQuery user interface and your own pop-up calendar. If you want to use jQuery Datepicker on all platforms, use input [type = text] instead of input [type = date]. Not only Google Chrome, but also iOS Safari, the BlackBerry browser and Opera have their own user interface for input [type = date], and there is currently no way to achieve a single user interface on all platforms using input [type = date]. If you want to use jQuery Datepicker only on platforms without input support [type = date], you can use Modernizr or the following code:

https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome

0
source

Source: https://habr.com/ru/post/917525/

More articles:


All Articles