I currently have this filter on my table
(function(document) {
'use strict';
var LightTableFilter = (function(Arr) {
var _input;
function _onInputEvent(e) {
_input = e.target;
var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
Arr.forEach.call(tables, function(table) {
Arr.forEach.call(table.tBodies, function(tbody) {
Arr.forEach.call(tbody.rows, _filter);
});
});
}
function _filter(row) {
var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
}
return {
init: function() {
var inputs = document.getElementsByClassName('light-table-filter');
Arr.forEach.call(inputs, function(input) {
input.oninput = _onInputEvent;
});
}
};
})(Array.prototype);
document.addEventListener('readystatechange', function() {
if (document.readyState === 'complete') {
LightTableFilter.init();
}
});
})(document);
I'm wondering how i can use two date fields with this to act as a date range? i have just tried adding two date fields in but that just gives me the response of two exact dates, not the range in between
Heres my html code for the dates
<label for="Date">Date From:</label>
<input type="date" id="datefrom" class="light-table-filter form-control" style="width:50%" data-table="order-table" placeholder="Filter">
<label for="Date">Date to:</label>
<input type="date" id="dateto" class="light-table-filter form-control" style="width:50%" data-table="order-table" placeholder="Filter">
I think this will need some expanding of you filter function, but you can compare dates with compare operators like >= and <=.
So you need to create dates of your 2 input fields and a date of the table row value. You need to identify the cell if it is indeed the date cell, otherwise it will create date objects of arbitrary cell values. I don't know your full HTML, but this can be done by adding a class, for example (see my code).
For example:
function _filter(row) {
var dateFrom = new Date(document.getElementById('datefrom').value);
var dateTo = new Date(document.getElementById('dateto').value);
dateFrom.setHours(0);
dateTo.setHours(0);
var text = row.textContent.toLowerCase(),
val = _input.value.toLowerCase();
row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
if (!isNaN(dateFrom.getTime()) && !isNaN(dateTo.getTime())) {
var cell = row.querySelectorAll(".date")[0];
var arr = cell.innerText.split('-');
var rowDate = new Date(arr[0],parseInt(arr[1])-1,arr[2]);
if (!isNaN(rowDate.getTime())) {
if (rowDate >= dateFrom && rowDate <= dateTo) {
row.style.display = 'table-row';
} else {
row.style.display = 'none';
}
}
}
}
Make sure the Date constructor receives valid parsable date formats. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date for more info.
EDIT
Updated answer and corrected time.
Related
So I am using the air-datepicker (http://t1m0n.name/air-datepicker/docs/)
to select a month, presetting to 01/03/2018 for example, which fills a hidden field in my input called startdate2 using the altmethod.
What I want is to update enddate2 with startdate2 + 2 months. I've tried using onChange and a few various methods but nothing seems to be working.
<input type="hidden" name="startdate" id="startdate2" value="" class="inputdate" onChange="getDateAhead()" >
<input type="hidden" name="enddate" id="enddate2" value="" class="outputdate" >
<script>
function getDateAhead()
{
var start = document.getElementById('startdate2').value;
var end = start.setMonth(start.getMonth()+2);
document.getElementById('enddate2').value = end;
}
</script>
Just can't seem to get it working??
Please check documentation(http://t1m0n.name/air-datepicker/docs/) for the datepicker you are using. Your concern function is onSelect.
var eventDates = [1, 10, 12, 22],
$picker = $('#custom-cells'),
$content = $('#custom-cells-events'),
sentences = [ … ];
$picker.datepicker({
language: 'en',
onRenderCell: function (date, cellType) {
var currentDate = date.getDate();
// Add extra element, if `eventDates` contains `currentDate`
if (cellType == 'day' && eventDates.indexOf(currentDate) != -1) {
return {
html: currentDate + '<span class="dp-note"></span>'
}
}
},
onSelect: function onSelect(fd, date) {
var title = '', content = ''
// If date with event is selected, show it
if (date && eventDates.indexOf(date.getDate()) != -1) {
title = fd;
content = sentences[Math.floor(Math.random() * eventDates.length)];
}
$('strong', $content).html(title)
$('p', $content).html(content)
}
})
We have set of checkbox which is identified as date checkbox. These are known as check-in date. Check-out is 1 greater then check-in date. For example if check-in date is 24/09/2017 then checkout is 25/09/2017.
So We are trying to get short date range if continuous date selected, For example, if we have four date 24/09/2017,25/09/2017,26/09/2017,27/09/2017. If we select 24/09/2017 then check-in date is 24/09/2017 and checkout is 25/09/2017. But if we select 24 and 25,26 then in array we have three values
checkindat:"24/09/2017",checkouts:"25/09/2017"
and
checkindat:"25/09/2017",checkouts:"26/09/2017"
and
checkindat:"26/09/2017",checkouts:"27/09/2017"
so we want if date range in sequence then it would show check-in date as 24/0/2017 and checkout date as 27/09/2017. But if we un-check date then it would work as its working now.
here is some part of my code in this jsfiddle
var alreadycheckin = [];
$("input[class='check htcheck']:checkbox").change(function() {
var roomids = $(this).attr("roomid");
checkindat = $(this).attr("name");
var new_dates = moment(checkindat, "DD.MM.YYYY");
var checkid = new_dates.format('DD-MM-YYYY');
//if ($(this).is(":checked"))
{
var html = '';
arr = [];
var roomcods = $(this).attr("value");
var roomids = $(this).attr("roomid");
checkindat = $(this).attr("name");
var new_dates = moment(checkindat, "DD.MM.YYYY");
var checkid = new_dates.format('DD-MM-YYYY');
//console.log(checkid);
var checkouts = new_dates.add(1, 'days').format('DD/MM/YYYY');
var roomcodes = $(this).attr("value");
var uniq = roomids + '_' + name + '_' + checkindat;
uniq = uniq.split("/").join("").split("_").join("");
var uniqs = '';
//console.log($("#aa"+roomids));
// alreadycheckin.push({ roomids : roomids, checkindat : checkindat, checkouts: checkouts });
var arrElement = {
roomids: roomids,
checkindat: checkindat,
checkouts: checkouts
};
if ($(this).is(":checked")) {
//alreadycheckin[uniq]={ roomids : roomids, checkindat : checkindat, checkouts: checkouts };
alreadycheckin.push(arrElement);
} else {
var index1 = arr.indexOf(arrElement);
alreadycheckin.splice(index1, 1);
}
var tmpAlreadycheckin = [];
// tmpAlreadycheckin=alreadycheckin.slice(0);
for (var i = 0; i < alreadycheckin.length; i++) {
if (i > 0) {
if (typeof alreadycheckin[i - 1] != "undefined" || alreadycheckin[i - 1] != null) {
if (alreadycheckin[i].checkouts == alreadycheckin[i - 1].checkindat) {
console.log("111");
var arrElement1 = {
roomids: roomids,
checkindat: alreadycheckin[i].checkindat,
checkouts: alreadycheckin[i - 1].checkouts
};
tmpAlreadycheckin.push(arrElement1);
//tmpAlreadycheckin[i].checkouts =tmpAlreadycheckin[i+1].checkouts;
//tmpAlreadycheckin.splice(i+1, 1);
} else {
console.log("2222");
var arrElement2 = {
roomids: roomids,
checkindat: alreadycheckin[i].checkindat,
checkouts: alreadycheckin[i].checkouts
};
tmpAlreadycheckin.push(arrElement2);
}
} else {
console.log("3333");
var arrElement2 = {
roomids: roomids,
checkindat: alreadycheckin[i].checkindat,
checkouts: alreadycheckin[i].checkouts
};
tmpAlreadycheckin.push(arrElement2);
}
} else {
console.log("3333");
var arrElement2 = {
roomids: roomids,
checkindat: alreadycheckin[i].checkindat,
checkouts: alreadycheckin[i].checkouts
};
tmpAlreadycheckin.push(arrElement2);
}
}
console.log(tmpAlreadycheckin);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<input roomid="15" id="15_24/09/2017" class="check htcheck" name="24/09/2017" value="1" type="checkbox">24/09/2017 <br/>
<input roomid="15" id="15_25/09/2017" class="check htcheck" name="25/09/2017" value="1" type="checkbox">25/09/2017 <br/>
<input roomid="15" id="15_26/09/2017" class="check htcheck" name="26/09/2017" value="1" type="checkbox">26/09/2017 <br/>
<input roomid="15" id="15_27/09/2017" class="check htcheck" name="27/09/2017" value="1" type="checkbox">27/09/2017 <br/>
If you have an array of objects in this format: [{checkindat:"24/09/2017",checkouts:"25/09/2017"},{checkindat:"25/09/2017",checkouts:"26/09/2017"}] :then you could first sort the array by checkindate, and then iterate over the array backwards. You would start on the last element, look at its checkindat, then compare it to the previous element's checkouts. If they're the same, update the previous elements checkouts to the one ahead of it, and then delete the one ahead of it.
I have a large dataTable which contains ride information. Every row has a start datetime and an end datetime of the following format(yyyy-mm-dd HH:mm:ss). How can I use a datepicker for setting a filter range in dataTables? I want to have a datepicker which only selects a day and not the time. I've searched everywhere for the proper answer but I couldn't find it.
For example I want to see all rows of July by selecting (01-07-2016 - 31-07-2016).
Here is DataTable with Single DatePicker as "from" Date Filter
LiveDemo
Here is DataTable with Two DatePickers for DateRange (To and From) Filter
LiveDemo
Here is my solution, cobbled together from the range filter example in the datatables docs, and letting moment.js do the dirty work of comparing the dates.
HTML
<input
type="text"
id="min-date"
class="date-range-filter"
placeholder="From: yyyy-mm-dd">
<input
type="text"
id="max-date"
class="date-range-filter"
placeholder="To: yyyy-mm-dd">
<table id="my-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Created At</th>
</tr>
</thead>
</table>
JS
Install Moment: npm install moment
// Assign moment to global namespace
window.moment = require('moment');
// Set up your table
table = $('#my-table').DataTable({
// ... do your thing here.
});
// Extend dataTables search
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var min = $('#min-date').val();
var max = $('#max-date').val();
var createdAt = data[2] || 0; // Our date column in the table
if (
( min == "" || max == "" )
||
( moment(createdAt).isSameOrAfter(min) && moment(createdAt).isSameOrBefore(max) )
)
{
return true;
}
return false;
}
);
// Re-draw the table when the a date range filter changes
$('.date-range-filter').change( function() {
table.draw();
} );
JSFiddle Here
Notes
Using moment decouples the date comparison logic, and makes it easy to work with different formats. In my table, I used yyyy-mm-dd, but you could use mm/dd/yyyy as well. Be sure to reference moment's docs when parsing other formats, as you may need to modify what method you use.
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var FilterStart = $('#filter_From').val();
var FilterEnd = $('#filter_To').val();
var DataTableStart = data[4].trim();
var DataTableEnd = data[5].trim();
if (FilterStart == '' || FilterEnd == '') {
return true;
}
if (DataTableStart >= FilterStart && DataTableEnd <= FilterEnd)
{
return true;
}
else {
return false;
}
});
--------------------------
$('#filter_From').change(function (e) {
Table.draw();
});
$('#filter_To').change(function (e) {
Table.draw();
});
Here is my solution, there is no way to use momemt.js.Here is DataTable with Two DatePickers for DateRange (To and From) Filter.
$.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;
}
);
Using other posters code with some tweaks:
<table id="MainContent_tbFilterAsp" style="margin-top:-15px;">
<tbody>
<tr>
<td style="vertical-align:initial;"><label for="datepicker_from" id="MainContent_datepicker_from_lbl" style="margin-top:7px;">From date:</label>
</td>
<td style="padding-right: 20px;"><input name="ctl00$MainContent$datepicker_from" type="text" id="datepicker_from" class="datepick form-control hasDatepicker" autocomplete="off" style="cursor:pointer; background-color: #FFFFFF">
</td>
<td style="vertical-align:initial"><label for="datepicker_to" id="MainContent_datepicker_to_lbl" style="margin-top:7px;">To date:</label>
</td>
<td style="padding-right: 20px;"><input name="ctl00$MainContent$datepicker_to" type="text" id="datepicker_to" class="datepick form-control hasDatepicker" autocomplete="off" style="cursor:pointer; background-color: #FFFFFF">
</td>
<td style="vertical-align:initial"><a onclick="$('#datepicker_from').val(''); $('#datepicker_to').val(''); return false;" id="datepicker_clear_lnk" style="margin-top:7px;">Clear</a></td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$(function() {
var oTable = $('#tbAD').DataTable({
"oLanguage": {
"sSearch": "Filter Data"
},
"iDisplayLength": -1,
"sPaginationType": "full_numbers",
"pageLength": 50,
});
$("#datepicker_from").datepicker();
$("#datepicker_to").datepicker();
$('#datepicker_from').change(function (e) {
oTable.draw();
});
$('#datepicker_to').change(function (e) {
oTable.draw();
});
$('#datepicker_clear_lnk').click(function (e) {
oTable.draw();
});
});
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var min = $('#datepicker_from').datepicker("getDate") == null ? null : $('#datepicker_from').datepicker("getDate").setHours(0,0,0,0);
var max = $('#datepicker_to').datepicker("getDate") == null ? null : $('#datepicker_to').datepicker("getDate").setHours(0,0,0,0);
var startDate = new Date(data[9]).setHours(0,0,0,0);
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;
}
);
});
</script>
Follow the link below and configure it to what you need. Daterangepicker does it for you, very easily. :)
http://www.daterangepicker.com/#ex1
Following one is working fine with moments js 2.10 and above
$.fn.dataTableExt.afnFiltering.push(
function( settings, data, dataIndex ) {
var min = $('#min-date').val()
var max = $('#max-date').val()
var createdAt = data[0] || 0; // Our date column in the table
//createdAt=createdAt.split(" ");
var startDate = moment(min, "DD/MM/YYYY");
var endDate = moment(max, "DD/MM/YYYY");
var diffDate = moment(createdAt, "DD/MM/YYYY");
//console.log(startDate);
if (
(min == "" || max == "") ||
(diffDate.isBetween(startDate, endDate))
) { return true; }
return false;
}
);
I have two dates to be compared in the following format
the response coming from backend service has following date format
alignFillDate - 2015-06-09
pickUpDate - 2015-05-10
so, front end needs to check the condition is if pickUpDate is less then the alignFillDate, we will increase the alignFillDate by 30 days, i.e, we increment the pickUpDate to next month(30 days from now ) and show different text on view
How, do i achieve this using angular and javascript. ? how does my html and controller needs to changed for this date calculation
You save those date strings as Date objects, do a comparison with vanilla javascript and assign to scope or this.
var alignFillDate = new Date("2015-06-09");
var pickUpDate = new Date("2015-05-10");
if (pickUpDate < alignFillDate) {
alignFillDate = alignFillDate.setDate(alignFillDate.getDate() + 30);
}
$scope.pickUpDate = pickUpDate;
$scope.alignFillDate = alignFillDate;
Here is a plunk that does what you are trying to do http://plnkr.co/edit/Kq7WA1cBcrwDyxDeBFAL?p=info.
You should use an angular filter to achieve this. The filter takes in the object containing both dates, and will return the formatted date.
Here is a filter that performs this operation:
myApp.filter('customDate', function($filter) {
var DATE_FORMAT = 'yyyy-MM-dd';
return function (input) {
var alignFillDate = new Date(input.alignFillDate);
var pickUpDate = new Date(input.pickUpDate);
if ( alignFillDate > pickUpDate) {
alignFillDate.setDate(alignFillDate.getDate() + 30)
alignFillDate = $filter('date')(alignFillDate, DATE_FORMAT);
return alignFillDate + ' this date has been changed';
} else {
return $filter('date')(alignFillDate, DATE_FORMAT);
}
}
});
Here is a working jsFiddle: http://jsfiddle.net/ADukg/6681/
Other way -- doing "from scratch": (Example in AngularJS). The method isAfterDate(), specifically, returns true if the first date is greater than second date.
Below, date_angular.js:
var DateModule = angular.module("dates", []);
DateModule.controller("dates", function($scope){
$scope.filtros = {};
$scope.filtros.data_first = null;
$scope.filtros.data_second = null;
$scope.isAfterDate = function(){
data_first_day = $scope.filtros.data_first.split("/")[0];
data_first_month = $scope.filtros.data_first.split("/")[1];
data_first_year = $scope.filtros.data_first.split("/")[2];
data_second_day = $scope.filtros.data_second.split("/")[0];
data_second_month = $scope.filtros.data_second.split("/")[1];
data_second_year = $scope.filtros.data_second.split("/")[2];
if(data_first_year > data_second_year){
return true;
}else if (data_first_year == data_second_year){
if((data_first_month > data_second_month)){
return true;
}else if ((data_first_month < data_second_month)) {
return false;
}else{
if(data_first_day == data_second_day){
return false;
}else if (data_first_day > data_second_day){
return true;
}else{
return false;
}
}
}else{
return false;
}
}
$scope.submit = function() {
if (this.isAfterDate()){
alert("The first date is grater than the second date");
}else{
$("#form_date").submit();
}
}
});
RelatoriosModule.directive("datepicker", function () {
return {
restrict: "A",
require: "ngModel",
link: function (scope, elem, attrs, ngModelCtrl) {
var updateModel = function (dateText) {
scope.$apply(function () {
ngModelCtrl.$setViewValue(dateText);
});
};
var options = {
dateFormat: "dd/mm/yy",
onSelect: function (dateText) {
updateModel(dateText);
}
};
elem.datepicker(options);
}
}
});
For other comparisons: only adjust the method.
In the form (form.html), if you are using AngularJS, you can add it in your archive. Below, form.html:
<div ng-app="dates" class="section-one">
<div ng-controller="dates" class="section">
<form method="get" action="dates/dates" id="form_date">
<div class="form-container--linha">
<div class="field-3">
<label for="data_first">first date: </label>
<input id="data_first" type="text" name="data_first" ng-model="filtros.data_first" datepicker/>
</div>
<div class="field-3">
<label for="data_second">second date: </label>
<input id="data_second" type="text" name="data_second" ng-model="filtros.data_second" datepicker/>
</div>
</div>
<div class="actions">
<button class="bt-principal" type="button" ng-click="submit()">submit</button>
</div>
<form>
</div>
</div>
I have function that loops every 500ms, and collects date information:
var mlptoday = {};
var timer = setTimeout(today,500);
function today(){
var d = new Date()
mlptoday.date = checkTime(d.getDate()); //output: "27"
mlptoday.year = d.getFullYear(); //output: "2013"
mlptoday.month = checkTime(d.getMonth()+1); //output: "01"
}
function checkTime(i) { if (i<10){i="0" + i} return i }
In a different function, I would like to check if the date the user gives as input is either the same day, or after the given day.
An example input may be: 2013.01.27.
I use this snippet of code to achieve what I want:
var remTime = "2013.01.27"; //user input
var remTimeArray = remTime.split('.') //output: ["2013","01","27"]
if (
!(remTimeArray[0] >= parent.mlptoday.year &&
remTimeArray[1] >= parent.mlptoday.month) ||
!((remTimeArray[1] == parent.mlptoday.month) ? Boolean(remTimeArray[2]*1 >= parent.mlptoday.date) : true)
){
//the input date is in the past
}
As you could probably guess, this does not work. The conditional statement seems to fail me, because if I invert Boolean(...) with an !(...), it will never fire the error, otherwise it always will.
Here's a snippet, where it works at it should:
var mlptoday = {};
var timer = setTimeout(today,500);
function today(){
var d = new Date();
mlptoday.year = d.getFullYear(); //output: "2013"
mlptoday.month = checkTime(d.getMonth()+1); //output: "01"
mlptoday.date = checkTime(d.getDate()); //output: "27"
$('#values').html(JSON.stringify(mlptoday));
}
function checkTime(i) { if (i<10){i="0" + i} return i }
$(document).ready(function(){
$('form').submit(function(e){
e.preventDefault();
var remTime = $('input').val(); //user input
var remTimeArray = remTime.split('.') //output: ["2013","01","27"]
if (
!(remTimeArray[0] >= mlptoday.year &&
remTimeArray[1] >= mlptoday.month) ||
!((remTimeArray[1] == mlptoday.month) ? Boolean(remTimeArray[2]*1 >= mlptoday.date) : true)
){
$('#past').fadeIn('fast').delay(500).fadeOut('fast');
}
})
})
#past { display:none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<input type="text" id="input" required autocomplete="off" placeholder="yyyy.mm.dd" pattern="^(19|20)\d\d[.](0[1-9]|1[012])[.](0[1-9]|[12][0-9]|3[01])$" required="" />
<button>Check</button>
</form>
<pre id="values"></pre>
<span id="past">the input date is in the past</span>
I need a better way to do this, and I don't want to use any date picker plugins.
I would compare the dates as integers to avoid complex logic.
var todayConcat = "" + parent.mlptoday.year + parent.mlptoday.month + parent.mlptoday.date;
var remTimeConcat = remTime.replace(/\./g, "");
if (remTimeConcat < todayConcat) {
//the input time is in the past
}
Just make sure the dates and months always have the leading zero.