We Keep Coding

Javascript function to every textfield that calls the function

I have written a simple javascript function that takes the input of a date textfield and convert it to dd-mm-yyyy format.
function dateConvert(dateValue) {
if(dateValue == null) {
var grDate = null;
}
else {
var n = dateValue.search("/");
if( n >= 0) {
var res = dateValue.split("/");
var day = res[0];
if( day.length == 1 ) {
day = "0"+day;
}
var month = res[1];
if( month.length == 1 ) {
month = "0"+month;
}
var year = res[2];
var grDate = day+"-"+month+"-"+year;
/*alert(grDate);*/
}
else {
var grDate = dateValue;
}
}
document.getElementById("mydate").value = grDate;
}
<input type="text" name="mydate" id="mydate" onblur="dateConvert(this.value)" />
Is there a way to make function "global" and use it to every textfield that calls the function without having to write it e.g. 3 times if I want to use it in 3 different date textfields?

Thanks for the replay to Dominik. Make my mind spin
I didn't use event listener but querySelectorAll
Here is the correct version. It works fine
function myFunction() {
var x = document.querySelectorAll(".mydate");
var i;
for (i = 0; i < x.length; i++) {
var dateValue = x[i].value;
if(dateValue == null) {
var grDate = null;
}
else {
var n = dateValue.search("/");
if( n >= 0) {
var res = dateValue.split("/");
var day = res[0];
if( day.length == 1 ) {
day = "0"+day;
}
var month = res[1];
if( month.length == 1 ) {
month = "0"+month;
}
var year = res[2];
var grDate = day+"-"+month+"-"+year;
/*alert(grDate);*/
}
else {
var grDate = dateValue;
}
}
x[i].value = grDate;
}
}
for inputs
<p><input type="text" name="field1" class="mydate" onblur="myFunction()" /></p>
<p><input type="text" name="field2" class="mydate" onblur="myFunction()" /></p>
<p><input type="text" name="field3" class="mydate" onblur="myFunction()" /></p>

