Mixing
Bootstrap datetimepicker / date picker not displaying calendar. Cannot pick a date
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
I'm trying to get bootstrap datetimepicker to work in conjunction with Datatables so that it filters the datatable when a date is picked. Problem is, it just shows up as an input bar on my page, there is no calendar or calendar symbol. It sounds like a CDN/library reference issue but I've double checked and seem to have them all loaded:
. Jquery
. moment.js
. Bootstrap
. bootstrap-datetimepicker.min.js
. bootstrap-datetimepicker.min.css
I've made sure Moment is loaded before bootstrap and jquery. I believe that is all the references I need?Any help would be much appreciated. Thanks
<div class="container">
<div class='col-md-4'>
<div class="form-group">
<div class='input-group date' id='from'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-4'>
<div class="form-group">
<div class='input-group date' id='to'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#from').datetimepicker({
format: 'DD MMMM YYYY',
extraFormats: ['DD MM YYYY', 'DD.MM.YYYY',
'DD/MM/YYYY', 'DD MMM YYYY', 'DD.MMM.YYYY', 'DD/MMM/YYYY', 'DD MMMM YYYY',
'DD.MMMM.YYYY', 'DD/MMMM/YYYY']
}).on('dp.change', function (e) {
UpdateDataCount();
});
$('#to').datetimepicker({
format: 'DD MMMM YYYY',
extraFormats: ['DD MM YYYY', 'DD.MM.YYYY',
'DD/MM/YYYY', 'DD MMM YYYY', 'DD.MMM.YYYY', 'DD/MMM/YYYY', 'DD MMMM YYYY',
'DD.MMMM.YYYY', 'DD/MMMM/YYYY']
}).on('dp.change', function (e) {
UpdateDataCount();
});
});
UpdateDataCount: function () {
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var from = $('#from').datetimepicker("getDate");
var to = $('#to').datetimepicker("getDate");
//data being searched
var startDate = new Date(data[2]);
//if true show row/ if not, don't
if (from == null && to == null) { return true; }
if (from == null && startDate <= to) { return true; }
if (to == null && startDate >= from) { return true; }
if (startDate <= to && startDate >= from) { return true; }
return false;
}
);
}
</script>
javascript html datatables bootstrap-datetimepicker
asked Jan 3 at 16:09
Joe Joe JoeJoe Joe Joe
408
add a comment |
0
I'm trying to get bootstrap datetimepicker to work in conjunction with Datatables so that it filters the datatable when a date is picked. Problem is, it just shows up as an input bar on my page, there is no calendar or calendar symbol. It sounds like a CDN/library reference issue but I've double checked and seem to have them all loaded:
. Jquery
. moment.js
. Bootstrap
. bootstrap-datetimepicker.min.js
. bootstrap-datetimepicker.min.css
I've made sure Moment is loaded before bootstrap and jquery. I believe that is all the references I need?Any help would be much appreciated. Thanks
<div class="container">
<div class='col-md-4'>
<div class="form-group">
<div class='input-group date' id='from'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-4'>
<div class="form-group">
<div class='input-group date' id='to'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#from').datetimepicker({
format: 'DD MMMM YYYY',
extraFormats: ['DD MM YYYY', 'DD.MM.YYYY',
'DD/MM/YYYY', 'DD MMM YYYY', 'DD.MMM.YYYY', 'DD/MMM/YYYY', 'DD MMMM YYYY',
'DD.MMMM.YYYY', 'DD/MMMM/YYYY']
}).on('dp.change', function (e) {
UpdateDataCount();
});
$('#to').datetimepicker({
format: 'DD MMMM YYYY',
extraFormats: ['DD MM YYYY', 'DD.MM.YYYY',
'DD/MM/YYYY', 'DD MMM YYYY', 'DD.MMM.YYYY', 'DD/MMM/YYYY', 'DD MMMM YYYY',
'DD.MMMM.YYYY', 'DD/MMMM/YYYY']
}).on('dp.change', function (e) {
UpdateDataCount();
});
});
UpdateDataCount: function () {
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var from = $('#from').datetimepicker("getDate");
var to = $('#to').datetimepicker("getDate");
//data being searched
var startDate = new Date(data[2]);
//if true show row/ if not, don't
if (from == null && to == null) { return true; }
if (from == null && startDate <= to) { return true; }
if (to == null && startDate >= from) { return true; }
if (startDate <= to && startDate >= from) { return true; }
return false;
}
);
}
</script>
javascript html datatables bootstrap-datetimepicker
asked Jan 3 at 16:09
Joe Joe JoeJoe Joe Joe
408
add a comment |
0
0
0
I'm trying to get bootstrap datetimepicker to work in conjunction with Datatables so that it filters the datatable when a date is picked. Problem is, it just shows up as an input bar on my page, there is no calendar or calendar symbol. It sounds like a CDN/library reference issue but I've double checked and seem to have them all loaded:
. Jquery
. moment.js
. Bootstrap
. bootstrap-datetimepicker.min.js
. bootstrap-datetimepicker.min.css
I've made sure Moment is loaded before bootstrap and jquery. I believe that is all the references I need?Any help would be much appreciated. Thanks
<div class="container">
<div class='col-md-4'>
<div class="form-group">
<div class='input-group date' id='from'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-4'>
<div class="form-group">
<div class='input-group date' id='to'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#from').datetimepicker({
format: 'DD MMMM YYYY',
extraFormats: ['DD MM YYYY', 'DD.MM.YYYY',
'DD/MM/YYYY', 'DD MMM YYYY', 'DD.MMM.YYYY', 'DD/MMM/YYYY', 'DD MMMM YYYY',
'DD.MMMM.YYYY', 'DD/MMMM/YYYY']
}).on('dp.change', function (e) {
UpdateDataCount();
});
$('#to').datetimepicker({
format: 'DD MMMM YYYY',
extraFormats: ['DD MM YYYY', 'DD.MM.YYYY',
'DD/MM/YYYY', 'DD MMM YYYY', 'DD.MMM.YYYY', 'DD/MMM/YYYY', 'DD MMMM YYYY',
'DD.MMMM.YYYY', 'DD/MMMM/YYYY']
}).on('dp.change', function (e) {
UpdateDataCount();
});
});
UpdateDataCount: function () {
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var from = $('#from').datetimepicker("getDate");
var to = $('#to').datetimepicker("getDate");
//data being searched
var startDate = new Date(data[2]);
//if true show row/ if not, don't
if (from == null && to == null) { return true; }
if (from == null && startDate <= to) { return true; }
if (to == null && startDate >= from) { return true; }
if (startDate <= to && startDate >= from) { return true; }
return false;
}
);
}
</script>
javascript html datatables bootstrap-datetimepicker
asked Jan 3 at 16:09
Joe Joe JoeJoe Joe Joe
408
I'm trying to get bootstrap datetimepicker to work in conjunction with Datatables so that it filters the datatable when a date is picked. Problem is, it just shows up as an input bar on my page, there is no calendar or calendar symbol. It sounds like a CDN/library reference issue but I've double checked and seem to have them all loaded:
. Jquery
. moment.js
. Bootstrap
. bootstrap-datetimepicker.min.js
. bootstrap-datetimepicker.min.css
I've made sure Moment is loaded before bootstrap and jquery. I believe that is all the references I need?Any help would be much appreciated. Thanks
<div class="container">
<div class='col-md-4'>
<div class="form-group">
<div class='input-group date' id='from'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-4'>
<div class="form-group">
<div class='input-group date' id='to'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#from').datetimepicker({
format: 'DD MMMM YYYY',
extraFormats: ['DD MM YYYY', 'DD.MM.YYYY',
'DD/MM/YYYY', 'DD MMM YYYY', 'DD.MMM.YYYY', 'DD/MMM/YYYY', 'DD MMMM YYYY',
'DD.MMMM.YYYY', 'DD/MMMM/YYYY']
}).on('dp.change', function (e) {
UpdateDataCount();
});
$('#to').datetimepicker({
format: 'DD MMMM YYYY',
extraFormats: ['DD MM YYYY', 'DD.MM.YYYY',
'DD/MM/YYYY', 'DD MMM YYYY', 'DD.MMM.YYYY', 'DD/MMM/YYYY', 'DD MMMM YYYY',
'DD.MMMM.YYYY', 'DD/MMMM/YYYY']
}).on('dp.change', function (e) {
UpdateDataCount();
});
});
UpdateDataCount: function () {
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var from = $('#from').datetimepicker("getDate");
var to = $('#to').datetimepicker("getDate");
//data being searched
var startDate = new Date(data[2]);
//if true show row/ if not, don't
if (from == null && to == null) { return true; }
if (from == null && startDate <= to) { return true; }
if (to == null && startDate >= from) { return true; }
if (startDate <= to && startDate >= from) { return true; }
return false;
}
);
}
</script>
javascript html datatables bootstrap-datetimepicker
javascript html datatables bootstrap-datetimepicker
asked Jan 3 at 16:09
Joe Joe JoeJoe Joe Joe
408
asked Jan 3 at 16:09
Joe Joe JoeJoe Joe Joe
408
edited Jan 3 at 16:15
Joe Joe Joe
asked Jan 3 at 16:09
Joe Joe JoeJoe Joe Joe
408
asked Jan 3 at 16:09
Joe Joe JoeJoe Joe Joe
408
asked Jan 3 at 16:09
Joe Joe JoeJoe Joe Joe
408
408
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
0
I'd be interested to see what your console is doing but I don't think you want to be repeatedly pushing a function, rather invoking it on change...
I got it working and there were issues with comparing moment Dates with vanilla Dates:
var table = $('#example').DataTable();
var from = null;
var to = null;
$('#from').datetimepicker({
format: 'DD MMMM YYYY',
extraFormats: ['DD MM YYYY', 'DD.MM.YYYY',
'DD/MM/YYYY', 'DD MMM YYYY', 'DD.MMM.YYYY', 'DD/MMM/YYYY', 'DD MMMM YYYY',
'DD.MMMM.YYYY', 'DD/MMMM/YYYY'
]
}).on('dp.change', function(e) {
from = e.date;
table.draw();
});
$('#to').datetimepicker({
format: 'DD MMMM YYYY',
extraFormats: ['DD MM YYYY', 'DD.MM.YYYY',
'DD/MM/YYYY', 'DD MMM YYYY', 'DD.MMM.YYYY', 'DD/MMM/YYYY', 'DD MMMM YYYY',
'DD.MMMM.YYYY', 'DD/MMMM/YYYY'
]
}).on('dp.change', function(e) {
to = e.date;
table.draw();
});
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
//data being searched
var startDate = moment(data[2], "DD/MM/YYYY");
if (!from && !to) {
return true;
}
if (!from && startDate.isSameOrBefore(to, "day")) {
return true;
}
if (!to && startDate.isSameOrAfter(from, "day")) {
return true;
}
if (startDate.isSameOrBefore(to, "day") && startDate.isSameOrAfter(from, "day")) {
return true;
}
return false;
}
);
Working JSFiddle here.
Hope that helps.
answered Jan 3 at 17:34
annoyingmouseannoyingmouse
4,07611637
Thank you so much. I still have the same problem, but you solved an issue I would have encountered at some point or another anyway. The little calendar icon isn't showing up so I can't select a date. It's just a blank box.
– Joe Joe Joe
Jan 4 at 9:59
Figured out what my issue is. I am using bootstrap 4, whereas datetimepicker uses bootstrap 3. Newb mistake, but you live and learn!
– Joe Joe Joe
Jan 4 at 11:06
add a comment |
0
To answer my own question, datetimepicker is not compatible with bootstrap 4
answered Jan 4 at 16:09
Joe Joe JoeJoe Joe Joe
408
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54025939%2fbootstrap-datetimepicker-date-picker-not-displaying-calendar-cannot-pick-a-da%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
I'd be interested to see what your console is doing but I don't think you want to be repeatedly pushing a function, rather invoking it on change...
I got it working and there were issues with comparing moment Dates with vanilla Dates:
var table = $('#example').DataTable();
var from = null;
var to = null;
$('#from').datetimepicker({
format: 'DD MMMM YYYY',
extraFormats: ['DD MM YYYY', 'DD.MM.YYYY',
'DD/MM/YYYY', 'DD MMM YYYY', 'DD.MMM.YYYY', 'DD/MMM/YYYY', 'DD MMMM YYYY',
'DD.MMMM.YYYY', 'DD/MMMM/YYYY'
]
}).on('dp.change', function(e) {
from = e.date;
table.draw();
});
$('#to').datetimepicker({
format: 'DD MMMM YYYY',
extraFormats: ['DD MM YYYY', 'DD.MM.YYYY',
'DD/MM/YYYY', 'DD MMM YYYY', 'DD.MMM.YYYY', 'DD/MMM/YYYY', 'DD MMMM YYYY',
'DD.MMMM.YYYY', 'DD/MMMM/YYYY'
]
}).on('dp.change', function(e) {
to = e.date;
table.draw();
});
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
//data being searched
var startDate = moment(data[2], "DD/MM/YYYY");
if (!from && !to) {
return true;
}
if (!from && startDate.isSameOrBefore(to, "day")) {
return true;
}
if (!to && startDate.isSameOrAfter(from, "day")) {
return true;
}
if (startDate.isSameOrBefore(to, "day") && startDate.isSameOrAfter(from, "day")) {
return true;
}
return false;
}
);
Working JSFiddle here.
Hope that helps.
answered Jan 3 at 17:34
annoyingmouseannoyingmouse
4,07611637
Thank you so much. I still have the same problem, but you solved an issue I would have encountered at some point or another anyway. The little calendar icon isn't showing up so I can't select a date. It's just a blank box.
– Joe Joe Joe
Jan 4 at 9:59
Figured out what my issue is. I am using bootstrap 4, whereas datetimepicker uses bootstrap 3. Newb mistake, but you live and learn!
– Joe Joe Joe
Jan 4 at 11:06
add a comment |
0
I'd be interested to see what your console is doing but I don't think you want to be repeatedly pushing a function, rather invoking it on change...
I got it working and there were issues with comparing moment Dates with vanilla Dates:
var table = $('#example').DataTable();
var from = null;
var to = null;
$('#from').datetimepicker({
format: 'DD MMMM YYYY',
extraFormats: ['DD MM YYYY', 'DD.MM.YYYY',
'DD/MM/YYYY', 'DD MMM YYYY', 'DD.MMM.YYYY', 'DD/MMM/YYYY', 'DD MMMM YYYY',
'DD.MMMM.YYYY', 'DD/MMMM/YYYY'
]
}).on('dp.change', function(e) {
from = e.date;
table.draw();
});
$('#to').datetimepicker({
format: 'DD MMMM YYYY',
extraFormats: ['DD MM YYYY', 'DD.MM.YYYY',
'DD/MM/YYYY', 'DD MMM YYYY', 'DD.MMM.YYYY', 'DD/MMM/YYYY', 'DD MMMM YYYY',
'DD.MMMM.YYYY', 'DD/MMMM/YYYY'
]
}).on('dp.change', function(e) {
to = e.date;
table.draw();
});
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
//data being searched
var startDate = moment(data[2], "DD/MM/YYYY");
if (!from && !to) {
return true;
}
if (!from && startDate.isSameOrBefore(to, "day")) {
return true;
}
if (!to && startDate.isSameOrAfter(from, "day")) {
return true;
}
if (startDate.isSameOrBefore(to, "day") && startDate.isSameOrAfter(from, "day")) {
return true;
}
return false;
}
);
Working JSFiddle here.
Hope that helps.
answered Jan 3 at 17:34
annoyingmouseannoyingmouse
4,07611637
Thank you so much. I still have the same problem, but you solved an issue I would have encountered at some point or another anyway. The little calendar icon isn't showing up so I can't select a date. It's just a blank box.
– Joe Joe Joe
Jan 4 at 9:59
Figured out what my issue is. I am using bootstrap 4, whereas datetimepicker uses bootstrap 3. Newb mistake, but you live and learn!
– Joe Joe Joe
Jan 4 at 11:06
add a comment |
0
0
0
I'd be interested to see what your console is doing but I don't think you want to be repeatedly pushing a function, rather invoking it on change...
I got it working and there were issues with comparing moment Dates with vanilla Dates:
var table = $('#example').DataTable();
var from = null;
var to = null;
$('#from').datetimepicker({
format: 'DD MMMM YYYY',
extraFormats: ['DD MM YYYY', 'DD.MM.YYYY',
'DD/MM/YYYY', 'DD MMM YYYY', 'DD.MMM.YYYY', 'DD/MMM/YYYY', 'DD MMMM YYYY',
'DD.MMMM.YYYY', 'DD/MMMM/YYYY'
]
}).on('dp.change', function(e) {
from = e.date;
table.draw();
});
$('#to').datetimepicker({
format: 'DD MMMM YYYY',
extraFormats: ['DD MM YYYY', 'DD.MM.YYYY',
'DD/MM/YYYY', 'DD MMM YYYY', 'DD.MMM.YYYY', 'DD/MMM/YYYY', 'DD MMMM YYYY',
'DD.MMMM.YYYY', 'DD/MMMM/YYYY'
]
}).on('dp.change', function(e) {
to = e.date;
table.draw();
});
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
//data being searched
var startDate = moment(data[2], "DD/MM/YYYY");
if (!from && !to) {
return true;
}
if (!from && startDate.isSameOrBefore(to, "day")) {
return true;
}
if (!to && startDate.isSameOrAfter(from, "day")) {
return true;
}
if (startDate.isSameOrBefore(to, "day") && startDate.isSameOrAfter(from, "day")) {
return true;
}
return false;
}
);
Working JSFiddle here.
Hope that helps.
answered Jan 3 at 17:34
annoyingmouseannoyingmouse
4,07611637
I'd be interested to see what your console is doing but I don't think you want to be repeatedly pushing a function, rather invoking it on change...
I got it working and there were issues with comparing moment Dates with vanilla Dates:
var table = $('#example').DataTable();
var from = null;
var to = null;
$('#from').datetimepicker({
format: 'DD MMMM YYYY',
extraFormats: ['DD MM YYYY', 'DD.MM.YYYY',
'DD/MM/YYYY', 'DD MMM YYYY', 'DD.MMM.YYYY', 'DD/MMM/YYYY', 'DD MMMM YYYY',
'DD.MMMM.YYYY', 'DD/MMMM/YYYY'
]
}).on('dp.change', function(e) {
from = e.date;
table.draw();
});
$('#to').datetimepicker({
format: 'DD MMMM YYYY',
extraFormats: ['DD MM YYYY', 'DD.MM.YYYY',
'DD/MM/YYYY', 'DD MMM YYYY', 'DD.MMM.YYYY', 'DD/MMM/YYYY', 'DD MMMM YYYY',
'DD.MMMM.YYYY', 'DD/MMMM/YYYY'
]
}).on('dp.change', function(e) {
to = e.date;
table.draw();
});
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
//data being searched
var startDate = moment(data[2], "DD/MM/YYYY");
if (!from && !to) {
return true;
}
if (!from && startDate.isSameOrBefore(to, "day")) {
return true;
}
if (!to && startDate.isSameOrAfter(from, "day")) {
return true;
}
if (startDate.isSameOrBefore(to, "day") && startDate.isSameOrAfter(from, "day")) {
return true;
}
return false;
}
);
Working JSFiddle here.
Hope that helps.
answered Jan 3 at 17:34
annoyingmouseannoyingmouse
4,07611637
answered Jan 3 at 17:34
annoyingmouseannoyingmouse
4,07611637
answered Jan 3 at 17:34
annoyingmouseannoyingmouse
4,07611637
answered Jan 3 at 17:34
annoyingmouseannoyingmouse
4,07611637
4,07611637
Thank you so much. I still have the same problem, but you solved an issue I would have encountered at some point or another anyway. The little calendar icon isn't showing up so I can't select a date. It's just a blank box.
– Joe Joe Joe
Jan 4 at 9:59
Figured out what my issue is. I am using bootstrap 4, whereas datetimepicker uses bootstrap 3. Newb mistake, but you live and learn!
– Joe Joe Joe
Jan 4 at 11:06
add a comment |
Thank you so much. I still have the same problem, but you solved an issue I would have encountered at some point or another anyway. The little calendar icon isn't showing up so I can't select a date. It's just a blank box.
– Joe Joe Joe
Jan 4 at 9:59
Figured out what my issue is. I am using bootstrap 4, whereas datetimepicker uses bootstrap 3. Newb mistake, but you live and learn!
– Joe Joe Joe
Jan 4 at 11:06
Thank you so much. I still have the same problem, but you solved an issue I would have encountered at some point or another anyway. The little calendar icon isn't showing up so I can't select a date. It's just a blank box.
– Joe Joe Joe
Jan 4 at 9:59
Thank you so much. I still have the same problem, but you solved an issue I would have encountered at some point or another anyway. The little calendar icon isn't showing up so I can't select a date. It's just a blank box.
– Joe Joe Joe
Jan 4 at 9:59
Figured out what my issue is. I am using bootstrap 4, whereas datetimepicker uses bootstrap 3. Newb mistake, but you live and learn!
– Joe Joe Joe
Jan 4 at 11:06
Figured out what my issue is. I am using bootstrap 4, whereas datetimepicker uses bootstrap 3. Newb mistake, but you live and learn!
– Joe Joe Joe
Jan 4 at 11:06
add a comment |
0
To answer my own question, datetimepicker is not compatible with bootstrap 4
answered Jan 4 at 16:09
Joe Joe JoeJoe Joe Joe
408
add a comment |
0
To answer my own question, datetimepicker is not compatible with bootstrap 4
answered Jan 4 at 16:09
Joe Joe JoeJoe Joe Joe
408
add a comment |
0
0
0
To answer my own question, datetimepicker is not compatible with bootstrap 4
answered Jan 4 at 16:09
Joe Joe JoeJoe Joe Joe
408
To answer my own question, datetimepicker is not compatible with bootstrap 4
answered Jan 4 at 16:09
Joe Joe JoeJoe Joe Joe
408
answered Jan 4 at 16:09
Joe Joe JoeJoe Joe Joe
408
answered Jan 4 at 16:09
Joe Joe JoeJoe Joe Joe
408
answered Jan 4 at 16:09
Joe Joe JoeJoe Joe Joe
408
408
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54025939%2fbootstrap-datetimepicker-date-picker-not-displaying-calendar-cannot-pick-a-da%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
