{ name: "line_item_date", className: 'req-field', label: "Some label", type: "datetime", keyInput: false, displayFormat: localDateformat.dateFormat, wireFormat: valueDateFormat, },

We set min/max from the billing dates:

const dateField = editor.field('line_item_date');
dateField.minDate(formatToValueDateFormat(minDate));
dateField.maxDate(formatToValueDateFormat(maxDate));

When the billing period is in the past (e.g. Feb–Mar 2025) and the user edits a row with the date field empty, the picker opens on today’s month/year. Today is outside the range, so the year dropdown shows "-".

We know we could use nullDefault: true and def(minDate), but that would set a default date. We only want the calendar to open on a month/year inside the range and leave the value empty until the user picks.

Is there a supported way to control which month/year the calendar shows when it opens with an empty value?

{
    label: 'Some date field',
    name: 'some_date',
    type: 'datetime',
    opts: {
        display: {
            year: 1982,
            month: 10
        }
    }
},   

or maybe...

{
    label: 'Some date field',
    name: 'some_date',
    type: 'datetime',
    opts: {
        display: [1982, 10]
    }
},   

The display option would probably only take affect if there is no current value or default value set.

Example: https://editor.datatables.net/examples/dates/dates.html

When I select "DataTables" as the framework, everything works fine.
However, when I select "jQuery UI" as the framework, the direct selection of a month or year in the date picker no longer works. The selection box flashes briefly and then disappears immediately.

This issue occurs with the Firefox browser (143.0.3).
Chrome (140.0.7339.208) doesn’t seem to be affected.

Am I misremembering or overlooking it?

I want to update the minDate for a second DateTime field based on the selected date of a first DateTime field.

I can update the value of the second field using this:

var dd1 = new DateTime(document.getElementById('departure_date_1'), {
    format: 'DD/MM/YYYY HH:mm',
    onChange: function (value, date, input) {
        ad1.val(date);
    }
});

var ad1 = new DateTime(document.getElementById('arrival_date_1'), {
    format: 'DD/MM/YYYY HH:mm',
}); 

But I can't figure out how to update the minDate, this does not work:

var dd1 = new DateTime(document.getElementById('departure_date_1'), {
    format: 'DD/MM/YYYY HH:mm',
    onChange: function (value, date, input) {
        ad1.val(date);
    }
});

var ad1 = new DateTime(document.getElementById('arrival_date_1'), {
    format: 'DD/MM/YYYY HH:mm',
}); 

Any ideas?

Thanks
- Tom

Note that 2010 is present in the select for the year even though minDate is 2011-01-01 so years prior to 2011 shouldn't show.

For anyone not familiar with this phenomenon, this is caused by minDate and maxDate being passed as strings in ISO format (YYYY-MM-DD) to their new Date() objects,. The Date object will convert those strings to local time and give this unexpected result.

For the uninitiated this can be particularly frustrating:

const d = new Date('2011-01-01');  // ISO format of `YYYY-MM-DD`

console.log(d.getFullYear()); // = 2010???

But here's a way to see what's actually happening:

const d = new Date('2011-01-01');  // ISO format of `YYYY-MM-DD`

console.log(d.toISOString()); // "2011-01-01T00:00:00.000Z"

console.log(d.toString()); // Local "Fri Dec 31 2010 19:00:00 GMT-0500 (Eastern Standard Time)"

console.log(d.getFullYear()); // 2010

To avoid this, construct the date in local time:

const d = new Date(2011, 0, 1); // Month is zero-indexed (0 = January)

console.log(d.toString()); // "Sat Jan 01 2011 00:00:00 GMT-0500 (Eastern Standard Time)"

console.log(d.getFullYear()); // 2011

Using new Date(YYYY, MM-1, DD) will ensure you stay in the local zone and the DateTime select won’t sneak in that additional year.

If you still prefer to pass the ISO format, here's a function that can do the conversion

function newLocalDate(date) {
    const parts = date.split('-');   // ["YYYY","MM","DD"]
    const year  = parts[0];
    const month = parts[1] - 1;  // zero-indexed (0 = January)
    const day   = parts[2];      // day-of-month
    
    // Build local-time Date:
    return new Date(year, month, day);
}


...
opts: {
    minDate: newLocalDate('2011-03-01'),
    maxDate: newLocalDate('2011-10-31')
}
...

The select for the year would be disabled (or eliminated) if the minDate and maxDate year are the same, i.e., there would be no select for the year since 2011 is the only possible option:

opts: {
    minDate: new Date('2011-03-01'),
    maxDate: new Date('2011-10-31')
}