Excellent question - because this is the perfect example where a custom element solves the problem.
It's really easy:
customElements.define('my-date', class extends HTMLInputElement {
constructor() {
super();
this.dateConvert = this.dateConvert.bind(this);
this.addEventListener('blur', this.dateConvert);
}
dateConvert() {
if (this.value) {
let n, res, day, month, year;
n = this.value.search("/");
if (n >= 0) {
res = this.value.split("/");
day = res[0];
if (day.length == 1) {
day = "0" + day;
}
month = res[1];
if (month.length == 1) {
month = "0" + month;
}
year = res[2];
this.value = `${day}-${month}-${year}`;
}
}
}
}, { extends: 'input' });
<input is="my-date" />
Now you can even add new date inputs dynamically and they come with your behaviour automatically. No fuddling around in the DOM, just an element that does exactly what you need any time it's in the HTML anywhere.
Please note that unfortunately Safari does not support customizing built-in elements, so you either will have to resort to a polyfill (check https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements or https://github.com/ungap/custom-elements#readme) for that, or use an autonomous custom elements like this:
customElements.define('my-date', class extends HTMLElement {
constructor() {
super();
this.input = document.createElement('input');
this.appendChild(this.input);
this.dateConvert = this.dateConvert.bind(this);
this.input.addEventListener('blur', this.dateConvert);
}
dateConvert() {
if (this.value) {
let n, res, day, month, year;
n = this.value.search("/");
if (n >= 0) {
res = this.value.split("/");
day = res[0];
if (day.length == 1) {
day = "0" + day;
}
month = res[1];
if (month.length == 1) {
month = "0" + month;
}
year = res[2];
this.value = `${day}-${month}-${year}`;
}
}
}
get value() {
return this.input.value;
}
set value(val) {
this.input.value = val;
}
});
<my-date></my-date>
Just as a sidenote, you might want to consider using the built-in API for dateTime conversion/formatting:
https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat

how to get previous month and next month results on html using javascript

I have this code which you can select date and get results according to it. Now in the place of months and years selection i want a button that shows previous month and another button that shows next month. Like that Next day and previous day. Can someone please help me with this code snippet.
1. Button one - Previous month
2. Button two - Next month
3. Button three - Previous Day
4. Button four - Next Day
All results should be on HTML page.
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE TYPE="text/css">
TD, TH {text-align:center}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function getFirstDay(theYear, theMonth){
var firstDate = new Date(theYear,theMonth,1)
return firstDate.getDay()
}
function getMonthLen(theYear, theMonth) {
var oneDay = 1000 * 60 * 60 * 24
var thisMonth = new Date(theYear, theMonth, 1)
var nextMonth = new Date(theYear, theMonth + 1, 1)
var len = Math.ceil((nextMonth.getTime() -
thisMonth.getTime())/oneDay)
return len
}
var theMonths = ["January","February","March","April","May","June","July","August",
"September","October","November","December"]
function getObject(obj) {
var theObj
if (document.all) {
if (typeof obj == "string") {
return document.all(obj)
} else {
return obj.style
}
}
if (document.getElementById) {
if (typeof obj == "string") {
return document.getElementById(obj)
} else {
return obj.style
}
}
return null
}
function populateTable(form) {
var theMonth = form.chooseMonth.selectedIndex
var theYear = parseInt(form.chooseYear.options[form.chooseYear.selectedIndex].text)
// initialize date-dependent variables
var firstDay = getFirstDay(theYear, theMonth)
var howMany = getMonthLen(theYear, theMonth)
// fill in month/year in table header
getObject("tableHeader").innerHTML = theMonths[theMonth] +
" " + theYear
// initialize vars for table creation
var dayCounter = 1
var TBody = getObject("tableBody")
// clear any existing rows
while (TBody.rows.length > 0) {
TBody.deleteRow(0)
}
var newR, newC
var done=false
while (!done) {
// create new row at end
newR = TBody.insertRow(TBody.rows.length)
for (var i = 0; i < 7; i++) {
// create new cell at end of row
newC = newR.insertCell(newR.cells.length)
if (TBody.rows.length == 1 && i < firstDay) {
// no content for boxes before first day
newC.innerHTML = ""
continue
}
if (dayCounter == howMany) {
// no more rows after this one
done = true
}
// plug in date (or empty for boxes after last day)
newC.innerHTML = (dayCounter <= howMany) ?
dayCounter++ : ""
}
}
}
function fillYears() {
var today = new Date()
var thisYear = today.getFullYear()
var yearChooser = document.dateChooser.chooseYear
for (i = thisYear; i < thisYear + 5; i++) {
yearChooser.options[yearChooser.options.length] = new Option(i, i)
}
setCurrMonth(today)
}
// set month choice to current month
function setCurrMonth(today) {
document.dateChooser.chooseMonth.selectedIndex = today.getMonth()
}
</SCRIPT>
</HEAD>
<BODY onLoad="fillYears(); populateTable(document.dateChooser)">
<H1>Calender</H1>
<HR>
<TABLE style="width:100%;height:80%;" ID="calendarTable" BORDER=1 ALIGN="center">
<TR>
<TH ID="tableHeader" COLSPAN=7></TH>
</TR>
<TR><TH>Sun</TH><TH>Mon</TH><TH>Tue</TH><TH>Wed</TH>
<TH>Thu</TH><TH>Fri</TH><TH>Sat</TH></TR>
<TBODY ID="tableBody"></TBODY>
<TR>
<TD COLSPAN=7>
<P>
<FORM NAME="dateChooser">
<SELECT NAME="chooseMonth"
onChange="populateTable(this.form)">
<OPTION SELECTED>January<OPTION>February
<OPTION>March<OPTION>April<OPTION>May
<OPTION>June<OPTION>July<OPTION>August
<OPTION>September<OPTION>October
<OPTION>November<OPTION>December
</SELECT>
<SELECT NAME="chooseYear" onChange="populateTable(this.form)">
</SELECT>
</FORM>
</P></TD>
</TR>
</TABLE>
</BODY>
</HTML

I suggest to use moment.js. It helps alot when you work with time and date.
e.g. after pressing a button "next month" you can use moment().add(1, 'months') to add 1 month to your current date. you can store the date after switching e.g. on data attributes or hidden input or ...
complete documentation you can find on https://momentjs.com/docs/

Errors while calculating time difference

actual output and expected outputs are mentioned in snapshots :[Snapshot of case 1][1][Snap Shot of Case2 ][2].
I get errors while calculating time difference between start-time and end-time. The errors:
If start-time is greater than end-time then calculation is wrong.
If weekends is included and start-time is greater than end-time.
Please suggest how to resolve the errors in my code.
// Wire up Date and DateTime pickers (with default values)
$("#start").datetimepicker();
$("#end").datetimepicker();
$("#workday_start").timepicker({
hour: 8
}).val("8:00");
$("#workday_end").timepicker({
hour: 17
}).val("17:00");
// Calculate the number of hours worked
$("#calculate").click(function() {
// Are all fields complete?
var allFieldsComplete = $('.data input').filter(function() {
return $(this).val().toString().length == 0;
}).length == 0;
// Ensure all fields are present
if (allFieldsComplete) {
// Capturing the input dates
var startDate = moment($("#start").val());
var endDate = moment($("#end").val());
var daysDiff = endDate.diff(startDate, 'days');
// Capturing the input times
var startTime = startDate.hours();
var endTime = endDate.hours();
var timeDiff;
var operational_hr_start = new Date("1/1/0001 " + $("#workday_start").val()).getHours() + (new Date("1/1/0001 " + $("#workday_start").val()).getMinutes() / 60)
var operational_hr_end = new Date("1/1/0001 " + $("#workday_end").val()).getHours() + (new Date("1/1/0001 " + $("#workday_end").val()).getMinutes() / 60);
var includeWeekends = $('input[type=checkbox]').prop('checked');
if (startTime < operational_hr_start) {
startTime = operational_hr_start;
}
if (endTime > operational_hr_end) {
endTime = operational_hr_end;
}
timeDiff = endTime - startTime;
if (daysDiff > 0) {
var response= workingHoursBetweenDates(startDate, endDate, operational_hr_start, operational_hr_end, includeWeekends);
$("#result").val(response);
} else if (daysDiff === 0) {
var dayNo = startDate.day();
if (dayNo === 0 || dayNo === 6) {
alert('Weekend!!!');
return;
} else {
if (timeDiff > 0) {
alert('Total hours worked: ' + timeDiff);
} else {
alert('End time must be greater than start time!!!');
}
}
} else {
alert('End date must be greater than start date!!!');
}
} else {
// One or more of the fields is undefined or empty
alert("Please ensure all fields are completed.");
}
});
});
// Simple function that accepts two parameters and calculates the number of hours worked within that range
function workingHoursBetweenDates(startDate, endDate, operationalHourStart, operationalHourEnd, includeWeekends) {
var incrementedDate = startDate;
var daysDiff = endDate.diff(startDate, 'days');
var workingHrsPerDay = operationalHourEnd - operationalHourStart;
var startHrs = startDate.hours(),
endHrs = endDate.hours(),
totalHoursWorked = 0;
if (startDate.hours() < operationalHourStart) {
startHrs = operationalHourStart;
}
if (endDate.hours() > operationalHourEnd) {
endHrs = operationalHourEnd;
}
/*
* The below block is to calculate the duration for the first day
*
*/
{
totalHoursWorked = operationalHourEnd - startHrs;
if (startDate.day() === 0 || startDate.day() === 6) {
totalHoursWorked = 0;
if (includeWeekends) {
totalHoursWorked = operationalHourEnd - startHrs;
}
}
incrementedDate = incrementedDate.add(1, 'day');
}
/*
* The below if block is to calculate the duration for the last day
*
*/
{
var lastDayWorkHrs = endHrs - operationalHourStart;
totalHoursWorked = totalHoursWorked + lastDayWorkHrs;
if (endDate.day() === 0 || endDate.day() === 6) {
if (includeWeekends) {
totalHoursWorked = totalHoursWorked + lastDayWorkHrs;
} else {
totalHoursWorked = totalHoursWorked - lastDayWorkHrs;
}
}
}
// The below for block calculates the total no. of hours excluding weekends. Excluding first and last day
for (var i = 1; i < daysDiff; i++) {
/*
* Weekname mapping. There are default week
* numbers (i.e., 0 to 6. 0 means Sunday, 1 means Monday, ... 6 means Saturday)
* which are returned by moment library.
*
*/
if (incrementedDate.day() === 0 || incrementedDate.day() === 6) {
// Do nothing
if (includeWeekends) {
totalHoursWorked = totalHoursWorked + workingHrsPerDay;
}
} else {
totalHoursWorked = totalHoursWorked + workingHrsPerDay;
}
incrementedDate = incrementedDate.add(1, 'day');
}
return totalHoursWorked;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<pre>Variables</pre>
<table>
<tr>
<th>START</th>
<th>END</th>
<th>WORKDAY START</th>
<th>WORKDAY END</th>
<th>Result</th>
<th>INCLUDE WEEKENDS?</th>
</tr>
<tr class='data'>
<th><input id='start' /></th>
<th><input id='end' /></th>
<th><input id='workday_start' /></th>
<th><input id='workday_end' /></th>
<th><input id='result' value=" "/></th>
<th><input id='include_weekends' type='checkbox' /></th>
</tr>
</table>
<hr />
<input id='calculate' type='button' value='Calculate Hours Worked' />

short date range for selected date checkbox

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.

how to calculate the duration of year when user entered the date in textbox

How to display the duration?When the dated is entered in textbox,in next field the total number of years(duration).
Example:
if user entered 09/11/2015.it should be displayed as 0.5 as value,by comparing to today's date.
`Now i use the script script
function cal()
{
obj = document.getElementById("Date");
if (obj != null) {
if (obj.value != "") {
var year = obj.value.split("/")[2];
var today = new Date();
if (year > today.getFullYear()) {
alert("Invalid Year");
document.getElementById("Date").value = "";
document.getElementById("year").value = "";
}
else {
document .getElementById("year").value = today.getFullYear() - year;
} }
}
}
`

function aa(){
var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
var firstDate = new Date(2016,04,12);
var secondDate = new Date(2016,04,25);
var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay)));
alert(diffDays+" Day(s)");
//document.getElementById('test').innerHTML=diffDays;
}
<button onClick="aa()">
Click
</button>