We Keep Coding

Cannot read property 'length' error in JS

I have the an array of date range and I need to get a difference between number of days in between those months and create an array.
10/05/2015 - 11/05/2015 = 30 days
11/05/2015 - 12/ 05/2015 = 31 days
[30,31....]
I have the following code for date range.
function createLedger(stDate, etDate) {
if (stDate && etDate) {
var endOfLeaseDate = moment(etDate, "MM/DD/YYYY");
var startOfLeaseDate = moment(stDate, "MM/DD/YYYY");
dateRange(startOfLeaseDate, endOfLeaseDate);
}
}
function dateRange(stDate, etDate) {
var dates = [];
var now = stDate.clone();
var day = stDate.date();
while (now.isBefore(etDate)) {
//deal with variable month end days
var monthEnd = now.clone().endOf("month");
if (now.date() < day && day <= monthEnd.date()) {
now.date(day);
}
dates.push(now.format("MM/DD/YYYY"));
now = now.clone().add({
"months": 1
});
}
return dates;
}
function daysBetween(date1, date2) {
var Diff = Math.abs(date2.getTime() - date1.getTime());
var TimeDifference = Math.round(Diff / (1000 * 3600 * 24));
return TimeDifference;
}
function RunLedgerAndPV() {
var pDate = "11/21/2018"
var stDate = "10/5/2015";
var etDate = "12/4/2019";
var dateArr = createLedger(stDate, etDate);
var dayCounts = "";
for (var x = 0; x < dateArr.length; x++) {
dayCounts += daysBetween(dateArr[x], dateArr[x + 1], ",");
}
console.log(dayCounts);
}
RunLedgerAndPV();
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
It's throwing an error at dateArr.length for some reason. Not sure what i am doing wrong here. Any help is appreciated. Thank you.

To add on to Vijay you are not returning anything in dateRange() either. Return dates array then return where you called dateRange().
Be aware this leads to more errors to do with your naming of daysBetween function when you are calling daysBetweenArrears.
EDIT
Few other errors:
You are calling getTime() on a string so this causes an error. You need to convert to a date object using new Date(date2) - new Date(date1).
Another return also missing for the Run function.
Code below:
function createLedger(stDate, etDate) {
if (stDate && etDate) {
var endOfLeaseDate = moment(etDate, "MM/DD/YYYY");
var startOfLeaseDate = moment(stDate, "MM/DD/YYYY");
return dateRange(startOfLeaseDate, endOfLeaseDate); // Added return
}
}
function dateRange(stDate, etDate) {
var dates = [];
var now = stDate.clone();
var day = stDate.date();
while (now.isBefore(etDate)) {
//deal with variable month end days
var monthEnd = now.clone().endOf("month");
if (now.date() < day && day <= monthEnd.date()) {
now.date(day);
}
dates.push(now.format("MM/DD/YYYY"));
now = now.clone().add({
"months": 1
});
}
return dates; // Added return
}
function daysBetween(date1, date2) {
var Diff = Math.abs(new Date(date2).getTime() - new Date(date1).getTime()); // Used new Date()
var TimeDifference = Math.round(Diff / (1000 * 3600 * 24));
return TimeDifference;
}
function RunLedgerAndPV() {
var pDate = "11/21/2018"
var stDate = "10/5/2015";
var etDate = "12/4/2019";
var dateArr = createLedger(stDate, etDate);
var dayCounts = "";
for (var x = 0; x < dateArr.length; x++) {
dayCounts += daysBetween(dateArr[x], dateArr[x + 1]) + ' '; // added a + ' ' to add a space to the result. Removed the ',' that you were adding in daysBetween but not using
}
return dayCounts; // Added return
}
RunLedgerAndPV(); //This wont show anything so wrap it in a console.log to see it return what you need

In your function "crrateLedger" you don't return anyting and you are assigning that in "var dateArr" hence it is set to undefined by javascript and you are trying to access property length of dateArr which is undefined

