Friday, February 23, 2024
 Popular · Latest · Hot · Upcoming
69
rated 0 times [  70] [ 1]  / answers: 1 / hits: 29240  / 8 Years ago, tue, may 31, 2016, 12:00:00

I tried to use Bootstrap date-picker (https://github.com/eternicode/bootstrap-datepicker), but i can't get it to work.



On jsfiddle everything works like a charm: http://jsfiddle.net/hwuktpt2/



After some failed tests on the actual page, I even tried a blank new page and integrated everything from scratch again. jQuery works, Bootstrap styling works, Datatables works, but I just can't get date-picker to work.



Any suggestions?



<!DOCTYPE html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=X-UA-Compatible content=IE=edge />
<link rel=stylesheet type=text/css href=https://cdn.datatables.net/u/bs-3.3.6/jq-2.2.3,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.12,b-1.2.0,b-colvis-1.2.0,b-html5-1.2.0,b-print-1.2.0,fh-3.1.2,se-1.2.0/datatables.min.css/>
<link rel=stylesheet type=text/css href=https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.min.css/>
<script type=text/javascript src=https://cdn.datatables.net/u/bs-3.3.6/jq-2.2.3,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.12,b-1.2.0,b-colvis-1.2.0,b-html5-1.2.0,b-print-1.2.0,fh-3.1.2,se-1.2.0/datatables.min.js></script>
<script type=text/javascript src=https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js></script>
<script type=text/javascript src=https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/locales/bootstrap-datepicker.de.min.js></script>
<script type=text/javascript>
$('.date_picker input').datepicker({
format: dd.mm.yyyy,
todayBtn: linked,
language: de
});
</script>
<style type=text/css>
.control-label {
padding-top:7px;
}
</style>
</head>
<body>
<div class=container>
<div class=page-header>
Neues Mobile Device anlegen
</div>
</div>
<div class=container>
<form class=form-horizontal name=mobdev_neu action=mobdev_neu.php method=post>
<div class=form-group>
<label for=mobdev_neu_type class=col-xs-2 control-label>Type</label>
<div class=col-xs-10>
<select id=mobdev_neu_type class=form-control name=mobdev_neu_type REQUIRED>
<option value=>-- Bitte auswählen --</option>
</select>
</div>
</div>
<div class=form-group>
<label for=mobdev_neu_imei class=col-xs-2 control-label>IMEI</label>
<div class=col-xs-10>
<input type=text id=mobdev_neu_imei class=form-control name=mobdev_neu_imei placeholder=Pflichtfeld REQUIRED>
</div>
</div>
<div class=form-group>
<label for=mobdev_neu_kaufdatum class=col-xs-2 control-label>Kaufdatum</label>
<div class=col-xs-10 date_picker>
<input type=text id=mobdev_neu_kaufdatum class=form-control name=mobdev_neu_kaufdatum placeholder=Pflichtfeld>
</div>
</div>
</form>
</div>
</body>



More From » jquery

 Answers
114

Wrap the date picker initialize call in a document.ready. This code is running before the dom is finished loading from the look of it. Since JavaScript is interpreted it is run at the time it is read by the browser. Because you're defining the code in the head the body and its contents haven't been loaded yet; so the selector finds no elements to initialize datepicker. If you don't want to use document.ready functionality you could also move the script to the end of the body tag.



    $(function(){
$('.date_picker input').datepicker({
format: dd.mm.yyyy,
todayBtn: linked,
language: de
});
});

[#61948] Sunday, May 29, 2016, 8 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
maxinec

Total Points: 117
Total Questions: 116
Total Answers: 116

Location: Bangladesh
Member since Sat, Jan 23, 2021
3 Years ago
maxinec questions
;