Get bootstrap-datetimepicker to appear on field and on icon, without duplicating

I am trying to get bootstrap-datetimepicker to work the way I want it to. Normally the datetime selector only pops up when clicked on the icon. But I want it to pop up when clicked on the field and on the icon.

    <div class="input-group datetime datepicker">
      <input class="form-control" type="text" name="leaving_time" id="leaving_time">
      <span class="input-group-addon">
       <i class="glyphicon glyphicon-time"></i>
    </span>
    </div>

I found out that if I added the same class (datepicker) on the input field the popup will appear when clicked on the field, which is what I want.

The problem however is that if I click on the field first and then the icon the date picker that popped up when clicked on the field does not disappear. Which means there ends up being two date pickers on the screen.

However if I click on the glphyicon first and then the field it works properly. As in, when the field is clicked the date picker on time disappears and the on field appears. How do I make it so that the same thing happens if the field is clicked first and then the icon.

    <div class="input-group datetime datepicker">
      <input class="form-control datepicked" type="text" name="leaving_time" id="leaving_time">
      <span class="input-group-addon">
       <i class="glyphicon glyphicon-time"></i>
    </span>
    </div> 

Here is the javascript codes that calls datetimepicker:

$(document).on('ready page:change', function() {

$('.datepicker').datetimepicker({
   format: 'MMM Do YYYY',
   pickTime: false,
   collapse: true     
});
});

Answers


You can simply focus the input when clicking on the input group addon span.

$('.datepicker').each(function(k, v) {
  var $input = $(v).find('.make-datepicker');
  $input.datetimepicker({
    format: 'MMM Do YYYY',
    collapse: true
  });
  $(v).find('span.input-group-addon').click(function(e) {
    $input.focus(); 
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/v4.0.0/src/js/bootstrap-datetimepicker.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/v4.0.0/build/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<br/>
<div class="input-group datetime datepicker">
  <input class="form-control make-datepicker" type="text" name="leaving_time" id="leaving_time">
  <span class="input-group-addon">
       <i class="glyphicon glyphicon-time"></i>
    </span>
</div>

Need Your Help

Rails: undefined local variable or method `user_params'

ruby-on-rails controllers

I'm going through https://www.railstutorial.org/ Chapter 7.

Logging sql error from inside shell script

linux oracle unix

i am trying to implement a error logging mechanism in shell script which will also give me errors inside a sql statement

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.