开发者

Using jQuery Date picker with a custom trigger button

How do I make the jQuery Datepicke开发者_JAVA百科r open up by a user defined button?


There's built-in support for this, having an icon or button to right right of the textbox, like this:

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

If you want to show it from another button, or really any event, call the show method, like this:

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

You can try it here


I have solved using focus.

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

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


The samples page as an example of how to make the datpicker appear by clicking an icon:

here


This is HTML for date picker icon

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

This is function for open & close datepicker on icon click

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


$("#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>


The question is not clear if you want an additional trigger or an additional trigger. If you want to have an additional trigger. The accepted answer did not work for me perhaps its an outdated version. The below code worked for me as a general trigger

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