'Using more than one bootstrap-datepicker in one page

On my website i need to set 'from-date' and 'to-date'.For this I have 2 text boxes. I used 2 bootstrap date-pickers for the same.Date-pickers are actually working fine except that when i click the first text box and then the second text box both date-pickers will be shown. The problem I am facing is that i need to hide the first date-picker and show only the second date-picker when the second text box is clicked.

This is what i have tried..

   $(document).mouseup(function (e) {
         var container = $(".txtFromDate");

             if (!container.is(e.target) // if the target of the click isn't the container...
                      && container.has(e.target).length === 0) // ... nor a descendant of the container
                      {
                         $('.dropdown-menu').hide();
                       }
   });
jquerytwitter-bootstrap-3


Solution 1:[1]

Try like this

  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script>
      $(function() {
        $( "#txtFromDate" ).datepicker();
 $( "#txtToDate" ).datepicker();
      });
      </script>

    <input type="text" id="txtFromDate">
<input type="text" id="txtToDate">

Solution 2:[2]

if you use bootstrap datetimepicker like 

<div id="datetimepicker${YearID}" class="datepicker input-group controls">
      <input id="txtStartDate${YearID}" value="${formatDate(startDate)}" class="form-control" placeholder="Select datepicker" data-rule-required="true" data-format="yyyy-MM-dd" type="text" data-rule-required='true' />
      <span class="input-group-addon">
           <span class="icon-calendar" data-time-icon="icon-time" data-date-icon="icon-calendar"></span>
      </span>
</div>

then you need to call datetimepicker like this

$('div[id^="datetimepicker"]').datetimepicker();

in this way you can also use it in Jquery Templates binding.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dharman
Solution 2 dnxit

Related Questions