The months could be dynamic based on the year, i.e., this would have Oct, Nov, and Dec for 2011 and Jan, Feb, and Mar for 2012:

opts: {
    minDate: new Date('2011-09-01'),
    maxDate: new Date('2012-03-31')
}

Finally, the select for the month would be disabled (or eliminated) if the year and the month are the same, i.e., there would be no select for the month or the year since July 2011 are the only possible options:

opts: {
    minDate: new Date('2011-07-01'),
    maxDate: new Date('2011-07-31')
}

I can attach events to the input, but I'm looking for when a user clicks the backward and forward arrow, etc.

$(document).ready(function () {
    new DateTime(document.getElementById('test'), {
        hoursAvailable: [8, 9, 10]
    });
});

I can't find any example for setting it like I would for maxDate in the dependent method like this:

        proxCardLotAccessEditor.field.dependent('actualUsageDateTime',
            function(val, data, callback, e) {
             ....
                     proxCardLotAccessEditor.field('effectiveDate').maxDate(maxDate);
             ....
           });

How can I dynamically update hoursAvailable option on a dateTime field in and editor when the date is changed?

Regards,

RobO.

In sample https://editor.datatables.net/examples/dates/time.html
add record and open datetime picker for time with empty value (def set to null) and then select hour.
Minutes and seconds are filled with current values (the same if select a minute or second). Others time parts are set when selecting a time part

Normal ?

        {
            "label": "Meeting:",
            "name": "new_meeting.date",
            "type": "datetime",
            "format": "ddd, D MMM YY"
        },

please see the image attached.

thank you

At the moment, one needs to click/tap out of the picker for it to close.
Ideally it should behave, just like the date picker.

Thank you!
Cheers,
Marco

https://datatables.net/extensions/buttons/examples/html5/simple.html

Is it possible to have a date_added field in a table which is automatically populated with the current date and time upon record creation?

Similarly, can a last_modified field be initially left blank or populated with the same date and time as the date_added field, then similarly time-stamped automatically any time the record is later edited (overwriting any previous last_modified timestamp)?

I'm sure this is quite common, but I'm new at this and not a real programmer by any stretch lol...though I am thoroughly enjoying my new student status thanks to DataTables and Editor.

Merci:)
Shawn

min date date: Thu Jun 16 2022 05:31:26 GMT-0400 (Eastern Daylight Time)
moment date: q {_isAMomentObject: true, _i: '16/06/2022', _f: 'DD/MM/YYYY h:m A', _isUTC: false, _pf: {…}, …}

The comparison of (min <= date && max === null) will not pass so the row is hidden.

There are other threads with similar problems:
https://datatables.net/forums/discussion/71518/date-range-filter-with-dd-mm-yyyy-format#latest
https://datatables.net/forums/discussion/71488/issue-with-datatables-date-range-filter

There are additional steps needed when using moment. What are the recommended ways to combine comparing moment objects with DateTime objects?

This one suggests there is some inconsistency with returning the time.
https://datatables.net/forums/discussion/73126/issue-with-datatables-datetime-value#latest

The request is to either provide a way to just create a date only DateTime object or provide documentation and examples of how this works to eliminate confusion with just the generic example.

Kevin

But that is not my biggest concern today. I'm having a problem with the jQuery datetime picker on my a custom built pages, so I thought I would tried you work around and get the inline picker working. Now I've spent hours on it this evening and looked up all kinds of examples and comments and replies from the forums but I just cannot get it to work. No matter what combination of formatting or what order anything is in, I get the 'Input not Valid' error every single time.

I can direct you to my sandbox with fictional data and you can replicate the issue using the 'Inspection' column. Can anyone help me know what I'[m doing fundamentally wrong so this datetime picker packaged with DataTables doesn't work anywhere at any time? It is of Interest at the date only Fields work just fine, it's only the datetime fields that I'm having a problem with.

Thanks, Steve

https://sandbox.claimpenguin.com/public/dataTable/claimtracker.php

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.0/moment.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.11.5/sorting/datetime-moment.js"></script> 
$.fn.dataTable.moment('DD/MM/YYYY');
                              $('#<%= Grid.ClientID %>').dataTable(
                                  {
                                      "columns": [
                                          { "width": "10%" },
                                          { "width": "20%" },
                                          { "width": "10%" },
                                          { "width": "3%" },
                                          { "width": "3%" },
                                          { "width": "3%" },
                                          null
                                      ],
                                      "scrollX": true,
                                      responsive: true,
                                      "order": [[2, "desc"], [3, "desc"]]

                                  }

                              );


                              var table = $('#<%= Grid.ClientID %>').dataTable();

