新的Date（date）.getTime（）; 以d / m / y格式读取时间

Question

EDIT: I created an example of what I am trying to do: http://plnkr.co/edit/HvItQP2uDooaMgK7GRQe?p=preview

There are several problems with it.

1. It does not work in FF (on MAC). No errors that I can see.

2. In chrome after selecting 11-04-17 to 17-04-17 It still shows rows with 30/03/2017

I really appreciate everyone's help and again please keep in mind I just started with JS last week. I can read the code and (possibly) understand the logic, but I am not on the level where I can clearly see how to implement it.

---

I am using datatables to sort some basic data by dates. There was an excellent example here: that I copied. The example dates are in mm/dd/yyyy format.

I need it to run in dd/mm/yyyy. When I switch the dates in the example to the format I need it no longer works.

I am very new to JS so I imagine this is the part that does the magic:

 minDateFilter = new Date(date).getTime();

minDateFilter grabs the data in the input, and .getTime() converts it to seconds from 1970. I googled around if I can get it to start with day something like .getTime(dateFormat: "dd-mm-yyyy") but no luck yet.

If anyone could help me out here I'd appreciate it. I can always use a hidden field but rather not.

Thank you

Answer 1

getTime returns unix timestamp in seconds, not date like 17/04/2017 . You will have to use toLocalDateString .

 var date = new Date(); console.log(date.toLocaleDateString("en-GB")); 

Answer 2

d = new Date(date);
f=d=>(d+"").length==2?""+d:"0"+d;
minDateFilter= f(d.getDate())+"-"+f(d.getMonth()+1)+"-"+f(d.getYear()%100);

http://jsbin.com/sosurohaje/edit?console

Explanation:

d.getDate returns the day of the month,

d.getMonth returns the month from 0-11 (thats why the +1 )

.getYear returns the year from 1900, thats why i used modulo 100 to format it:

2014 => 114 %100 => 14
1914 => 14 %100 => 14
2000 => 100 % 100 => 0

And thanks to oen44 ive included a function f that will add a leading 0 if it isnt a two digit number...

Answer 3

