如何使文本框只读，并在使用jQuery单击时显示日历？

Question

我有3个文本框的女巫我想改为readonly。当您单击文本框时，会出现一个日历，您可以在其中选择日期。这就是我想要的，但用户也可以输入日期，我希望将其删除，因为它是一个ipad应用程序，然后调出键盘。

有人可以告诉我如何将我的文本框设置为只读吗？

$('#AdvertiserSignDate').attr('readonly', true);
$('#ContinentalSignDate').attr('readonly', true);
$('#WitnessSignDate').attr('readonly', true);

如果这是错误的方法，请你给我一个很好的重定向。

提前致谢;）

Answer 1

工作演示 http://jsfiddle.net/h9bFb/5/ 或 http://jsfiddle.net/6JAYJ/2/

希望这会有所帮助;

<强>码

  $(function () {

                $("#fromDate, #toDate").datepicker({
                    defaultDate: "+1w",
                    changeMonth: true,
                    numberOfMonths: 1

                }).attr('readonly','true');

            });
​

或

 $(function () {

                var dates = $("#fromDate, #toDate").datepicker({
                    defaultDate: "+1w",
                    changeMonth: true,
                    numberOfMonths: 1

                });

            });

<强> HTML

<label for="from">From</label>
<input type="text" id="fromDate" name="fromDate" readonly='true'/>
<label for="to">to</label>
<input type="text" id="toDate" name="toDate" readonly='true'/>

Answer 2

尝试jQuery UI日历。在这里，您将获得配置的所有选项。 http://jqueryui.com/demos/datepicker/

Answer 3

试试这个

$('#AdvertiserSignDate').keydown(function(event){
  return false;
});