Question

我有一个如下所示的jQuery UI日历，它只适用于IE浏览器，而不适用于Chrome：

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

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

如果我改变type="text"，它似乎有效。有人可以帮我解决上述问题。我无法使用type="text"，因为我需要显示图片。

感谢。

Answer 1

我有日期选择器的示例问题。

我使用日期选择器，它在Firefox和IE中运行良好，但在chrome中运行不正常。单击输入字段时，我可以看到日历。我选择了日期，但日期值未输入输入字段。

我没有选项，所以我更改了type='text'然后它适用于chrome ..

Input type is date

Input type is text

Answer 2

您可以使用处理程序：

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

希望这有效！：）

Answer 3

我遇到了同样的问题。我想为什么输入可以工作，但按钮不能。诀窍是输入在点击时获得焦点，按钮则没有。试试这个：

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

Answer 4

除非我错了，否则只有div标签，span标签等。可以是日期选择器。

Answer 5

将其用作 -

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

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

检查它的实际效果 - http://jqueryui.com/demos/datepicker/#icon-trigger

不要忘记将这些文件包含在<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">

Answer 6

我遇到了类似的问题：我希望在点击链接时显示我的日期选择器，并且没有字段（或者更确切地说是隐藏字段）。（我的用例是日历上的日期用于查找一系列日期，包括该日期选择器选择，因此除了传递给onSelect处理程序之外，我不需要实际的日期值。）

所以这适用于Firefox：

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

但不在Chrome中。替换为：

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

也失败了。我最终得到了这个：

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

虽然我并不为此感到骄傲！

Answer 7

我花了3个小时试图解决这个问题，这就是我解决问题的方法。

使用以下行作为您的库。

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

这是用于解决问题的javascript：

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

记得删除所有以前的库等

jQuery Date Picker无法在Chrome上运行

7 个答案: