Multiple datetimePickers on 1 HTML page not working - javascript

I am trying to use multiple dateTime pickers on my HTML page to capture "start date" and "end date".
See my HTML below.
<Head>
<!-- LINKS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<!-- SCRIPTS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<script>
$(function() {
$('#datetimepicker1').datetimepicker();
});
</script>
<title>MyPage</title>
</head>
And here is the body
<body>
<div class='col-8'>
<h1 class="mt-2">Date Form</h1>
<hr class="mt-0 mb-4">
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
The first datetime picker works fine, but the on the second datetime picker the button to load the calendar doesn't work. Can someone suggest whats wrong with the code?


The issue is because you only instantiate the datetimepicker on the #datetimepicker1 element.
If you want to have the control on both of them, try using a class selector instead:
$(function() {
$('.input-group.date').datetimepicker();
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<div class='col-8'>
<h1 class="mt-2">Date Form</h1>
<hr class="mt-0 mb-4">
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>


You haven't initialize second datetime picker
<script>
$(function() {
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker(); // <<<<< add this line
});
</script>

Related

slideUp is not working on button

Hi experts i'm new to jquery & here when i click on 'change alternate email' link the box is sliding down but when click on save button actually it should slide Up but it didn't.
Here is my code.
HTML:
<div class="form-group alternate-email-box">
<div class="row margin-lft-right-0">
<div class="col-sm-10 pad-left-zero">
<input type="email" class="form-control" name="alternate-email">
</div>
<div class="col-sm-2">
<button type="button" class="btn pi-btn btn-radius">Save <span class="glyphicon glyphicon-menu-right right-arrow-head-icon alternate-email-btn"></span></button>
</div>
</div>
</div>
Jquery:
$('.alternate-email').click(function(){
$('.alternate-email-box').slideDown();
return false;
});
$('.alternate-email-btn').click(function(){
$('.alternate-email-box').hide();
return false;
});

I think you need to use
$('.alternate-email').click(function(){
$('.alternate-email-box').slideDown();
return false;
});
$('.alternate-email-btn').click(function(){
$('.alternate-email-box').slideUp();
return false;
});
jsfiddle: https://jsfiddle.net/pbvb7fm5/

mine is ok,are you sure you have run the code on more than 1 browser to see the result?maybe your css conflict with slideUp()
$('.alternate-email').click(function(){
$('.alternate-email-box').slideDown();
return false;
});
$('.alternate-email-btn').click(function(){
$('.alternate-email-box').slideUp();
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 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>
<div class="form-group alternate-email-box">
<div class="row margin-lft-right-0">
<div class="col-sm-10 pad-left-zero">
<input type="email" class="form-control" name="alternate-email">
</div>
<div class="col-sm-2">
<button type="button" class="btn pi-btn btn-radius">Save <span class="glyphicon glyphicon-menu-right right-arrow-head-icon alternate-email-btn"></span></button>
</div>
</div>
</div>

To solve this and to have better control over the elements you are searching for (like save btn) use an Id on the html elements. Something like below:
$('.alternate-email').click(function(){
$('.alternate-email-box').slideDown();
return false;
});
$('#btnSave').click(function(){
$('.alternate-email-box').slideUp();
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 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>
<div class="form-group alternate-email-box">
<div class="row margin-lft-right-0">
<div class="col-sm-10 pad-left-zero">
<input type="email" class="form-control" name="alternate-email">
</div>
<div class="col-sm-2">
<button type="button" class="btn pi-btn btn-radius" id="btnSave">Save <span class="glyphicon glyphicon-menu-right right-arrow-head-icon alternate-email-btn"></span></button>
</div>
</div>
</div>

Use Following Html code.
<div class="form-group alternate-email-box">
<div class="row margin-lft-right-0">
<div class="col-sm-10 pad-left-zero">
<input type="email" class="form-control" name="alternate-email">
</div>
<div class="col-sm-2">
<button type="button" class="btn pi-btn btn-radius alternate-email-btn">Save </button>
</div>
</div>
</div>
<span class="alternate-email">change alternate email</span>
Your span has no effect and use the button class (alternate-email-btn) inside buton tag
<span class="glyphicon glyphicon-menu-right right-arrow-head-icon alternate-email-btn"></span>
When You are hiding alternate-email-box class it only hides your section without any animation. Use slideUp and slideDown will give you the effect. You can also use slideToggle(). Like
$('.alternate-email-box').slideToggle();
Or use some id
$('#button').click(function() {
$('.alternate-email-box').slideUp();
return false;
});`

bootstrap-datepicker does not function at all

My datetimepicker is not working I don't know what exactly is the problem.
Please tell me if I have missed to include any css or script tags.
I am using http://eonasdan.github.io/bootstrap-datetimepicker/.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="/path/to/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker8').datetimepicker({
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down"
}
});
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 form-control-label">D.O.B</label>
<div class="col-sm-10">
<div class='input-group date' id='datetimepicker8'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="fa fa-calendar">
</span>
</span>
</div>
</div>
</div>

There were so many things wrong with your code. Incorrect css/js files, missing files, incorrect functions. Here's the working version with correct imports.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.2/css/tether.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.2/js/tether.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<div class="container">
DATE PICKER
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker1').datepicker();
});
</script>
</div>
</div>
Replace bootstrap 3.css and .js files with bootstrap 4.css and .js links. And include this above bootstrap.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.2/js/tether.min.js"></script>

Check this out. Some of your external cdn resources are out of date, also change $(...).datetimepicker to $(...).datepicker
$(document).ready(function () {
$('#datetimepicker8').datepicker({
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down"
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div class="form-group row">
<div class="col-sm-2">
<label for="inputPassword3" class="form-control-label">D.O.B</label>
</div>
<div class="col-sm-10">
<div class='input-group date' id='datetimepicker8'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<i class="fa fa-calendar" aria-hidden="true"></i>
</span>
</div>
</div>
</div>

Bootstrap-Datetimepicker: How to Remove Year Number From Month Picker

I want to remove year number from top title of month picker like the image given below:
I did tried with viewMode: 'months' but didn't work.How Can I do this.please help
Here is the Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Review Sample Month Only</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker').datetimepicker({
format: 'MM',
viewMode: 'months'
});
});
</script>
</head>
<body >
<div class="container" >
<div class="panel-group">
<div class="panel panel-primary" >
<div class="panel-heading" >
<h3 class="panel-title" style="text-align: center;">Review Sample Month Only</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" >
<div class="form-group">
<label class="control-label col-sm-2" for="datetimepicker" >Month:</label>
<div class="col-sm-2">
<div class='input-group date'>
<input type='text' class="form-control" id='datetimepicker' name= "datetimepicker" placeholder="MM"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" id="button1" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>

I had this same issue and instead went with the Bootstrap Datepicker instead of date time picker. I was able to remove the year selection by setting the minViewMode and maxViewMode to "months".
https://bootstrap-datepicker.readthedocs.io/en/latest/
Modified Example using datepicker:
$(function () {
$('#datepicker').datepicker({
format: 'MM',
minViewMode: 'months',
maxViewMode: 'months',
startView: 'months'
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Review Sample Month Only</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datepicker').datepicker({
format: 'MM',
minViewMode: 'months',
maxViewMode: 'months',
startView: 'months'
});
});
</script>
</head>
<body >
<div class="container" >
<div class="panel-group">
<div class="panel panel-primary" >
<div class="panel-heading" >
<h3 class="panel-title" style="text-align: center;">Review Sample Month Only</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" >
<div class="form-group">
<label class="control-label col-sm-2" for="datetimepicker" >Month:</label>
<div class="col-sm-2">
<div class='input-group date'>
<input type='text' class="form-control" id='datepicker' name= "datepicker" placeholder="MM"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" id="button1" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>

Well, Try this:-
.picker-switch{
display: none !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Review Sample Month Only</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker').datetimepicker({
format: 'MM',
viewMode: 'months'
});
});
</script>
</head>
<body >
<div class="container" >
<div class="panel-group">
<div class="panel panel-primary" >
<div class="panel-heading" >
<h3 class="panel-title" style="text-align: center;">Review Sample Month Only</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" >
<div class="form-group">
<label class="control-label col-sm-2" for="datetimepicker" >Month:</label>
<div class="col-sm-2">
<div class='input-group date'>
<input type='text' class="form-control" id='datetimepicker' name= "datetimepicker" placeholder="MM"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" id="button1" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>

I had the same issue just use maxViewMode: 0,
$('#sandbox-container .input-daterange').datepicker({
maxViewMode: 0,
todayBtn: true,
calendarWeeks: true,
autoclose: true,
todayHighlight: true
});

Try this.
.switch{ visibility: hidden !important; }

eonasdan datetimepicker not working

I am using the eonasdan datetimepicker. This is the code
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
</div>
And its corresponding javascript code is
<script type="text/javascript">
(function () {
$('#datetimepicker').datetimepicker({
format: 'LT'
});
});
</script>
And these are the header files
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>
<script src="./angular/angular.min.js"></script>
<script src="//code.angularjs.org/1.2.28/angular-sanitize.min.js"></script>
But I am always getting this error in my console
Uncaught TypeError: $(...).datetimepicker is not a function

Cannot get bootstrap datepicker to work

I've been trying to get the Datepicker for Bootstrap to work but have been unsuccessful. The datapicker box never shows:
<head>
<title>Pick-a-Date</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/datepicker.css">
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/bootstrap-datepicker.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Select date</h3>
</div>
<div class="panel-body">
<div class="input-append date" id="datepick" data-date="<?=date('m-d-Y', strtotime('-25 hours')) ?>" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="<?=date('m-d-Y', strtotime('-25 hours')) ?>">
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datepick').datepicker({
format: "yyyy/mm/dd",
autoclose: true,
todayHighlight: true
});
});
</script>
</body>
Here is the fiddle:
http://jsfiddle.net/eComEvo/7svU3/2/
Any idea what is wrong?

If you change the reference to bootstrap datepicker to something that resolves, e.g. //cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js, it works.
http://jsfiddle.net/eComEvo/7svU3/2/
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Select date</h3>
</div>
<div class="panel-body">
<div class="input-append date" id="datepick" data-date="22-05-2014" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="22-05-2014">
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
</div>
</div>
</div>
$(function() {
$('#datepick').datepicker({
format: "yyyy/mm/dd",
autoclose: true,
todayHighlight: true
});
});

Categories