Question

如何通过用户定义的按钮打开jQuery Datepicker？

Answer 1

有built-in support for this，文本框右侧有一个图标或按钮，如下所示：

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

如果您想从另一个按钮或任何事件中显示它，请拨打show method，如下所示：

$("#myButton").click(function() {
  $("#datepicker").datepicker("show");
});

You can try it here

Answer 2

示例页面作为如何通过单击图标显示日期选择器的示例：

here

Answer 3

我已经解决了使用焦点的问题。

$("#datepicker").datepicker();

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

Answer 4

$("#checkin").datepicker({
  dateFormat: 'dd/mm/yy',
  minDate: '0',
  changeMonth: true,
  numberOfMonths: 1
 });

.datedivmng{
    float: left;position: relative;
}
.datedivmng .datepicker{
    position: relative;width: 87%!important;
    cursor: pointer;
}
.datedivmng:after {
    /* symbol for "opening" panels */
    font-family: 'FontAwesome';
    content: "\f073";
    color: #329ac4;
    font-size: 16px;
    text-shadow: none;
    position: absolute;
    vertical-align: middle;
    pointer-events: none;
    float: right;
    top: 2px;
    right: 7px;
}

<div class="datedivmng">
  <input type="text" id="checkin" name="checkin"  value="" /></div>

Answer 5

这是日期选择器图标的HTML

onclick="show_date_picker('#datepicker_id');  on you icon element

这是open＆amp; amp;的功能。关闭图标上的datepicker点击

function show_date_picker(source_datepicker){
    if($(source_datepicker).datepicker("widget").is(":visible")){
        $(source_datepicker).datepicker("hide");
    }else{ 
        $(source_datepicker).datepicker("show"); 
    }
}

Answer 6

如果您想要其他触发器或其他触发器，问题尚不清楚。如果您想要其他触发器。接受的答案对我不起作用，也许它是过时的版本。以下代码对我来说是通用触发器

    $('#datepicker').jqxDateTimeInput('open');

使用带有自定义触发器按钮的jQuery Date picker

6 个答案: