CODEWITHSUNDEEP
jquerycssjquery-uidatepickerbootstrap-modal
Raghul Rajendran
Raghul Rajendran

Reputation: 486

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") ?>

Upvotes: 1

Views: 874

Answers (2)

Vikash Pandey
Vikash Pandey

Reputation: 5443

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 :)

Upvotes: 1

Charantej Golla
Charantej Golla

Reputation: 598

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') ?>

Upvotes: 1

Related Questions