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
"columns": [ //just pseudo code for the fields { "data": "pk" }, { "data": "fields.first_name" }, { "data": "fields.last_name" }, { "data": "fields.email" }, { "data": "fields.date_arrival" }, { "data": "fields.date_departure" }, ], // Datepicker $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) { var min = $('#min').datepicker("getDate"); var max = $('#max').datepicker("getDate"); var startDate = new Date(data[4]); if (min == null && max == null) { return true; } if (min == null && startDate <= max) { return true; } if (max == null && startDate >= min) { return true; } if (startDate <= max && startDate >= min) { return true; } return false; }); $("#min").datepicker({ dateFormat: "yy-mm-dd", onSelect: function() { table.draw(); }, changeMonth: true, changeYear: true }); $("#max").datepicker({ dateFormat: "yy-mm-dd", onSelect: function() { table.draw(); }, changeMonth: true, changeYear: true }); //var table = $('#datatable').DataTable(); // Event listener to the two range filtering inputs to redraw on input $('#min, #max').change(function() { table.draw(); });
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.
$( function() { $( "#datepicker" ).datepicker({ dateFormat: "yy-mm-dd" }); } );
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <p>Date: <input type="text" id="datepicker"></p>