Show jquery datepicker on dynamically generated input

Question

I have an HTML page that uses Bootstrap3-dialog from github :

The page has a button, when you click on it a form with an input is displayed, I would like to add a datepicker to that input however it is generated dynamically and the click on the input does not show the datepicker.

From the code below you can see the the "console.log()" message is displayed when the input has focus so the datepicker should show normaly.

Can you help me figure out what is wrong with my code?

Thanks.

	$(function() {
	  $("body").on("focus", "#date", function() {
	    console.log("Supposed to show the datepicker"); //This is working so the datepicker should work too.
	    $('#date').datepicker();
	    $('#date').datepicker('show');
	  });
	  $("body").on("click", "#modal", function() {
	    BootstrapDialog.show({
	      message: '<div class="input-group"><span class="input-group-addon"><strong>Schedule date</strong></span><input value="" type="text" id="date" class="form-control">',
	      buttons: [{
	        icon: 'glyphicon glyphicon-send',
	        label: 'Save changes',
	        cssClass: 'btn-primary',
	        autospin: true,
	        action: function(dialogRef) {
	          dialogRef.enableButtons(false);
	          dialogRef.setClosable(false);
	          dialogRef.getModalBody().html('Dialog closes in 5 seconds.');
	          setTimeout(function() {
	            dialogRef.close();
	          }, 5000);
	        }
	      }, {
	        label: 'Close',
	        action: function(dialogRef) {
	          dialogRef.close();
	        }
	      }]
	    });
	  });
	});

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/nakupanda/bootstrap3-dialog/master/src/css/bootstrap-dialog.css">
<script type="text/javascript" charset="utf8" src="https://cdn.rawgit.com/nakupanda/bootstrap3-dialog/master/src/js/bootstrap-dialog.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script>
</script>

<body>
  <button type="button" id="modal" class="btn btn-primary">Show Modal</button>
</body>

halfzebra · Accepted Answer · 2015-07-18 12:55:06Z

1

The datepicker is hidden behing the overlay of modal. You need to set a higher z-index for it to appear.

.ui-datepicker {
  z-index: 2000; 
}

answered Jul 18, 2015 at 12:55

halfzebra

6,8154 gold badges34 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

oussama kamal Over a year ago

That is right, good catch however why 2000 as value of the z-index? and is using 2000 will work on all browsers?

oussama kamal Over a year ago

Also the console log message dispays twice on the input focus

halfzebra Over a year ago

@oussamakamal the modal overlay has z-index: 1050;, you might try using a lower value. The focus event is firing twice, but I'm not sure why exactly.

kjdion84 · Accepted Answer · 2017-03-22 15:04:01Z

1

Initialize the datepicker when any modal is shown dynamically:

$(document).on('shown.bs.modal', function() {
    $('.datetimepicker').datetimepicker();
});

answered Mar 22, 2017 at 15:04

kjdion84

10.1k8 gold badges64 silver badges91 bronze badges

Comments

vimes1984 · Accepted Answer · 2015-07-18 12:53:55Z

0

have you tired this:

  $("#date").on("click", function(){
        console.log("Supposed to show the datepicker");//This is working so the datepicker should work too.
        $('#date').datepicker();
        $('#date').datepicker('show');
    });

answered Jul 18, 2015 at 12:53

vimes1984

1,6933 gold badges27 silver badges59 bronze badges

Collectives™ on Stack Overflow

Show jquery datepicker on dynamically generated input

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related