Datepicker is not working while replacing bootstrap datepicker with js datepicker

问题

When i used jquery UI, the datepicker was worked. But while replacing with bootstarp datepicker it's not working. The datepicker is opened but the select process are not working. and i'm using bootstrap theme too. I'm new to design, please guide me if i want to add any files.

jquery file

 $(function(){
    $('.showDateContainer').click(function(){
        $('.showDateItem').datepicker({
           onSelect: function(dateText) {
        } 
    });
 });

this is the file which i added

<?= $this->Html->script("bootstrap-3.3.7-dist/bootstrap.min.js") ?> 
<?= $this->Html->css('bootstrap-3.3.7-dist/bootstrap.min.css') ?>

<?= $this->Html->script("bootstrap-datepicker-1.6.4-dist/bootstrap-datepicker.min.js") ?> 
<?= $this->Html->css('bootstrap-datepicker-1.6.4-dist/bootstrap-datepicker.min.css') ?>
<?= $this->Html->script("jQuery/jQuery-2.1.4.min.js") ?>

回答1:

Change the order of the js files. jQuery-2.1.4.min.js should be top of the remaining js files

<?= $this->Html->script("jQuery/jQuery-2.1.4.min.js") ?>
<?= $this->Html->script("bootstrap-3.3.7-dist/bootstrap.min.js") ?> 
<?= $this->Html->script("bootstrap-datepicker-1.6.4-dist/bootstrap-datepicker.min.js") ?> 

<?= $this->Html->css('bootstrap-3.3.7-dist/bootstrap.min.css') ?>
<?= $this->Html->css('bootstrap-datepicker-1.6.4-dist/bootstrap-datepicker.min.css') ?>

回答2:

Well, While creating a sample with bootstrap datepicker i noticed the sequence of libraries also matters.

However Below is the working code for jquery bootstrap datepicker -

	$('#startDate').datetimepicker();
	$("#startDate").on("dp.change",function (e) {
       console.log("Date Changed - " + e.date.toDate());
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script> 

<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js"></script>

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" rel="stylesheet"/>

<div class="container">
	<div class="col-sm-6" style="height:75px;">
	   <div class='col-md-5'>
			<div class="form-group">
				<div class='input-group date' id='startDate'>
					<input type='text' class="form-control" name="startDate" />
					<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
					</span>
				</div>
			</div>
		</div>
		</div>
	</div>

JS Fiddle- http://jsfiddle.net/vikash2402/RR4hw/1660/

Hoping this will help you :)

来源：https://stackoverflow.com/questions/40265208/datepicker-is-not-working-while-replacing-bootstrap-datepicker-with-js-datepicke

标签

jquery

css

jquery-ui

datepicker

bootstrap-modal