Skip to content
Advertisement

How to change the date from the default to yy-mm-dd? jQuery

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>
User contributions licensed under: CC BY-SA
3 People found this is helpful
Advertisement