Tempus-dominus: How can I show the date picker on input and icon click

[AlmogRnD]

Right now it works just by clicking the icon but I would also like it to show when a user clicks the input flied

[brubie]

I've solved this doing the following:

<div class="col-md-6 input-group">
    <input type="text" id="testdate" name="testdate" class="form-control" value="">
    <label class="input-group-addon btn" for="testdate">
       <span class="fa fa-calendar"></span>
    </label>                    
</div>

[kingjerod]

In case anybody else stumbles on this question, this is how I solved it with jQuery:

$('.open-datetimepicker').click(function(event){
    event.preventDefault();
    $('#datetimepicker').click();
});

Your HTML might look similar to this:

<div class="input-group">
    <input type="text" id="datetimepicker" class="form-control" name="date">
    <label class="input-group-addon btn" for="date">
       <span class="fa fa-calendar open-datetimepicker"></span>
    </label>
</div>

[brubie]

This works for us in both Chrome and Safari. Thanks!

[Eonasdan]

You can easily do this:

<div class="form-group">
    <div class="input-group date" id="datetimepicker1">
        <input type="text" class="form-control" /><span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
         </div>
</div>

$('#datetimepicker1 input').click(function(event){
   $('#datetimepicker1 ').data("DateTimePicker").show();
});

Also a new feature in the dev branch, you can press the down arrow key while focused on the input box to show the picker

[seanmadhaven]

perhaps binding focus is better than click?

[mkotov13]

Thanks @brubie!!! that works

[Eonasdan]

the current version allows allowInputToggle which will open the picker from either the icon or the textbox

[vietnguyen09]

Thanks @brubie your solution safe me a headache and hours googling

[DanielFurmanov]

as @Eonasdan said just use:

    $('#datepicker).datetimepicker({                            
                  allowInputToggle: true
          });

and it works like a charm

[sylvinho81]

Thanks @brubie .

[santosh-k1]

I have used one main wrapper in below solution to use where we can open the date picker on text box as well as glyphicon-calendar ...

<div class="input-group date" id="ReportDate">
                  <div id="txtdatefrom">
                  <input accesskey="r" readonly="true" class="form-control datepicker" placeholder="Select Date" ng-required="true" ng-model="SelectedReportDate" type="text" id="txtReportDate" name="txtReportDate" required="required" data-ng-animate="2">
                  </div>
                  <span class="input-group-addon text-pointer">
                  <span class="glyphicon glyphicon-calendar"></span>
                  </span>
                 </div>

$('#ReportDate').datepicker(
                  {
                      format: 'dd/mm/yyyy',
                      autoclose: true,
                      forceParse: false,
                      Default: true,
                      pickDate: true,
                      todayHighlight: true,

                  });

[techyaura]

@kingjerod. Thanks.
Only instead of click, i have used focus.

$('.open-datetimepicker').click(function(event){
    event.preventDefault();
    $('#datetimepicker').focus();
});

[decentplusd]

Thanks @brubie

[pancakesFORlunch]

Thanks @rroxysam you're a life saver :+1:

[tarmotalu]

Use data-provide attribute for _input-group_ div.

 <div class="input-group date" data-provide="datepicker">
  <input type="text">
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>

[vaniachoi]

what if i have an icon, and when i pick the date, the value of a span change? not input?