I want to calculate the difference date from my input from and the client can determine the how many days. After that it will calculate after i choose "1 days" or "2 days", and show the result of addition dates in my input with "to" as an id.
setdate didn't add correctly from my option value. I'm using getDuration to retrieve the value in option. I assume that variable can add my setDate.
<select name="duration" id="duration" class="form-control" onchange="run(this.value)">
<script>
function run(val) {
var formDuration = document.getElementById("duration");
var getDuration = formDuration.options[formDuration.selectedIndex].value;
// alert(getDuration);
document.getElementById("from").addEventListener("change", function() {
var input = new Date(this.value);
var newdate = new Date(input);
var temp = newdate.getDate();
var calculate = temp + getDuration;
newdate.setDate(calculate);
var dd = newdate.getDate();
var mm = newdate.getMonth() + 1;
var yyyy = newdate.getFullYear();
if (dd < 10) {
dd = '0' + dd;
}
if (mm < 10) {
mm = '0' + mm;
}
var someFormattedDate = mm + '/' + dd + '/' + yyyy;
document.getElementById('to').value = someFormattedDate;
});
}
(function() {
var elm = document.getElementById('duration'),
df = document.createDocumentFragment();
for (var i = 1; i <= 12; i++) {
var option = document.createElement('option');
option.value = i;
option.appendChild(document.createTextNode(i + " days"));
df.appendChild(option);
}
elm.appendChild(df);
}());
</script>
</select>
dates in this format : mm/dd/yyyy
example 1
from : 07/01/2019
duration : 1 days
to : 07/11/2019
example 2
from : 07/02/2019
duration : 1 days
to : 07/21/2019
example 3
from : 07/03/2019
duration : 1 days
to : 07/31/2019
expected results
from : 07/01/2019
duration : 1 days
to : 07/02/2019
Related
When creating a date picker, I have it set to only allow today onwards. which works... But it appears that the user can then tab into the field and change the date to "before" today. Is there a way to enforce the "must be today or future date" rule?
Here is my example;
var today = new Date();
var d = today.getDate();
var m = today.getMonth() + 1;
var y = today.getFullYear();
if (d < 10) {
d = '0' + d
}
if (m < 10) {
m = '0' + m
}
today = y + '-' + m + '-' + d;
document.getElementById("datePicker").setAttribute("min", today);
<input id="datePicker" type='date' >
use EventListener to listen and set the value of your input to today date when entered value is lower than today
var today = new Date();
var d = today.getDate();
var m = today.getMonth() + 1;
var y = today.getFullYear();
if (d < 10) {
d = '0' + d
}
if (m < 10) {
m = '0' + m
}
today = y + '-' + m + '-' + d;
const input = document.getElementById("datePicker")
input.setAttribute("min", today);
input.addEventListener('change', (event) => {
const d1 = new Date(today);
const d2 = new Date(event.target.value);
if(d1.getTime() > d2.getTime()){
event.target.value = today
}
});
<input id="datePicker" type='date'>
I'm trying to create a function that creates a dynamic date range based on the date supplied in a string.
What I've done so far:
Capture date in the string I'm looking to change;
Check to see if that date is a Thursday (if so the range will need to account for the weekend)
What I need to do:
Find a way to get the second date in the range to account for the weekend;
Find a way to make sure that the second date takes into account the last day of the month.
Apologies for old syntax, GTM doesn't like anything using ES6 so I'm a little constrained on this project.
Note I am using DD/MM/YYYY
var regex = /[\d\/\d\/\d]/g;
var text = document.querySelector('.shipmentLineTitle b');
var originalDate = text.innerText.match(regex, "");
if (originalDate.length > 10) {
originalDate.pop();
originalDate.join('');
}
var ogDateString = originalDate.join('');
var dayNumber = originalDate.splice(0, 2).join('');
var monthNumber = originalDate.splice(1, 2).join('');
var yearNumber = originalDate.splice(2, 4).join('');
// if originalDate is a thursday (5) dynamicString will need to be a Monday (1).
var date = new Date(yearNumber, monthNumber -1, dayNumber);
var dynamicDateString = "";
if (date.getDay == 5) {
var newDate = new Date(date) + (86400000 * 3);
var dd = newDate.getDate();
var mm = newDate.getMonth() +1;
var yy = newDate.getFullYear();
dymamicDateString = dd + '/' + mm + '/' + yy;
} else {
var newDate = new Date(date) + 86400000;
var dd = newDate.getDate();
var mm = newDate.getMonth() +1;
var yy = newDate.getFullYear();
dynamicDateString = dd + '/' + mm + '/' + yy;
}
var newContent = 'Delivery will be made between ' + ogDateString + ' - ' + dynamicDateString + '. An accurate delivery date will be provided after you place your order.';
text.innerText = newContent;
<span class="shipmentLineTitle">Delivery details: <b>your delivery will arrive on 09/10/2020 (1 delivery)</b></span>
Thursday is day 4
Here is a simpler script
var textField = document.querySelector('.shipmentLineTitle b'),
text = textField.innerText,
originalDate = text.match(/\d{2}\/\d{2}\/\d{4}/)[0].split("/"),
dayNumber = +originalDate[0],
monthNumber = +originalDate[1],
yearNumber = +originalDate[2],
date = new Date(yearNumber, monthNumber - 1, dayNumber, 15, 0, 0, 0),
aDay = 86400000,
newDate = new Date(date),
day = date.getDay(),
daysToAdd = 1; // Sunday to Wednesday
// if originalDate is a Thursday (4) or Saturday (6), dynamicString will need to be a Monday (1).
if (day === 4) daysToAdd = 4; // Thursday - delivery Monday
else if (day === 6) daysToAdd = 2; // Saturday
newDate.setDate(newDate.getDate() + daysToAdd);
var dd = newDate.getDate(),
mm = newDate.getMonth() + 1,
yy = newDate.getFullYear(),
dynamicDateString = dd + '/' + mm + '/' + yy,
newContent = text + ' - ' + dynamicDateString + '</b>. An accurate delivery date will be provided after you place your order.';
textField.innerHTML = newContent;
<span class="shipmentLineTitle">Delivery details: <b>your delivery will arrive on 08/10/2020 (1 delivery)</b></span>
I would suggest to user moment.js a very good date library to manipulate dates. It has lot of function to add/substract dates, hours, days etc.
There is https://www.npmjs.com/package/moment-business-days which servers exactly what you need
I have textbox displaying date and have a button. the function in button is to add 7 days and display in textbox. my code:
function onNext() {
var startdate = document.getElementById('date').value;
var addday = new Date(startdate);
var dd = addday.getDate() + 7;
var mm = addday.getMonth() + 1;
var y = addday.getFullYear();
var displaydate = y + '/' + mm + '/' + dd;
document.getElementById('date').value = displaydate ;
}
The issue how to add a day to go to the next month.
Example the date in Textbox is 2014/08/25 when I click the button the date will be 2014/09/01
Just add 7 days to your date, date already handles change of month/year:
function onNext() {
var startdate = document.getElementById('date').value;
var addday = new Date(startdate);
addday.setDate(addday.getDate() + 7);
var dd = addday.getDate() + 7;
var mm = addday.getMonth() + 1;
var y = addday.getFullYear();
var displaydate = y + '/' + mm + '/' + dd;
document.getElementById('date').value = displaydate ;
}
If you just do this
var dd = addday.getDate() + 7;
var mm = addday.getMonth() + 1;
var y = addday.getFullYear();
that means if date is 21.12.2014 the output will be 28.13.2014
function onNext() {
var startdate = document.getElementById('date').value;
var d2 = new Date(startdate);
d2.setMonth(d2.getMonth()+1);
d2.setDate(1); // you can set here whatever date you want
document.getElementById('date').value = d2.getFullYear() + '/' + d2.getMonth() + '/' + d2. getDate();
}
Use this function
function updateAb(s){//format dd/mm/yyyy chnage according to your need
var dmy = s.split("/");
var joindate = new Date(
parseInt(dmy[2], 10),
parseInt(dmy[1], 10) - 1,
parseInt(dmy[0], 10)
);
var data_days=7;
joindate.setDate(joindate.getDate() + data_days);
var cc=("0" + joindate.getDate()).slice(-2) + "/" +("0" + (joindate.getMonth() + 1)).slice(-2) + "/" +joindate.getFullYear();
document.getElementById("datepickerdisabled1").value=cc;
}
I am using the following to get the current date:-
var dateObj = new Date();
var month = dateObj.getUTCMonth() + 1;
var day = dateObj.getUTCDate();
var year = dateObj.getUTCFullYear();
var newdate = day + "/" + month + "/" + year;
If I alert(newdate); it shows:-
3/06/2013
Is there any way I can display this as:-
03/06/2013
With plain Javascript, only manually
if (day < 10) day = "0" + day;
if (month < 10) month = "0" + month;
If you want to avoid using a library, and don't mind an extra line in your JavaScript:
var day = dateObj.getUTCDate(),
dd = parseInt(day, 10) < 10 ? '0' + day : day;
Using JQuery DateFormat:
$.format.date(dateObj.toString(), "dd/MM/yyyy");
var mydate=new Date();
alert(mydate.toString('dd/MM/yyyy'));
function padWithZeroes(number, width)
{
while (number.length < width)
number = '0' + number;
return number;
}
Now call day = padWithZeroes(day, 2) (and likewise for the month) before you use it.
You can split it and create your own format:
var splitTime = newDate.split("/");
var day = splitTime[0];
var month = splitTime[1];
var year = splitTime[2];
if (day < 10){
day = "0" + day;
}
var myDate = day + '/' + month + '/' + year;
Living demo:
http://jsfiddle.net/rtqpp/
Please use the following:
var dateObj = new Date();
var month = ('0' + (dateObj.getUTCMonth() + 1) ).slice( -2 );;
var day = ('0' + (dateObj.getUTCDate() + 1) ).slice( -2 );
var year = dateObj.getUTCFullYear();
var newdate = day + "/" + month + "/" + year;
I am very new to script and checked many answers but could not find the complete answer.
In a form, I have a start date, number of months and end date - I want to display the end date when the start date is entered - I have created this script but I must be missing something.
Here's my code:
[script type="text/javascript" src=Datejs][/js]
[script type="text/javascript" ]
window.onload = function() {
var startdateEl = document.getElementById("customFields_cf_232");
var leasetermEl = document.getElementById("customFields_cf_34");
var enddateEl = document.getElementById("customFields_cf_38");
function CalculateDate {
var enddateEl=leasetermEl.months().startdateEl;
}
var enddateEl.onblur = CalculateDate;
};
[/script]
I made this. It listens to your keystrokes live. http://jsfiddle.net/4t54J/
<input name="startDate" type="text" value="MM-DD-YYYY" />
<input name="endDate" type="text" />
var SECOND = 1000;
var MINUTE = SECOND * 60;
var HOUR = MINUTE * 60;
var DAY = HOUR * 24;
var YEAR = DAY * 365.25;
var startDateInput = 'input[name="startDate"]';
var endDateInput = 'input[name="endDate"]';
$(startDateInput).live('keypress', function (e) {
var startDate = $(startDateInput).val();
var endDate = setEndDate(startDate);
$(endDateInput).val(endDate);
});
function setEndDate(startDate) {
var date = new Date();
var parts = startDate.split('-');
if (date != '' && parts.length > 2) {
// year, month (0-based), day
date.setFullYear(parts[2], parts[0] - 1, parts[1]);
date.setTime(date.getTime() + YEAR);
var mm = date.getMonth() + 1;
mm = (mm < 10 ? '0' : '') + mm.toString();
var dd = date.getDate();
var yyyy = date.getFullYear();
return mm + "-" + dd + "-" + yyyy;
} else {
return '';
}
}