works fine using chrome in the android and pc but in iphone the ordering does not appear the same

rowCallback: function (row, data, index) {

            if (data[6] < moment().format('DD/MM/YYYY')) {
                $(row).find('td:eq(6)').css('background-color', '#f0aaaa').css('font-weight', 'bold')
            }
        },

Thank's

this is my code

<script type="text/javascript"> 
   //fungsi untuk filtering data berdasarkan tanggal 
   var start_date;
   var end_date;
   var DateFilterFunction = (function (oSettings, aData, iDataIndex) {
      var dateStart = parseDateValue(start_date);
      var dateEnd = parseDateValue(end_date);
      //Kolom tanggal yang akan kita gunakan berada dalam urutan 2, karena dihitung mulai dari 0
      //nama depan = 0
      //nama belakang = 1
      //tanggal terdaftar =2
      var evalDate= parseDateValue(aData[2]);
        if ( ( isNaN( dateStart ) && isNaN( dateEnd ) ) ||
             ( isNaN( dateStart ) && evalDate <= dateEnd ) ||
             ( dateStart <= evalDate && isNaN( dateEnd ) ) ||
             ( dateStart <= evalDate && evalDate <= dateEnd ) )
        {
            return true;
        }
        return false;
  });

  // fungsi untuk converting format tanggal dd/mm/yyyy menjadi format tanggal javascript menggunakan zona aktubrowser
  function parseDateValue(rawDate) {
      var dateArray= rawDate.split("/");
      var parsedDate= new Date(dateArray[2], parseInt(dateArray[1])-1, dateArray[0]);  // -1 because months are from 0 to 11   
      return parsedDate;
  }    

  $( document ).ready(function() {
  //konfigurasi DataTable pada tabel dengan id example dan menambahkan  div class dateseacrhbox dengan dom untuk meletakkan inputan daterangepicker
   var $dTable = $('#example').DataTable({
    "dom": "<'row'<'col-sm-4'l><'col-sm-5' <'datesearchbox'>><'col-sm-3'f>>" +
      "<'row'<'col-sm-12'tr>>" +
      "<'row'<'col-sm-5'i><'col-sm-7'p>>"
   });


   //menambahkan daterangepicker di dalam datatables
   $("div.datesearchbox").html('<div class="input-group"> <div class="input-group-addon"> <i class="glyphicon glyphicon-calendar"></i> </div><input type="text" class="form-control pull-right" id="datesearch" placeholder="Search by date range.."> </div>');

   document.getElementsByClassName("datesearchbox")[0].style.textAlign = "right";

   //konfigurasi daterangepicker pada input dengan id datesearch
   $('#datesearch').daterangepicker({
      autoUpdateInput: false
    });

   //menangani proses saat apply date range
    $('#datesearch').on('apply.daterangepicker', function(ev, picker) {
       $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
       start_date=picker.startDate.format('DD/MM/YYYY');
       end_date=picker.endDate.format('DD/MM/YYYY');
       $.fn.dataTableExt.afnFiltering.push(DateFilterFunction);
       $dTable.draw();
    });

    $('#datesearch').on('cancel.daterangepicker', function(ev, picker) {
      $(this).val('');
      start_date='';
      end_date='';
      $.fn.dataTable.ext.search.splice($.fn.dataTable.ext.search.indexOf(DateFilterFunction, 1));
      $dTable.draw();
    });
  });

  