output correct format 24 hour after calculation

I'm currently using this function to calculate 2 fields and the results are good but sometimes missing a zero. sample
10:20 + 10:30 current output 0.10
10:20 + 10:30 I want the output to be 00.10
$(function () {
function calculate() {
time1 = $("#start").val().split(':'),
time2 = $("#end").val().split(':');
hours1 = parseInt(time1[0], 10),
hours2 = parseInt(time2[0], 10),
mins1 = parseInt(time1[1], 10),
mins2 = parseInt(time2[1], 10);
hours = hours2 - hours1,
mins = 0;
if(hours < 0) hours = 24 + hours;
if(mins2 >= mins1) {
mins = mins2 - mins1;
} else {
mins = (mins2 + 60) - mins1;
}
// the result
$("#hours").val(hours + ':' + mins);
}
});
also when there is an invalid character I keep getting a nan message is possible to change this to 00 instead?

Instead of dealing with the strings and each value independently, you can use the javascript Date object to calculate the difference...
function calculate() {
// Get time values and convert them to javascript Date objects.
var time1 = new Date('01/01/2017 ' + $('#start').val());
var time2 = new Date('01/01/2017 ' + $('#end').val());
// Get the time difference in minutes. If is negative, add 24 hours.
var hourDiff = (time2 - time1) / 60000;
hourDiff = (hourDiff < 0) ? hourDiff+1440 : hourDiff;
// Calculate hours and minutes.
var hours = Math.floor(hourDiff/60);
var minutes = Math.floor(hourDiff%60);
// Set the result adding '0' to the left if needed
$("#hours").val((hours<10 ? '0'+hours : hours) + ':' + (minutes<10 ? '0'+minutes : minutes));
}
Or even better, you can make the function independent of the DOM elements, so you can reuse it...
function calculate(startTime,endTime) {
// Get time values and convert them to javascript Date objects.
var time1 = new Date('01/01/2017 ' + startTime);
var time2 = new Date('01/01/2017 ' + endTime);
// Get the time difference in minutes. If is negative, add 24 hours.
var hourDiff = (time2 - time1) / 60000;
hourDiff = (hourDiff < 0) ? hourDiff+1440 : hourDiff;
// Calculate hours and minutes.
var hours = Math.floor(hourDiff/60);
var minutes = Math.floor(hourDiff%60);
// Return the response, adding '0' to the left of each field if needed.
return (hours<10 ? '0'+hours : hours) + ':' + (minutes<10 ? '0'+minutes : minutes);
}
// Now you can use the function.
$("#hours").val(calculate($('#start').val(),$('#end').val()));

Add a function
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
and call this function before displaying result

