I’ve been trying to fix this for a while and can’t figure out how to change the format for the date picker so it can match with my database. The date format I need is yy-mm-dd, but it looks the whole function is wrong
JavaScript
x
55
55
1
"columns": [ //just pseudo code for the fields
2
3
{ "data": "pk" },
4
{ "data": "fields.first_name" },
5
{ "data": "fields.last_name" },
6
{ "data": "fields.email" },
7
{ "data": "fields.date_arrival" },
8
{ "data": "fields.date_departure" },
9
10
],
11
12
// Datepicker
13
$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
14
var min = $('#min').datepicker("getDate");
15
var max = $('#max').datepicker("getDate");
16
var startDate = new Date(data[4]);
17
18
if (min == null && max == null) {
19
return true;
20
}
21
if (min == null && startDate <= max) {
22
return true;
23
}
24
if (max == null && startDate >= min) {
25
return true;
26
}
27
if (startDate <= max && startDate >= min) {
28
return true;
29
}
30
return false;
31
});
32
33
$("#min").datepicker({
34
dateFormat: "yy-mm-dd",
35
onSelect: function() {
36
table.draw();
37
},
38
changeMonth: true,
39
changeYear: true
40
});
41
$("#max").datepicker({
42
dateFormat: "yy-mm-dd",
43
onSelect: function() {
44
table.draw();
45
},
46
changeMonth: true,
47
changeYear: true
48
});
49
//var table = $('#datatable').DataTable();
50
51
// Event listener to the two range filtering inputs to redraw on input
52
$('#min, #max').change(function() {
53
table.draw();
54
});
55
this is the playground I prepared: http://live.datatables.net/jadorolu/17/edit
Advertisement
Answer
You can use the dateFormat function and get your desired results.
JavaScript
1
5
1
$( function() {
2
$( "#datepicker" ).datepicker({
3
dateFormat: "yy-mm-dd"
4
});
5
} );
JavaScript
1
5
1
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
2
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
3
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
4
5
<p>Date: <input type="text" id="datepicker"></p>