</script>
  <script>
        $(document).ready(function() {
    $('#example').DataTable( {
        "footerCallback": function ( row, data, start, end, display ) {
            var api = this.api();
 
            // Remove the formatting to get integer data for summation
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };
 
            // Total over all pages
            total = api
                .column( 4 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
            // Total over this page
            pageTotal = api
                .column( 4, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
                $(api.column(4).footer()).html(this.fnSettings().fnFormatNumber( 'Rp ' +pageTotal));
            // Update footer
            // $( api.column( 4 ).footer() ).html(
            //     'Rp '+pageTotal +' '
            // );
        }
    } );
} );
    </script>

There is error checking done to ensure their times do not conflict with other records of that one particular date. For example, if there is a record on a Monday from 7AM - 12:00PM and the next is 12:30PM-3:30PM, the second record could not have a clock in time changed to 11:30AM.

These times must be validated by the original date of the record. I have three columns for each record that are relevant - a date column for the date of the record, a timestamp clock in time, and a datetime clock out time. The issues I have found are as follows:

First rendition: I tried to use just time on the two clock columns, but when submitting a change, the date portion of the datetime column updated to today's date instead of staying the same date with the new time. This is an issue because it changed the table to having all modified records be a part of today's time clock records, leaving the error checking to return a consistent response of "Dates must be the same". When I tried to use the error checking stored procedure to verify the difference in dates, there was no consistency as to when the date field would also update to today's date. I tried to disable the date column to ensure this would not change, but that leaves the user with the clunkiness of having to enter the date of the clock in and out columns twice.

Second rendition: I changed the datetime fields to being both date and time, which is redundant because these records have to be in the same day but the day is rarely today's date. To try to mend this, I tried to use SET_EDIT on the serverside, but could not figure out how to default the values to the original date (and perhaps I missed something and could use the date column?).

Current code (as seen in the images):

Fields from Editor:

fields: [ 
      {
        label: "Date:",
        name: "clock_in.clock_date",
        type: "datetime",
        format: "MMMM D, YYYY",
        wireFormat: "YYYY-MM-DD"
      },
      {
        label: 'Job:',
        name:  'clock_in.job_no',
        type: "select"
      }, {
        label: 'In:',
        name:  'clock_in.clock_in_time',
        type: "datetime",
        format: "MMMM D, YYYY h:mm A",
        wireFormat: "YYYY-MM-DD HH:mm:ss"
      }, {
        label:  'Out:',
        name:   'clock_in.clock_out_time',
        type:   'datetime',
        format: "MMMM D, YYYY h:mm A",
        wireFormat: "YYYY-MM-DD HH:mm:ss"
      }
      ]

Error Checking via Editor - this runs a stored procedure to return a validation code so records do not overlap:

 editor.on("preSubmit", function(e, o, action) {
      if (submitFlag === false) {
        //if (action == 'edit') {
          //var rowid = data.DT_RowId;
          rowid = this.ids()[0];
          rowdate = this.field('clock_in.clock_date').val();
          newin = this.field('clock_in.clock_in_time').val();
          newout = this.field('clock_in.clock_out_time').val();
          newjob = this.field('clock_in.job_no').val();
          responseValidation(rowid, rowdate, newin, newout, newjob);
          return false;
        }
        submitFlag = false;
      });
      
      function responseValidation(rowid, rowdate, cin, cout, job) {
        $.ajax({
          url: "/timeclock/include/updateRecord.php",
          type: "POST",
          data: {
            rowid: rowid,
            rowdate: rowdate,
            newin: newin,
            newout: newout,
            newjob: newjob
          },
          success: function(response) {
            if (response == "1") {
              editor.field('clock_in.clock_out_time').error("Clock in time must be less than the clock out time.");
              submitFlag = false;
            } else if (response == "2") {
              editor.field('clock_in.clock_in_time').error("Clock in time conflicts with another record.");
              submitFlag = false;
            } else if (response == "3") {
              editor.field('clock_in.clock_out_time').error("Clock out time conflicts with another record.");
              submitFlag = false;
            } else if (response == "4") {
              editor.field('clock_in.clock_in_time').error("Clock in time conflicts with another record.");
              editor.field('clock_in.clock_out_time').error("Clock out time conflicts with another record.");
              submitFlag = false;
            } else if (response == "5") {
              editor.field('clock_in.clock_out_time').error("Time clock records must occur within the same day.");
              submitFlag = false;
            } else if (response == "6") {
              editor.field('clock_in.clock_in_time').error("Clock in time is required.");
              submitFlag = false;
            } else if (response == "7") {
              editor.field('clock_in.clock_out_time').error("Clock out time is required.");
              submitFlag = false;
            } else {
              submitFlag = true;
              editor.submit();
            }
          }
        });
        
      }

Table column definitions:

 columns: [
          { data: "clock_in.clock_date",
            render: function(data, type, row) {
              return moment(data).format("MMMM D, YYYY");
            } },
            { data: "001_PROJTRK.projtrk_bid_no", editField: "clock_in.job_no" },
            { data: "clock_in.clock_in_time", 
              render: function(data, type, row) {
                return moment(data).format("h:mm A");
              } },
              { data: "clock_in.clock_out_time", 
                render: function(data, type, row) {
                  return moment(data).format("h:mm A");
                } },
                { data: "clock_in.time_worked" }
              ],

Controller:

->field( 
    Field::inst( 'clock_in.clock_date' )
    ->validator( Validate::dateFormat(
        'Y-m-d',
        ValidateOptions::inst()
            ->allowEmpty( false )
    ) )
    ->getFormatter( Format::datetime( 'Y-m-d', 'Y-m-d' ) )
    ->setFormatter( Format::datetime( 'Y-m-d', 'Y-m-d' ) ),
    Field::inst( 'clock_in.clock_in_time' )
    ->validator( Validate::dateFormat(
        'Y-m-d H:i:s',
        ValidateOptions::inst()
            ->allowEmpty( false )
    ) )
    ->getFormatter( Format::datetime( 'Y-m-d H:i:s', 'Y-m-d H:i:s' ) )
    ->setFormatter( Format::datetime( 'Y-m-d H:i:s', 'Y-m-d H:i:s' ) ),
    Field::inst( 'clock_in.clock_out_time' )
    ->validator( Validate::dateFormat(
        'Y-m-d H:i:s',
        ValidateOptions::inst()
            ->allowEmpty( false )
    ) )
    ->getFormatter( Format::datetime( 'Y-m-d H:i:s', 'Y-m-d H:i:s' ) )
    ->setFormatter( Format::datetime( 'Y-m-d H:i:s', 'Y-m-d H:i:s' ) ),

Related question to this table: Is there a way to use RowGrouping without actually showing the column? For instance, instead of having a column in the table for the date, simply group by the date and order by the time columns?

    $(document).ready(function () {
        var table = $('#table').DataTable({
            responsive: true
        });
        new $.fn.dataTable.FixedHeader(table);
    });

I've seen where you can set data-order to a timestamp, but since this data is coming from a query and is dynamic I'm having issues finding a solution.

I've found a couple workarounds, such as checking event.originalEvent.submitter.id in the submit event handler for my form, and calling preventDefault / returning false. However, I think it would make more sense for those buttons to simply be defined as "button" type. I realize this is probably a lower priority request but I wanted to get it out there in case anyone else has experienced a similar issue.

I would like to use this same datetime picker throughout my site to keep the same theme for users. Is it possible to wire the built-in datetime picker to a standard input that is not within a DataTable? If so, how can that be done? If no, is there a 3rd party library that closely matches the time picker functionality?

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.11.3/b-2.0.1/b-colvis-2.0.1/b-html5-2.0.1/b-print-2.0.1/date-1.1.1/fh-3.2.0/r-2.2.9/sb-1.2.2/sp-1.4.0/sl-1.3.3/datatables.min.css" />

<input class="form-control dtsb-value dtsb-input" autocomplete="off">

This is a odd error, as the database does not have a column with a datetime format, nor do any of the php files in use. table.vendors.php does not have a datetime field, nor the html headers, nor table.vendors.js . I've rebooted, cleared the cache, checked the files, yet this error persists. I generated the first table 'users' which had a datatime field. I then copied theses files, changed the fields, generated the table properly, and it all renders. Everything works accept 'CREATE' which throws this error.
Does anyone have an idea?

Hello, I want to format the Date column. (DD.MM.YYYY HH:mm ) I also get an error in the order. Sorting does not work in this format.

How can I change the start of the week?
The default is on Monday.
I want to change it to "Sunday".
Please Help me...

I'm stuck on the individual column searching for a few days.. I succeeded to change display date format with the moment library but it doesn't apply to the search box. It still expected a date like "YYYY-MM-DD".

This my code :

        var tableCheck = $('#histo').DataTable({
            scrollX: true,
            "sScrollY": "120em",
            "sScrollX": "100%",
            "bScrollCollapse": true,
            initComplete: function() {
                $('div.dataTables_scrollHeadInner thead tr#filterCheckHisto [name="filter"]').each(function() {
                    $(this).html('<input id="input' + $(this).index() + '" type="text" class="form-control" placeholder="' + $(this).text() + '" />');
                    $(this).on('keyup change', function() {
                        var val;
                        val = $('#input' + $(this).index()).val();

                        var title = $(this).text();
                        console.log('titre =' + title);

                        console.log('laa');
                        tableCheck
                            .column($(this).attr("data-num"))
                            .column($(this).index()).search(val)
                            .draw();

                    });
                });
            },

            orderCellsTop: true,
            fixedHeader: true,

            dom: 'Blfrtip',
            "searching": true,
            "processing": true,
            "serverSide": true,
            "ajax": "../server_side/scripts/server_processing_tb_check.php",

            "order": [7, "desc"],


            "columnDefs": [{
                    targets: '_all',
                    defaultContent: '-'
                },
                {
                    "targets": 5,
                    "type": "date-euro",
                    "render": function(data, type, row, meta) {
                         return moment(data).format('DD-MM-YYYY HH:mm');               
                    }
                }
            ],

            "pageLength": 25,

        });

Basically, I'd like to add a "data-order" on <td> but I don't know how can I figure out.

Thanks in advance for your help