I would String#split the string and then parse that into Date . Depending on UTC you will get a different value in ms back (unless you happen to be a GMT timezone). In your case where you are just using this for the sorting reference, it should not matter which value you use, as long as you use the same type for all of them.

 function getTime(value, utc) { // with dd/mm/yyyy then part[0] will be dd, // part[1] will be mm and part[2] will be yyyy var parts = value.split('/'); // Date requires a zero referenced month parts[1] -= 1; if (utc) { return Date.UTC(parts[2], parts[1], parts[0]); } return new Date(parts[2], parts[1], parts[0]).getTime(); } var value = '03/03/2016'; console.log(getTime(value)); console.log(getTime(value, true)); 

Update: This is beyond your actual question, and as such is no longer on topic. However, answer merged with your code, no warranty. There are also plugins available, which include moments , if you don't want to do this yourself.

 var getTime = function(value, utc) { // with dd/mm/yyyy then part[0] will be dd, // part[1] will be mm and part[2] will be yyyy var parts = value.split('/'); // Date requires a zero referenced month parts[1] -= 1; if (utc) { return Date.UTC(parts[2], parts[1], parts[0]); } return new Date(parts[2], parts[1], parts[0]).getTime(); }; var types = $.fn.dataTable.ext.type; // Add type detection types.detect.unshift(function(d) { var ms = getTime(d); var isValid = typeof ms === 'number' && !isNaN(ms); return isValid ? 'date-x' : null; }); // Add sorting method - use an integer for the sorting types.order['date-x-pre'] = function(d) { return getTime(d); }; // Date range filter var minDateFilter = ''; var maxDateFilter = ''; $.fn.dataTableExt.afnFiltering.push( function(oSettings, aData, iDataIndex) { if (typeof aData._date === 'undefined') { aData._date = getTime(aData[0]); } if (minDateFilter && !isNaN(minDateFilter)) { if (aData._date < minDateFilter) { return false; } } if (maxDateFilter && !isNaN(maxDateFilter)) { if (aData._date > maxDateFilter) { return false; } } return true; } ); var oTable = $('#datatable').DataTable({ oLanguage: { sSearch: 'Filter Data' }, iDisplayLength: -1, sPaginationType: 'full_numbers' }); $('#datepicker_from').datepicker({ showOn: 'button', dateFormat: 'dd/mm/yy', buttonImageOnly: false, onSelect: function(date) { minDateFilter = getTime(date); oTable.draw(); } }).keyup(function() { minDateFilter = getTime(this.value); oTable.draw(); }); $('#datepicker_to').datepicker({ showOn: 'button', dateFormat: 'dd/mm/yy', buttonImageOnly: false, onSelect: function(date) { maxDateFilter = getTime(date); oTable.draw(); } }).keyup(function() { maxDateFilter = getTime(this.value); oTable.draw(); }); 

 <link href="http://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/css/jquery.dataTables_themeroller.css" rel="stylesheet" /> <link href="http://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/css/jquery.dataTables.css" rel="stylesheet" /> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/css/smoothness/jquery-ui-1.10.2.custom.min.css" /> <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/js/jquery.dataTables.min.js"></script> <p id="date_filter"> <span id="date-label-from" class="date-label">From: </span><input class="date_range_filter date" type="text" id="datepicker_from" /> <span id="date-label-to" class="date-label">To:</span><input class="date_range_filter date" type="text" id="datepicker_to" /> </p> <table width="100%" class="display" id="datatable"> <thead> <tr> <th>Date</th> <th>ID</th> </tr> </thead> <tbody> <tr> <td>30/03/2017</td> <td><a href="42296/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000617 </a></td> </tr> <tr> <td>30/03/2017</td> <td><a href="42297/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000618 </a></td> </tr> <tr> <td>30/03/2017</td> <td><a href="42298/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000619 </a></td> </tr> <tr> <td>03/04/2017</td> <td><a href="42340/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000620 </a></td> </tr> <tr> <td>03/04/2017</td> <td><a href="42343/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000621 </a></td> </tr> <tr> <td>03/04/2017</td> <td><a href="42344/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000622 </a></td> </tr> <tr> <td>03/04/2017</td> <td><a href="42345/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000623 </a></td> </tr> <tr> <td>03/04/2017</td> <td><a href="42348/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000624 </a></td> </tr> <tr> <td>03/04/2017</td> <td><a href="42350/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000625 </a></td> </tr> <tr> <td>04/04/2017</td> <td><a href="42395/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000626 </a></td> </tr> <tr> <td>05/04/2017</td> <td><a href="42427/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000627 </a></td> </tr> <tr> <td>05/04/2017</td> <td><a href="42446/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000628 </a></td> <tr> <td>05/04/2017</td> <td><a href="42458/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000629 </a></td> </tr> <tr> <td>05/04/2017</td> <td><a href="42461/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000630 </a></td> </tr> <tr> <td>06/04/2017</td> <td><a href="42490/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000631 </a></td> </tr> <tr> <td>06/04/2017</td> <td><a href="42491/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000632 </a></td> </tr> <tr> <td>06/04/2017</td> <td><a href="42493/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000633 </a></td> </tr> <tr> <td>06/04/2017</td> <td><a href="42494/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000634 </a></td> </tr> <tr> <td>06/04/2017</td> <td><a href="42497/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000635 </a></td> </tr> <tr> <td>07/04/2017</td> <td><a href="42531/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000636 </a></td> </tr> <tr> <td>07/04/2017</td> <td><a href="42532/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000637 </a></td> </tr> <tr> <td>07/04/2017</td> <td><a href="42533/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000638 </a></td> </tr> <tr> <td>07/04/2017</td> <td><a href="42539/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000640 </a></td> </tr> <tr> <td>07/04/2017</td> <td><a href="42540/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000641 </a></td> </tr> <tr> <td>07/04/2017</td> <td><a href="42541/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000642 </a></td> </tr> <tr> <td>07/04/2017</td> <td><a href="42542/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000643 </a></td> </tr> <tr> <td>07/04/2017</td> <td><a href="42544/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000644 </a></td> </tr> <tr> <td>08/04/2017</td> <td><a href="42565/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000645 </a></td> </tr> <tr> <td>08/04/2017</td> <td><a href="42566/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000646 </a></td> </tr> <tr> <td>10/04/2017</td> <td><a href="42604/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000647 </a></td> </tr> <tr> <td>10/04/2017</td> <td><a href="42607/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000648 </a></td> </tr> <tr> <td>11/04/2017</td> <td><a href="42636/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000649 </a></td> </tr> <tr> <td>11/04/2017</td> <td><a href="42638/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000650 </a></td> </tr> <tr> <td>11/04/2017</td> <td><a href="42639/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000651 </a></td> </tr> <tr> <td>12/04/2017</td> <td><a href="42661/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000652 </a></td> </tr> <tr> <td>12/04/2017</td> <td><a href="42664/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000653 </a></td> </tr> <tr> <td>15/04/2017</td> <td><a href="42711/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000654 </a></td> </tr> <tr> <td>15/04/2017</td> <td><a href="42712/service_request/CS_Reviewed" class="btn btn-default btn-sm">000000655 </a></td> </tr> </tbody> </table> 

Answer 4

If you have the date Object and you know the output format you can construct the output string with the date methods, in example:

var date = new Date("05/26/1984");
var formatDate = curdate.getDate() + "/" + (curdate.getMonth() + 1) + "/" + curdate.getFullYear();

If the problem is the input you can get the day, month and year with split and create de date with "new Date(year, month, day, hours, minutes, seconds, milliseconds)":

var input = "26/05/1984";
var aux = input.split("/");
var day =aux[0];
var month = aux[1];
var year = aux[2];
var date = new Date(year,month - 1,day,0,0,0,0);