6

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.

4

7 回答 7

13

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

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

我没有选择，所以我改变了type='text'然后它在 chrome 中工作..

输入类型为日期

输入类型是文本

于 2012-11-09T05:50:02.333 回答
4

您可以使用处理程序：

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

希望这有效！:)

于 2012-06-07T13:04:10.593 回答
1

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

$(function () {
    $("#btnPeriodCal").datepicker().click(function () { $(this).focus(); });
});
于 2012-08-22T02:49:55.733 回答
0

我有一个类似的问题：我希望我的日期选择器在单击链接时出现，并且没有字段（或者更确切地说是隐藏字段）。（我的用例是日历上的日期用于查找直到并包括该日期选择器选择的日期范围，因此我不需要实际的日期值，除非将其传递给 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" />

虽然我并不以此为荣！

于 2013-01-04T18:05:01.957 回答
0

将其用作 -

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

于 2012-06-09T07:29:35.090 回答
0

我花了 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" 
    });
});

记得删除所有以前的库等

于 2013-10-23T21:10:45.847 回答
0

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

于 2012-06-07T13:03:39.933 回答