I propose you that :
$(".calculator").on("change",function(){
var isNegative = false;
var hours = "00:00";
var inputStart = $("#start").val();
var inputEnd = $("#end").val();
if(inputStart!="" && inputEnd != ""){
// calculate only if the 2 fields have inputs
// convert to seconds (more convenient)
var seconds1 = stringToSeconds(inputStart);
var seconds2 = stringToSeconds(inputEnd);
var secondsDiff = seconds2 - seconds1;
var milliDiffs = secondsDiff * 1000;
if(milliDiffs < 0){
milliDiffs = milliDiffs *-1;
isNegative = true;
}
// Convert the difference to date
var diff = new Date(milliDiffs);
// convert the date to string
hours = diff.toUTCString();
// extract the time information in the string 00:00:00
var regex = new RegExp(/[0-9]{2}:[0-9]{2}:[0-9]{2}/);
var arr = hours.match(regex);
hours = arr[0];
// Take only hours and minutes and leave the seconds
arr = hours.split(":");
hours=arr[0]+":"+arr[1];
// put minus in front if negative
if(isNegative){
hours = "-"+hours;
}
// Show the result
$("#hours").val(hours);
// Put back the inputs times in case there were somehow wrong
// (it's the same process)
var date1 = new Date(seconds1*1000);
var str1 = date1.toUTCString();
arr = str1.match(regex);
hours = arr[0];
arr = hours.split(":");
hours=arr[0]+":"+arr[1];
$("#start").val(hours);
// idem for time 2
var date2 = new Date(seconds2*1000);
var str2 = date2.toUTCString();
arr = str2.match(regex);
hours = arr[0];
arr = hours.split(":");
hours=arr[0]+":"+arr[1];
$("#end").val(hours);
}
});
function timeElementToString(timeElement){
var output = timeElement.toString();
if(timeElement < 10 && timeElement >=0)
output = "0"+output;
else if(timeElement < 0 && timeElement >=-10)
output = "-0"+Math.abs(output);
return output;
}
function stringToSeconds(input){
var hours = 0;
var arr=input.split(":");
if(arr.length==2){
hours=parseInt(arr[0]);
minutes=parseInt(arr[1]);
if(isNaN(hours)){
hours = 0;
}
if(isNaN(minutes)){
minutes = 0;
}
}
return hours*3600+60*minutes;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label for="start">Start</label><input type="text" id="start" class="calculator"></input><br />
<label for="end">End</label><input type="text" id="end" class="calculator"></input><br />
<label for="hours">Hours</label><input type="text" id="hours" readonly="readonly"></input>
</form>

React not rendering child elements

I'm new to React, and I'm trying to bind React on my Angular Project. Currently I have some components which I need only bind children elements. But I am getting this error: Invariant Violation: GRID.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
My React code is here.
var GRID = React.createClass({
displayName: 'GRID',
render: function () {
var grid = this.props.grid;
var x = 5; //minutes interval
var timeSheet = []; // time array
var tt = 0; // start time
var ap = ['AM', 'PM']; // AM-PM
var options = [];
var key = 0;
//loop to increment the time and push results in array
for (var i = 0; tt < 24 * 60; i++) {
var hh = Math.floor(tt / 60); // getting hours of day in 0-24 format
var mm = (tt % 60); // getting minutes of the hour in 0-55 format
// timeSheet[i] = ("0" + (hh % 12)).slice(-2) + ':' + ("0" + mm).slice(-2) + ap[Math.floor(hh / 12)]; // pushing data in array in [00:00 - 12:00 AM/PM format]
tt = tt + x;
key += 1;
var time = {
"key": key,
"lable": ("0" + (hh % 12)).slice(-2) + ':' + ("0" + mm).slice(-2) + " " + ap[Math.floor(hh / 12)],
"value": ("0" + (hh)).slice(-2) + ':' + ("0" + mm).slice(-2)
}
timeSheet.push(time)
}
var select = React.createElement('select',
timeSheet.map(function (time, index) {
var option = React.createElement('option', { value: time.value, key: index, label: time.lable, className: 'md-option' });
return option;
})
)
return React.Children.map(select.props.children, (element, idx) => {
console.log(element);
return React.cloneElement(element, { ref: idx });
})
}
});
What is the problem with this code?

try to enclose your return statements inside a div tag.Else when your code will be converted into plain javascript and it will insert a semicolon at end of your return statement and hence leads to unreachable code.So enclose return in a
<div>
return //your code
</div>

Cumbersome time parsing in JavaScript

I need a function to convert time in text from a format with day-part letters to digits.
E.g. 4:15PM -> 16:15, 4:15AM -> 4:15AM. Currently I have the following solution
function formatTime(text){
var find = '([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9] (AM|PM)';
var reg = new RegExp(find, 'g');
pos = 0;
var result;
var formatedText = "";
while((result = reg.exec(text)) !== null) {
if(result[2] == "PM"){
var hours= parseInt(result[0], 10);
hours = hours + 12;
var hoursStr = hours.toString();
var newTime = hoursStr + result[0].substring(result[1].length,result[0].length - 3);
formatedText += newTime;
pos = reg.lastIndex;
} else {
formatedText += text.replace("AM","").substring(pos, reg.lastIndex);
pos = reg.lastIndex;
}
}
if(pos < text.length){
formatedText += text.substring(pos, text.length);
}
return formatedText;
}
console.log(formatTime("Some Text (11:00AM - 1:00PM)"));
I makes nicely cases like
console.log(formatTime("Some Text (11:00AM - 1:00PM)"));
But I strugle to make it process
console.log(formatTime("Some Text (11:00 AM - 1:00 PM)"));

This works for your examples.
I've added \\s? to the regex and made a minor change in the logic of cutting time (-2 instead of -3). Also I've moved variables definition to the beginning of the function to reflect hoisting in JavaScript.
function formatTime(text){
var find = '([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]\\s?(AM|PM)';
var reg = new RegExp(find, 'g');
var pos = 0;
var formatedText = "";
var result, hours, hoursStr, newTime;
while ((result = reg.exec(text)) !== null) {
if (result[2] === "PM") {
hours= parseInt(result[0], 10);
hours = hours + 12;
hoursStr = hours.toString();
newTime = hoursStr + result[0].substring(result[1].length, result[0].length - 2);
formatedText += newTime;
} else {
formatedText += text.replace("AM","").substring(pos, reg.lastIndex);
}
pos = reg.lastIndex;
}
if (pos < text.length) {
formatedText += text.substring(pos, text.length);
}
return formatedText;
}

Here's an easier way to do this: Just use two functions. One to convert the hours, and another to match against PM times along with the replace() function.
Easy does it...
function convertTime12to24(time12h) {
const [time, modifier] = time12h.split(' ');
let [hours, minutes] = time.split(':');
if (hours === '12') {
hours = '00';
}
if (modifier === 'PM') {
hours = parseInt(hours, 10) + 12;
}
return hours + ':' + minutes;
}
function formatTime(i_string) {
console.log(i_string.replace(/([0-9]|0[0-9]|1[0-9]|2[0-3]):([0-5][0-9])(PM)/gi, function newDate(x) {
return convertTime12to24(x.replace("PM", " PM"))
}));
}
formatTime("The time is now 4:15PM");
formatTime("The time is now 12:15PM");
formatTime("The time is now 4:00AM");
formatTime("The time is now 12:00AM");
formatTime("The time is now 11:00PM");

How organize this function to work correctly?

I'm working on extending the date filter in my plugin Ideal Forms to allow the user to configure the date format, i.e. dd/mm/yyyy, mm-dd-yyyy... This is what I got so far:
date: {
regex: function (input, value) {
var
// Just grabbing some info from the plugin...
data = input.userOptions.data
? input.userOptions.data.date
: { format: 'mm/dd/yyyy' }, // default format
separator = '\\' + /[^mdy]/.exec(data.format)[0], // extract separator
userFormat = data.format.replace(/[^mdy]/g, ''), // convert to proper format
isDate = function (m, d, y) {
return m > 0 &&
m < 13 &&
y > 0 &&
y < 32768 &&
d > 0 &&
d <= (new Date(y, m, 0)).getDate()
},
n2 = '(\\d{1,2})', // day and month
n4 = '(\\d{4})', // year
format = {
'mmddyyyy': function () {
var re = new RegExp(n2 + separator + n2 + separator + n4),
m = re.exec(value)
return m && isDate(m[1], m[2], m[3])
},
'ddmmyyyy': function () {
var re = new RegExp(n2 + separator + n2 + separator + n4),
m = re.exec(value)
return m && isDate(m[2], m[1], m[3])
},
'yyyymmdd': function () {
var re = new RegExp(n4 + separator + n2 + separator + n2),
m = re.exec(value)
return m && isDate(m[2], m[3], m[1])
},
'yyyyddmm': function () {
var re = new RegExp(n4 + separator + n2 + separator + n2),
m = re.exec(value)
return m && isDate(m[3], m[2], m[1])
}
}
return format[userFormat]() || format['mmddyyyy']()
},
When using formats other that the default mm/dd/yyyy problems come since the function isDate tests the date starting with the month value, so when I pass a custom format like dd-mm-yyyy, the call isDate(m[2], m[1], m[3]) works but it will also validate values like 12-13-1986 but not 13-13-1986.
How can I begin fixing this? Any ideas?

EDIT
I wanted to address your comment regarding the return of isDate, too. The function behaves as expected, the problem is elsewhere. I haven't dissected your code enough to say where the bug is, but isDate is correct: http://jsfiddle.net/nQMYe/
Original Answer
I have had good luck with a variation of the snippet here: http://joey.mazzarelli.com/2008/11/25/easy-date-parsing-with-javascript/
Basically, it implements a fromString method in the Date object. I don't care for that approach, so I've modified my implementation to standalone as a function, and eliminated some of the unnecessary bits. That said, it works great.
The basic idea is to first normalize the input. Since you never know if the user is giving you a format like 1.11.2011 or 3~12~2012, first thing is to just strip away that noise:
data = data.replace(/[^:a-z0-9]/g, '-');
We're discarding all non alpha-numeric chars and dropping in a -, you seem to prefer / -- whatever, just get the input consistent-ish. We keep the alpha so we can deal with March 18, 2012 too.
The snippet then parses through the input, extracting time (if give, uses : to identify), then it establishes a year. As pointed out in the comments, the day and month are next to each other in most reasonable formats, so you're looking to establish what is NOT the year and going from there. It is then a process of elimination to determine the month, then the day.
Not my code, so I don't mean to take credit for the idea, but again, the thing delivers as advertised. You can either use it as-is (BSD license), or read through the source and dissect the concept.
Here is the code, for posterity:
/**
* #author Joey Mazzarelli
* #website http://bitbucket.org/mazzarelli/js-date/
* #website http://joey.mazzarelli.com/2008/11/25/easy-date-parsing-with-javascript/
* #copyright Joey Mazzarelli
* #license BSD license
*/
Date.fromString = (function () {
var defaults = {
order : 'MDY',
strict : false
};
var months = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG",
"SEP", "OCT", "NOV", "DEC"];
var abs = ["AM", "PM", "AFTERNOON", "MORNING"];
var mark = function (str, val) {
var lval = val.toLowerCase();
var regex = new RegExp('^' + lval + '|(.*[^:alpha:])' + lval, 'g');
return str.replace(regex, '$1' + val);
};
var normalize = function (str) {
str = str.toLowerCase();
str = str.replace(/[^:a-z0-9]/g, '-');
for (var i=0; i<months.length; i++) str = mark(str, months[i]);
for (var i=0; i<abs.length; i++) str = mark(str, abs[i]);
str = str.replace(/[a-z]/g, '');
str = str.replace(/([0-9])([A-Z])/g, '$1-$2');
str = ('-' + str + '-').replace(/-+/g, '-');
return str;
};
var find_time = function (norm) {
var obj = {date:norm, time:''};
obj.time = norm.replace(
/^.*-(\d\d?(:\d\d){1,2}(:\d\d\d)?(-(AM|PM))?)-.*$/, '$1');
if (obj.time == obj.date)
obj.time = norm.replace(/^.*-(\d\d?-(AM|PM))-.*$/, '$1');
if (obj.time == obj.date) obj.time = '';
obj.date = norm.replace(obj.time, '');
obj.time = ('-' + obj.time + '-').replace(/-+/g, '-');
obj.date = ('-' + obj.date + '-').replace(/-+/g, '-');
return obj;
};
var find_year = function (norm) {
var year = null;
// Check for a 4-digit year
year = norm.replace(/^.*-(\d\d\d\d)-.*$/, '$1');
if (year != norm) return year; else year = null;
// Check for a 2-digit year, over 32.
year = norm.replace(/^.*-((3[2-9])|([4-9][0-9]))-.*$/, '$1');
if (year != norm) return year; else year = null;
// Day is always by month, so check for explicit months in
// first or third spot
year = norm.replace(/^.*-[A-Z]{3}-\d\d?-(\d\d?)-.*$/, '$1');
if (year != norm) return year; else year = null;
year = norm.replace(/^.*-(\d\d?)-\d\d?-[A-Z]{3}-.*$/, '$1');
if (year != norm) return year; else year = null;
// If all else fails, use the setting for the position of the year.
var pos = '$3';
if (defaults.opts.order.charAt(0) == 'Y') pos = '$1';
else if (defaults.opts.order.charAt(1) == 'Y') pos = '$2';
year = norm.replace(/^.*-(\d\d?)-([A-Z]{3}|\d{1,2})-(\d\d?)-.*$/, pos);
if (year != norm) return year; else year = null;
return year;
};
var find_month = function (norm, year) {
// Check for an explicity month
var matches = norm.match(/[A-Z]{3}/);
if (matches && matches.length) return matches[0];
// Remove the year, and unless obviously wrong, use order
// to chose which one to use for month.
var parts = norm.replace(year + '-', '').split('-');
if (parts.length != 4) return null;
var order = defaults.opts.order;
var md = order.indexOf('M') < order.indexOf('D')? 1: 2;
return (parseInt(parts[md], 10) <= 12)? parts[md]: parts[md==1? 2: 1];
};
var find_day = function (norm, year, month) {
return norm.replace(year, '').replace(month, '').replace(/-/g, '');
};
var create_absolute = function (obj) {
var time = obj.time.replace(/[-APM]/g, '');
var parts = time.split(':');
parts[1] = parts[1] || 0;
parts[2] = parts[2] || 0;
parts[3] = parts[3] || 0;
var ihr = parseInt(parts[0], 10);
if (obj.time.match(/-AM-/) && ihr == 12) parts[0] = 0;
else if (obj.time.match(/-PM-/) && ihr < 12) parts[0] = ihr + 12;
parts[0] = ("0" + parts[0]).substring(("0" + parts[0]).length - 2);
parts[1] = ("0" + parts[1]).substring(("0" + parts[1]).length - 2);
parts[2] = ("0" + parts[2]).substring(("0" + parts[2]).length - 2);
time = parts[0] + ":" + parts[1] + ":" + parts[2];
var millisecs = parts[3];
var strict = defaults.opts.strict;
if (!obj.year && !strict) obj.year = (new Date()).getFullYear();
var year = parseInt(obj.year, 10);
if (year < 100) {
year += (year<70? 2000: 1900);
}
if (!obj.month && !strict) obj.month = (new Date()).getMonth() + 1;
var month = String(obj.month);
if (month.match(/[A-Z]{3}/)) {
month = "JAN-FEB-MAR-APR-MAY-JUN-JUL-AUG-SEP-OCT-NOV-DEC-"
.indexOf(month) / 4 + 1;
}
month = ("0" + month).substring(("0" + month).length - 2);
if (!obj.day && !strict) obj.day = (new Date()).getDate();
var day = ("0" + obj.day).substring(("0" + obj.day).length - 2);
var date = new Date();
date.setTime(Date.parse(year + '/' + month + '/' + day + ' ' + time));
date.setMilliseconds(millisecs);
return date;
};
var parse = function (norm) {
return absolute(norm);
};
var absolute = function (norm) {
var obj = find_time(norm);
obj.norm = norm;
obj.year = find_year(obj.date);
obj.month = find_month(obj.date, obj.year);
obj.day = find_day(obj.date, obj.year, obj.month);
return create_absolute(obj);
};
return function (fuzz, opts) {
defaults.opts = { order: defaults.order, strict: defaults.strict };
if (opts && opts.order) defaults.opts.order = opts.order;
if (opts && opts.strict != undefined) defaults.opts.strict = opts.strict;
var date = parse(normalize(fuzz));
return date;
};
})();