1

enter image description here

Hey,

I am opening a modal on click the input field and i want the date-picker as an already open Calendar with an hidden input field. I have already tried autofocus on hidden input and trigger click event on input field but it is not going as per my expectations.

Please help me and give my some suggestions to resolve it.

Thanks in advance.

Avtar Singh
  • 11
  • 3
  • use the pickadate's open function picker.open(); when the modal opens – Bryan Dellinger Feb 01 '20 at 16:25
  • @BryanDellinger My jsp's code is '' and javascript code is function openDatePickerModal() { $('.picker-modal').openModal(); }' and pickadate code is- $('#deliveryDatePicker' .pickadate({ formatSubmit: 'dd/mm/yyyy', }) modal code is -
    how can i use pickadate's open function     – Avtar Singh Feb 03 '20 at 05:24

1 Answers1

0

after the modal opens call its event. inside that event call picker.open().

run the snippet below for an example

var $input = $('.datepicker').pickadate();
var picker = $input.pickadate('picker');

$(window).on('shown.bs.modal', function() {
  picker.open();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">



<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.js"></script>
<script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.date.js"></script>
<script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.time.js"></script>

<link rel="stylesheet" href="https://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.css">


<button type="button" id="buttonmodal" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="modal-body">
        <input type="text" class="datepicker" />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
Bryan Dellinger
  • 4,724
  • 7
  • 33
  • 79