10

jQueryUI has a nice DatePicker with icon trigger (a calendar icon opens the calendar, similar behaviour to Outlook).

On the other hand, Bootstrap 3's Input Groups are really nice for connecting icons to input fields.

Can the two be combined without rewriting either one?

I have made a JSFiddle here. For the «Start Date» the jQueryUI icon trigger is not active. For the «End Date» it is enabled. The DatePicker icon, unfortunately, appears outside of the End Date's Input Group:

So, is it possible to enable the Icon Trigger as part of the Input Group (looking like «Start Date» but behaving like «End Date») without heavy modification?

Main Icon Trigger code:

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

Main Input Group code:

<div class="input-group">
<input type="text" id="datepicker-start" class="form-control" placeholder="Start Date" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
1

5 Answers 5

23

Looking around for solutions to a datepicker problem I was shocked to see an accepted answer with so many problems (and 10 upvotes). It only works by accidental side-effect.

  • It has a DOM ready handler inside the click event. This is pointless as it does nothing (or it should at least be outside the click handler)
  • It is reinitialising datepicker on every click of the icon

The corrected version should look like:

$(document).ready(function() {
  $("#datepicker-my").datepicker();
  $('#btn').click(function() {
    $("#datepicker-my").focus();
  });
});
  • Initialise datepicker once only
  • Cause focus on the input when the icon is clicked (which fires up the calendar).

JSFiddle: http://jsfiddle.net/TrueBlueAussie/JHBpd/151/

Note: It is preferred nowadays to use the shortcut DOM ready handler, so the example would become:

$(function() {
  $("#datepicker-my").datepicker();
  $('#btn').click(function() {
    $("#datepicker-my").focus();
  });
});

Update to support multiple controls via class selectors:

Change the HTML to have identifiable classes and change the focus selectors to select the edit box relative to the button (within same input-group).

JSFiddle: http://jsfiddle.net/JHBpd/260/

$(function() {
  $(".datepicker-my").datepicker();
  $('.btn').click(function() {
    $(".datepicker-my", $(this).closest(".input-group")).focus();
  });
});
3
  • if i have 2 date picker input, do i initialise them separately?.i mean like a $("#datepicker-A").datepicker(); and $("#datepicker-B").datepicker(); follow by 2 focus May 5, 2017 at 4:52
  • 1
    @user1166085: Use class selectors instead of the ID selectors shown and it will work for them all so long as the focus() targets an element relative to this in the click handler. Added example above May 7, 2017 at 12:06
  • Great solution! Thanks for this! Sep 5, 2017 at 20:53
7

I think that you want to show up jquery ui datepicker on bootstrap icon trigger, if it is so here is the solution. Demo JSFiddle

JS:

$('#btn').click(function(){
    //alert('clicked');
    $(document).ready(function(){
        $("#datepicker-my").datepicker().focus();
    });
});
1
  • 2
    10 upvotes on an answer with so many problems is quite impressive. This only works because of an accidental side-effect. This code recreates the datepicker on every button click and has a redundant doc ready handler inside a click event! Seriously guys? 10 upvotes? :) Apr 18, 2016 at 8:40
5

I prefer to use label tag with for attribute to select the input field.

The HTML Label Element () represents a caption for an item in a user interface. It can be associated with a control either by placing the control element inside the element, or by using the for attribute.

More details and examples: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

The value of for attribute will be the ID of a labelable form-related element, e.g. input. In my understand it will focus to your input, since the input already triggers with the date-picker. So, the work is done.

 <div class="input-group">
   <input type="text" id="datepicker-start" class="form-control" placeholder="Start Date" />    
   <label class="input-group-addon" for="datepicker-start">
     <span class="glyphicon glyphicon-calendar"></span>
   </label>
 </div>

JSFiddle: https://jsfiddle.net/om01kgk5/1/

5
  • Simply the best way!Good idea! +1
    – antoniOS
    Oct 4, 2016 at 20:01
  • The JSFiddle does not match the example above (e.g. it does not even have a label and does not work). Can you update with a working example? Oct 11, 2016 at 15:11
  • @AdaroMu: Cutting and pasting my own working JSFiddle exactly (including my commented out line etc) is not what I had in mind for your working answer :) We call that plagiarism. Please accept my -1 until you add your own answer. Oct 13, 2016 at 8:46
  • @GoneCoding Sorry about that, I mistook that as the questioner's jsfiddle. Changed the jsfiddle.
    – AdaroMu
    Oct 13, 2016 at 23:01
  • Better. Works fine. +1 :) Oct 14, 2016 at 10:16
1

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

1
  • Best to describe what you are doing as well as show the example. Basically, you are overlaying a click-transparent fontawesome calendar icon on top of the edit control. Simple and neat +1 :) Jan 27, 2017 at 11:10
0

Below block will work with bootstrap 4, providing button trigger(not input focut) Output

$(function () {
        $("#searchTextDOB").datepicker({
            showOn: "button",            
            buttonImageOnly: false,
            buttonText: ''
        }).next(".ui-datepicker-trigger").addClass("input-group-text btn-light fa fa-calendar-alt").
            wrapAll('<div class="input-group-append"></div');
    });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.