CODEWITHSUNDEEP
jquery-ui
Nil Pun
Nil Pun

Reputation: 17373

jQuery Date Picker not working on Chrome

I've a jQuery UI Calendar as below and it works on IE only not on Chrome:

<input type="image" src="/images/caleder.jpg" id="btnCalendar" />

<script type="text/javascript">
$(function () {
    $("#btnPeriodCal").datepicker();
});
</script>

If I change type="text" it seems to work. Could someone please help me with how to resolve the above issue. I can't use type="text" as I need to show the image.

Thanks.

Upvotes: 6

Views: 35951

Answers (7)

Brian Sanchez
Brian Sanchez

Reputation: 918

I spent 3 hours trying to figure it out this problem, and this is the way that 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 the javascript used to fix the problem:

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

remember to remove all the previous libraries etc

Upvotes: 0

Jeff Boes
Jeff Boes

Reputation: 1

I had a similar issue: I wanted my datepicker to appear when a link was clicked, and have no field (or rather a hidden field). (My use-case was that the date on the calendar was to be used to find a range of dates up to and including that datepicker selection, so I don't need the actual date value except 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. Replacing the 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" />

though I'm not proud of it!

Upvotes: 0

Mahesh V
Mahesh V

Reputation: 358

I have a sample problem with date picker.

I used date picker and it worked fine in Firefox and IE but not in chrome. I can see the calender when I click the input field. I selected the date but the date values are not entering in input field.

I don't have option so I changed type='text' then it works in chrome..

Input type is date

Input type is text

Upvotes: 13

Xavier Liao
Xavier Liao

Reputation: 11

I had the same problem. And I thought why input could work, but button could not. The trick is that input gets focus when clicked, button doesn't. Try this:

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

Upvotes: 1

Dipak
Dipak

Reputation: 12190

Use it as - 

<p>Date: <input type="text" id="datepicker"></p>

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

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

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

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

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

You can use a handler:

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

Hope this works! :)

Upvotes: 4

Landin Martens
Landin Martens

Reputation: 3333

Unless I am wrong only div tags, span tags, etc.. can be date pickers.

Upvotes: 0

Related Questions