Step1:
Hi Guys Welcome to designer dairy blog here,we are going to discuss about the major problem occurs in moment.js while passing the date to sort the table using data-table.
Deprecation warning: moment construction falls back to js Date. This is discouraged and will be removed in upcoming major release. Please refer to https://github.com/moment/moment/issues/1407 for more info
Step2:
Problem Occurs in Firefox and IE due to the string instead of Date format.
To fix this problem we have to convert string to date format using function getDate(dateString)
and hack script function called var dateFormat = function () .
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var grab_daterange = $("#date_range").val();
var give_results_daterange = grab_daterange.split(" to ");
var filterstart = give_results_daterange[0];
var filterend = give_results_daterange[1];
var iStartDateCol = 4; //using column 2 in this instance
var iEndDateCol = 4;
var tabledatestart= (aData[iStartDateCol]).replace(/-/g, '/');
var tabledatestart = (getDate(tabledatestart)).format("mm/dd/yyyy");
var tabledateend= (aData[iEndDateCol]).replace(/-/g, '/');
var tabledateend = (getDate(tabledateend)).format("mm/dd/yyyy");
if ( !filterstart && !filterend )
{
return true;
}
else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isBefore(tabledatestart)) && filterend === "")
{
return true;
}
else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isAfter(tabledatestart)) && filterstart === "")
{
return true;
}
else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isBefore(tabledatestart)) && (moment(filterend).isSame(tabledateend) || moment(filterend).isAfter(tabledateend)))
{
return true;
}
return false;
}
);
});
var token = /d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZ]|"[^"]*"|'[^']*'/g,
timezone = /\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g,
timezoneClip = /[^-+\dA-Z]/g,
pad = function (val, len) {
val = String(val);
len = len || 2;
while (val.length < len) val = "0" + val;
return val;
};
// Regexes and supporting functions are cached through closure
return function (date, mask, utc) {
var dF = dateFormat;
// You can't provide utc if you skip other args (use the "UTC:" mask prefix)
if (arguments.length == 1 && Object.prototype.toString.call(date) == "[object String]" && !/\d/.test(date)) {
mask = date;
date = undefined;
}
// Passing date through Date applies Date.parse, if necessary
if (date && typeof(date) === "string") {
var myDateArray = date.split("-");
date = new Date(myDateArray[0], myDateArray[1]-1, myDateArray[2]);
}
else {
date = date ? new Date(date) : new Date;
}
if (isNaN(date)) throw SyntaxError("invalid date");
mask = String(dF.masks[mask] || mask || dF.masks["default"]);
// Allow setting the utc argument via the mask
if (mask.slice(0, 4) == "UTC:") {
mask = mask.slice(4);
utc = true;
}
var _ = utc ? "getUTC" : "get",
d = date[_ + "Date"](),
D = date[_ + "Day"](),
m = date[_ + "Month"](),
y = date[_ + "FullYear"](),
H = date[_ + "Hours"](),
M = date[_ + "Minutes"](),
s = date[_ + "Seconds"](),
L = date[_ + "Milliseconds"](),
o = utc ? 0 : date.getTimezoneOffset(),
flags = {
d: d,
dd: pad(d),
ddd: dF.i18n.dayNames[D],
dddd: dF.i18n.dayNames[D + 7],
m: m + 1,
mm: pad(m + 1),
mmm: dF.i18n.monthNames[m],
mmmm: dF.i18n.monthNames[m + 12],
yy: String(y).slice(2),
yyyy: y,
h: H % 12 || 12,
hh: pad(H % 12 || 12),
H: H,
HH: pad(H),
M: M,
MM: pad(M),
s: s,
ss: pad(s),
l: pad(L, 3),
L: pad(L > 99 ? Math.round(L / 10) : L),
t: H < 12 ? "a" : "p",
tt: H < 12 ? "am" : "pm",
T: H < 12 ? "A" : "P",
TT: H < 12 ? "AM" : "PM",
Z: utc ? "UTC" : (String(date).match(timezone) || [""]).pop().replace(timezoneClip, ""),
o: (o > 0 ? "-" : "+") + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4),
S: ["th", "st", "nd", "rd"][d % 10 > 3 ? 0 : (d % 100 - d % 10 != 10) * d % 10]
};
return mask.replace(token, function ($0) {
return $0 in flags ? flags[$0] : $0.slice(1, $0.length - 1);
});
};
}();
// Some common format strings
dateFormat.masks = {
"default": "ddd mmm dd yyyy HH:MM:ss",
shortDate: "m/d/yy",
mediumDate: "mmm d, yyyy",
longDate: "mmmm d, yyyy",
fullDate: "dddd, mmmm d, yyyy",
shortTime: "h:MM TT",
mediumTime: "h:MM:ss TT",
longTime: "h:MM:ss TT Z",
isoDate: "yyyy-mm-dd",
isoTime: "HH:MM:ss",
isoDateTime: "yyyy-mm-dd'T'HH:MM:ss",
isoUtcDateTime: "UTC:yyyy-mm-dd'T'HH:MM:ss'Z'"
};
function getDate(dateString) {
var dateParts = dateString.split('/');
var month = dateFormat.i18n.monthNames.indexOf(dateParts[1]) % 12;
return new Date(parseInt(dateParts[2]), month, parseInt(dateParts[0]));
}
// Internationalization strings
dateFormat.i18n = {
dayNames: [
"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat",
"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
],
monthNames: [
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
]
};
// For convenience...
Date.prototype.format = function (mask, utc) {
return dateFormat(this, mask, utc);
};
Step4:
Html- Mark up:
<div class="viewform-wrappers">
<table id="project-list" class="display table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th width="11%">Project Code</th>
<th width="16%">Task Name</th>
<th width="15%">Meeting</th>
<th width="13%">Assignee</th>
<th width="14%">Due Date</th>
<th width="14%">Status</th>
<th width="17%">% Completion</th>
</tr>
<tr>
<th width="11%">Project Code</th>
<th width="16%">Task Name</th>
<th width="15%">Meeting</th>
<th width="13%">Assignee</th>
<th width="14%">Due Date</th>
<th width="14%">Status</th>
<th width="17%" >% Completion</th>
</tr>
</thead>
<tbody>
<tr>
<td>MKDB01</td>
<td onclick="location.href='task.html'" style="cursor:pointer">Ad hoc - Submit Contact Details</td>
<td>Ad hoc</td>
<td>James </td>
<td> 30-May-2016</td>
<td>Completed</td>
<td>100</td>
</tr>
<tr>
<td >MKDB02</td>
<td onclick="location.href='task.html'" style="cursor:pointer">Kick-Off Upload Minutes - Kick-Off Meeting </td>
<td>Kick-Off </td>
<td>Paul</td>
<td> 01-Aug-2016</td>
<td>Overdue</td>
<td>40</td>
</tr>
<tr>
<td>MKDB03</td>
</tbody>
</table>
</div>
Step3:
We have include all the scripts here
1 .Date picker
2. jquery.dataTables.min.js
3.dataTables.bootstrap.min.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script>
$('tr[data-href]').on("click", function() {
document.location = $(this).data('href');
});
</script>
<script>
$(function() {
$('.datetimepicker').datetimepicker({
format: 'DD/MM/YYYY'
});
});
</script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="js/daterangepicker.js"></script>
<script>
$(document).ready(function () {
var table= $('#project-list').DataTable({
"fnDrawCallback": function() {
$('th').each(function(){
if (($(this).hasClass('sorting')) || ($(this).hasClass('sorting_desc')))
{
$(this).attr({title: 'Sort Ascending'});}
else
{
$(this).attr({title: 'Sort Descending'});
}
});
},
"dom": '<"toolbar">frtip',
initComplete: function () {
this.api().columns().every(function () {
var column = this;
var select = $('<select onclick="event.stopPropagation()"><option value="">Choose</option></select>')
.appendTo($(column.header()).empty())
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
}
});
$("div.toolbar").html(' <div style="margin-left:10px; margin-top:25px"> Filter By Date Range : <input id="date_range" type="text"></div>');
//END of the data table
// Date range script - Start of the sscript
$("#date_range").daterangepicker({
autoUpdateInput: false,
locale: {
"cancelLabel": "Clear",
}
});
$("#date_range").on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('YYYY-MM-DD') + ' to ' + picker.endDate.format('YYYY-MM-DD'));
table.draw();
});
$("#date_range").on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
table.draw();
});
// Date range script - END of the script
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var grab_daterange = $("#date_range").val();
var give_results_daterange = grab_daterange.split(" to ");
var filterstart = give_results_daterange[0];
var filterend = give_results_daterange[1];
var iStartDateCol = 4; //using column 2 in this instance
var iEndDateCol = 4;
var tabledatestart= (aData[iStartDateCol]).replace(/-/g, '/');
//var tabledatestart = (new Date(tabledatestart)).format("mm/dd/yyyy");
var tabledatestart = (getDate(tabledatestart)).format("mm/dd/yyyy");
var tabledateend= (aData[iEndDateCol]).replace(/-/g, '/');
// var tabledateend = (new Date(tabledateend)).format("mm/dd/yyyy");
var tabledateend = (getDate(tabledateend)).format("mm/dd/yyyy");
if ( !filterstart && !filterend )
{
return true;
}
else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isBefore(tabledatestart)) && filterend === "")
{
return true;
}
else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isAfter(tabledatestart)) && filterstart === "")
{
return true;
}
else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isBefore(tabledatestart)) && (moment(filterend).isSame(tabledateend) || moment(filterend).isAfter(tabledateend)))
{
return true;
}
return false;
}
);
});
var dateFormat = function () {
var token = /d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZ]|"[^"]*"|'[^']*'/g,
timezone = /\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g,
timezoneClip = /[^-+\dA-Z]/g,
pad = function (val, len) {
val = String(val);
len = len || 2;
while (val.length < len) val = "0" + val;
return val;
};
// Regexes and supporting functions are cached through closure
return function (date, mask, utc) {
var dF = dateFormat;
// You can't provide utc if you skip other args (use the "UTC:" mask prefix)
if (arguments.length == 1 && Object.prototype.toString.call(date) == "[object String]" && !/\d/.test(date)) {
mask = date;
date = undefined;
}
// Passing date through Date applies Date.parse, if necessary
if (date && typeof(date) === "string") {
var myDateArray = date.split("-");
date = new Date(myDateArray[0], myDateArray[1]-1, myDateArray[2]);
}
else {
date = date ? new Date(date) : new Date;
}
if (isNaN(date)) throw SyntaxError("invalid date");
mask = String(dF.masks[mask] || mask || dF.masks["default"]);
// Allow setting the utc argument via the mask
if (mask.slice(0, 4) == "UTC:") {
mask = mask.slice(4);
utc = true;
}
var _ = utc ? "getUTC" : "get",
d = date[_ + "Date"](),
D = date[_ + "Day"](),
m = date[_ + "Month"](),
y = date[_ + "FullYear"](),
H = date[_ + "Hours"](),
M = date[_ + "Minutes"](),
s = date[_ + "Seconds"](),
L = date[_ + "Milliseconds"](),
o = utc ? 0 : date.getTimezoneOffset(),
flags = {
d: d,
dd: pad(d),
ddd: dF.i18n.dayNames[D],
dddd: dF.i18n.dayNames[D + 7],
m: m + 1,
mm: pad(m + 1),
mmm: dF.i18n.monthNames[m],
mmmm: dF.i18n.monthNames[m + 12],
yy: String(y).slice(2),
yyyy: y,
h: H % 12 || 12,
hh: pad(H % 12 || 12),
H: H,
HH: pad(H),
M: M,
MM: pad(M),
s: s,
ss: pad(s),
l: pad(L, 3),
L: pad(L > 99 ? Math.round(L / 10) : L),
t: H < 12 ? "a" : "p",
tt: H < 12 ? "am" : "pm",
T: H < 12 ? "A" : "P",
TT: H < 12 ? "AM" : "PM",
Z: utc ? "UTC" : (String(date).match(timezone) || [""]).pop().replace(timezoneClip, ""),
o: (o > 0 ? "-" : "+") + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4),
S: ["th", "st", "nd", "rd"][d % 10 > 3 ? 0 : (d % 100 - d % 10 != 10) * d % 10]
};
return mask.replace(token, function ($0) {
return $0 in flags ? flags[$0] : $0.slice(1, $0.length - 1);
});
};
}();
// Some common format strings
dateFormat.masks = {
"default": "ddd mmm dd yyyy HH:MM:ss",
shortDate: "m/d/yy",
mediumDate: "mmm d, yyyy",
longDate: "mmmm d, yyyy",
fullDate: "dddd, mmmm d, yyyy",
shortTime: "h:MM TT",
mediumTime: "h:MM:ss TT",
longTime: "h:MM:ss TT Z",
isoDate: "yyyy-mm-dd",
isoTime: "HH:MM:ss",
isoDateTime: "yyyy-mm-dd'T'HH:MM:ss",
isoUtcDateTime: "UTC:yyyy-mm-dd'T'HH:MM:ss'Z'"
};
function getDate(dateString) {
var dateParts = dateString.split('/');
var month = dateFormat.i18n.monthNames.indexOf(dateParts[1]) % 12;
return new Date(parseInt(dateParts[2]), month, parseInt(dateParts[0]));
}
// Internationalization strings
dateFormat.i18n = {
dayNames: [
"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat",
"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
],
monthNames: [
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
]
};
// For convenience...
Date.prototype.format = function (mask, utc) {
return dateFormat(this, mask, utc);
};
</script>
Step4:
Hi Guys Welcome to designer dairy blog here,we are going to discuss about the major problem occurs in moment.js while passing the date to sort the table using data-table.
Deprecation warning: moment construction falls back to js Date. This is discouraged and will be removed in upcoming major release. Please refer to https://github.com/moment/moment/issues/1407 for more info
Step2:
Problem Occurs in Firefox and IE due to the string instead of Date format.
To fix this problem we have to convert string to date format using function getDate(dateString)
and hack script function called var dateFormat = function () .
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var grab_daterange = $("#date_range").val();
var give_results_daterange = grab_daterange.split(" to ");
var filterstart = give_results_daterange[0];
var filterend = give_results_daterange[1];
var iStartDateCol = 4; //using column 2 in this instance
var iEndDateCol = 4;
var tabledatestart= (aData[iStartDateCol]).replace(/-/g, '/');
var tabledatestart = (getDate(tabledatestart)).format("mm/dd/yyyy");
var tabledateend= (aData[iEndDateCol]).replace(/-/g, '/');
var tabledateend = (getDate(tabledateend)).format("mm/dd/yyyy");
if ( !filterstart && !filterend )
{
return true;
}
else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isBefore(tabledatestart)) && filterend === "")
{
return true;
}
else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isAfter(tabledatestart)) && filterstart === "")
{
return true;
}
else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isBefore(tabledatestart)) && (moment(filterend).isSame(tabledateend) || moment(filterend).isAfter(tabledateend)))
{
return true;
}
return false;
}
);
});
Add this dateFormat function
var dateFormat = function () {var token = /d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZ]|"[^"]*"|'[^']*'/g,
timezone = /\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g,
timezoneClip = /[^-+\dA-Z]/g,
pad = function (val, len) {
val = String(val);
len = len || 2;
while (val.length < len) val = "0" + val;
return val;
};
// Regexes and supporting functions are cached through closure
return function (date, mask, utc) {
var dF = dateFormat;
// You can't provide utc if you skip other args (use the "UTC:" mask prefix)
if (arguments.length == 1 && Object.prototype.toString.call(date) == "[object String]" && !/\d/.test(date)) {
mask = date;
date = undefined;
}
// Passing date through Date applies Date.parse, if necessary
if (date && typeof(date) === "string") {
var myDateArray = date.split("-");
date = new Date(myDateArray[0], myDateArray[1]-1, myDateArray[2]);
}
else {
date = date ? new Date(date) : new Date;
}
if (isNaN(date)) throw SyntaxError("invalid date");
mask = String(dF.masks[mask] || mask || dF.masks["default"]);
// Allow setting the utc argument via the mask
if (mask.slice(0, 4) == "UTC:") {
mask = mask.slice(4);
utc = true;
}
var _ = utc ? "getUTC" : "get",
d = date[_ + "Date"](),
D = date[_ + "Day"](),
m = date[_ + "Month"](),
y = date[_ + "FullYear"](),
H = date[_ + "Hours"](),
M = date[_ + "Minutes"](),
s = date[_ + "Seconds"](),
L = date[_ + "Milliseconds"](),
o = utc ? 0 : date.getTimezoneOffset(),
flags = {
d: d,
dd: pad(d),
ddd: dF.i18n.dayNames[D],
dddd: dF.i18n.dayNames[D + 7],
m: m + 1,
mm: pad(m + 1),
mmm: dF.i18n.monthNames[m],
mmmm: dF.i18n.monthNames[m + 12],
yy: String(y).slice(2),
yyyy: y,
h: H % 12 || 12,
hh: pad(H % 12 || 12),
H: H,
HH: pad(H),
M: M,
MM: pad(M),
s: s,
ss: pad(s),
l: pad(L, 3),
L: pad(L > 99 ? Math.round(L / 10) : L),
t: H < 12 ? "a" : "p",
tt: H < 12 ? "am" : "pm",
T: H < 12 ? "A" : "P",
TT: H < 12 ? "AM" : "PM",
Z: utc ? "UTC" : (String(date).match(timezone) || [""]).pop().replace(timezoneClip, ""),
o: (o > 0 ? "-" : "+") + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4),
S: ["th", "st", "nd", "rd"][d % 10 > 3 ? 0 : (d % 100 - d % 10 != 10) * d % 10]
};
return mask.replace(token, function ($0) {
return $0 in flags ? flags[$0] : $0.slice(1, $0.length - 1);
});
};
}();
// Some common format strings
dateFormat.masks = {
"default": "ddd mmm dd yyyy HH:MM:ss",
shortDate: "m/d/yy",
mediumDate: "mmm d, yyyy",
longDate: "mmmm d, yyyy",
fullDate: "dddd, mmmm d, yyyy",
shortTime: "h:MM TT",
mediumTime: "h:MM:ss TT",
longTime: "h:MM:ss TT Z",
isoDate: "yyyy-mm-dd",
isoTime: "HH:MM:ss",
isoDateTime: "yyyy-mm-dd'T'HH:MM:ss",
isoUtcDateTime: "UTC:yyyy-mm-dd'T'HH:MM:ss'Z'"
};
function getDate(dateString) {
var dateParts = dateString.split('/');
var month = dateFormat.i18n.monthNames.indexOf(dateParts[1]) % 12;
return new Date(parseInt(dateParts[2]), month, parseInt(dateParts[0]));
}
// Internationalization strings
dateFormat.i18n = {
dayNames: [
"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat",
"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
],
monthNames: [
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
]
};
// For convenience...
Date.prototype.format = function (mask, utc) {
return dateFormat(this, mask, utc);
};
Step4:
Html- Mark up:
<div class="viewform-wrappers">
<table id="project-list" class="display table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th width="11%">Project Code</th>
<th width="16%">Task Name</th>
<th width="15%">Meeting</th>
<th width="13%">Assignee</th>
<th width="14%">Due Date</th>
<th width="14%">Status</th>
<th width="17%">% Completion</th>
</tr>
<tr>
<th width="11%">Project Code</th>
<th width="16%">Task Name</th>
<th width="15%">Meeting</th>
<th width="13%">Assignee</th>
<th width="14%">Due Date</th>
<th width="14%">Status</th>
<th width="17%" >% Completion</th>
</tr>
</thead>
<tbody>
<tr>
<td>MKDB01</td>
<td onclick="location.href='task.html'" style="cursor:pointer">Ad hoc - Submit Contact Details</td>
<td>Ad hoc</td>
<td>James </td>
<td> 30-May-2016</td>
<td>Completed</td>
<td>100</td>
</tr>
<tr>
<td >MKDB02</td>
<td onclick="location.href='task.html'" style="cursor:pointer">Kick-Off Upload Minutes - Kick-Off Meeting </td>
<td>Kick-Off </td>
<td>Paul</td>
<td> 01-Aug-2016</td>
<td>Overdue</td>
<td>40</td>
</tr>
<tr>
<td>MKDB03</td>
</tbody>
</table>
</div>
Step3:
We have include all the scripts here
1 .Date picker
2. jquery.dataTables.min.js
3.dataTables.bootstrap.min.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script>
$('tr[data-href]').on("click", function() {
document.location = $(this).data('href');
});
</script>
<script>
$(function() {
$('.datetimepicker').datetimepicker({
format: 'DD/MM/YYYY'
});
});
</script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="js/daterangepicker.js"></script>
<script>
$(document).ready(function () {
var table= $('#project-list').DataTable({
"fnDrawCallback": function() {
$('th').each(function(){
if (($(this).hasClass('sorting')) || ($(this).hasClass('sorting_desc')))
{
$(this).attr({title: 'Sort Ascending'});}
else
{
$(this).attr({title: 'Sort Descending'});
}
});
},
"dom": '<"toolbar">frtip',
initComplete: function () {
this.api().columns().every(function () {
var column = this;
var select = $('<select onclick="event.stopPropagation()"><option value="">Choose</option></select>')
.appendTo($(column.header()).empty())
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
}
});
$("div.toolbar").html(' <div style="margin-left:10px; margin-top:25px"> Filter By Date Range : <input id="date_range" type="text"></div>');
//END of the data table
// Date range script - Start of the sscript
$("#date_range").daterangepicker({
autoUpdateInput: false,
locale: {
"cancelLabel": "Clear",
}
});
$("#date_range").on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('YYYY-MM-DD') + ' to ' + picker.endDate.format('YYYY-MM-DD'));
table.draw();
});
$("#date_range").on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
table.draw();
});
// Date range script - END of the script
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var grab_daterange = $("#date_range").val();
var give_results_daterange = grab_daterange.split(" to ");
var filterstart = give_results_daterange[0];
var filterend = give_results_daterange[1];
var iStartDateCol = 4; //using column 2 in this instance
var iEndDateCol = 4;
var tabledatestart= (aData[iStartDateCol]).replace(/-/g, '/');
//var tabledatestart = (new Date(tabledatestart)).format("mm/dd/yyyy");
var tabledatestart = (getDate(tabledatestart)).format("mm/dd/yyyy");
var tabledateend= (aData[iEndDateCol]).replace(/-/g, '/');
// var tabledateend = (new Date(tabledateend)).format("mm/dd/yyyy");
var tabledateend = (getDate(tabledateend)).format("mm/dd/yyyy");
if ( !filterstart && !filterend )
{
return true;
}
else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isBefore(tabledatestart)) && filterend === "")
{
return true;
}
else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isAfter(tabledatestart)) && filterstart === "")
{
return true;
}
else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isBefore(tabledatestart)) && (moment(filterend).isSame(tabledateend) || moment(filterend).isAfter(tabledateend)))
{
return true;
}
return false;
}
);
});
var dateFormat = function () {
var token = /d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZ]|"[^"]*"|'[^']*'/g,
timezone = /\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g,
timezoneClip = /[^-+\dA-Z]/g,
pad = function (val, len) {
val = String(val);
len = len || 2;
while (val.length < len) val = "0" + val;
return val;
};
// Regexes and supporting functions are cached through closure
return function (date, mask, utc) {
var dF = dateFormat;
// You can't provide utc if you skip other args (use the "UTC:" mask prefix)
if (arguments.length == 1 && Object.prototype.toString.call(date) == "[object String]" && !/\d/.test(date)) {
mask = date;
date = undefined;
}
// Passing date through Date applies Date.parse, if necessary
if (date && typeof(date) === "string") {
var myDateArray = date.split("-");
date = new Date(myDateArray[0], myDateArray[1]-1, myDateArray[2]);
}
else {
date = date ? new Date(date) : new Date;
}
if (isNaN(date)) throw SyntaxError("invalid date");
mask = String(dF.masks[mask] || mask || dF.masks["default"]);
// Allow setting the utc argument via the mask
if (mask.slice(0, 4) == "UTC:") {
mask = mask.slice(4);
utc = true;
}
var _ = utc ? "getUTC" : "get",
d = date[_ + "Date"](),
D = date[_ + "Day"](),
m = date[_ + "Month"](),
y = date[_ + "FullYear"](),
H = date[_ + "Hours"](),
M = date[_ + "Minutes"](),
s = date[_ + "Seconds"](),
L = date[_ + "Milliseconds"](),
o = utc ? 0 : date.getTimezoneOffset(),
flags = {
d: d,
dd: pad(d),
ddd: dF.i18n.dayNames[D],
dddd: dF.i18n.dayNames[D + 7],
m: m + 1,
mm: pad(m + 1),
mmm: dF.i18n.monthNames[m],
mmmm: dF.i18n.monthNames[m + 12],
yy: String(y).slice(2),
yyyy: y,
h: H % 12 || 12,
hh: pad(H % 12 || 12),
H: H,
HH: pad(H),
M: M,
MM: pad(M),
s: s,
ss: pad(s),
l: pad(L, 3),
L: pad(L > 99 ? Math.round(L / 10) : L),
t: H < 12 ? "a" : "p",
tt: H < 12 ? "am" : "pm",
T: H < 12 ? "A" : "P",
TT: H < 12 ? "AM" : "PM",
Z: utc ? "UTC" : (String(date).match(timezone) || [""]).pop().replace(timezoneClip, ""),
o: (o > 0 ? "-" : "+") + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4),
S: ["th", "st", "nd", "rd"][d % 10 > 3 ? 0 : (d % 100 - d % 10 != 10) * d % 10]
};
return mask.replace(token, function ($0) {
return $0 in flags ? flags[$0] : $0.slice(1, $0.length - 1);
});
};
}();
// Some common format strings
dateFormat.masks = {
"default": "ddd mmm dd yyyy HH:MM:ss",
shortDate: "m/d/yy",
mediumDate: "mmm d, yyyy",
longDate: "mmmm d, yyyy",
fullDate: "dddd, mmmm d, yyyy",
shortTime: "h:MM TT",
mediumTime: "h:MM:ss TT",
longTime: "h:MM:ss TT Z",
isoDate: "yyyy-mm-dd",
isoTime: "HH:MM:ss",
isoDateTime: "yyyy-mm-dd'T'HH:MM:ss",
isoUtcDateTime: "UTC:yyyy-mm-dd'T'HH:MM:ss'Z'"
};
function getDate(dateString) {
var dateParts = dateString.split('/');
var month = dateFormat.i18n.monthNames.indexOf(dateParts[1]) % 12;
return new Date(parseInt(dateParts[2]), month, parseInt(dateParts[0]));
}
// Internationalization strings
dateFormat.i18n = {
dayNames: [
"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat",
"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
],
monthNames: [
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
]
};
// For convenience...
Date.prototype.format = function (mask, utc) {
return dateFormat(this, mask, utc);
};
</script>
Step4:
Output:
No comments:
Post a Comment