CODEWITHSUNDEEP
jqueryjquery-uijquery-plugins
pvaju896
pvaju896

Reputation: 1417

Using jQuery Date picker with a custom trigger button

How do I make the jQuery Datepicker open up by a user defined button?

Upvotes: 11

Views: 35076

Answers (6)

Curious-programmer
Curious-programmer

Reputation: 813

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');

Upvotes: 0

selcuk mart
selcuk mart

Reputation: 71

I have solved using focus. 

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

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

Upvotes: 3

Sobhit Singh
Sobhit Singh

Reputation: 11

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

Upvotes: 1

Jignesh Patel - Web Developer
Jignesh Patel - Web Developer

Reputation: 111

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

Upvotes: 0

smack0007
smack0007

Reputation: 11356

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

here

Upvotes: 1

Nick Craver
Nick Craver

Reputation: 630559

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

Upvotes: 37

Related Questions