JS/HTML Date picker enforce rule to ensure input is today - javascript

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'>

Related

How to insert space between two values while using protractor?

I am creating a script to enter date in some specific field, the format it requires is MMM DD, YYYY, as you can see format has 2 spaces one between month name and date and other between comma and year. I searched so many places and tried below code but it returns value as NaN, 2018 my code is listed below-
this.getCurrentDate = function () {
var d = new Date();
var currentDate = d.getDate();
var currentMonth = d.getMonth()+1;
var currentYear = d.getFullYear();
if (currentDate < 10){
currentDate = '0'+currentDate;
}
if (currentMonth < 10){
currentMonth = '0'+currentMonth;
}
var today = currentMonth + '\xa0' + currentDate-1 + ',' + '\xa0' + currentYear;
console.log(today);
return today;
};
Your issue lies with this line of code:
var today = currentMonth + '\xa0' + currentDate-1 + ',' + '\xa0' + currentYear;
So previously you set these two variables to strings:
if (currentDate < 10){
currentDate = '0'+currentDate;
}
if (currentMonth < 10){
currentMonth = '0'+currentMonth;
}
In the variable today at currentDate you're trying to subtract the integer 1 from a string. Hence, NaN (Not a Number).
You are subtracting 1 from a string which is causing error.
this.getCurrentDate = function () {
var d = new Date();
var currentDate = d.getDate();
var currentMonth = d.getMonth()+1;
var currentYear = d.getFullYear();
if (currentDate < 10){
currentDate = '0'+currentDate;
}
if (currentMonth < 10){
currentDate--; //Fixed here.
currentMonth = '0'+currentMonth;
} //removed -1 from current date
var today = currentMonth + '\xa0' + currentDate + ',' + '\xa0' + currentYear;
console.log(today);
return today;
};
You have to subtract value from a number before you change it to a string. This will work now.

How to convert millisecond(1304921325178.3193) to 'yyyy-mm-dd' in javascript?

How to convert 1304921325178.3193 to yyyy-mm-dd -> in javascript?
I use highchart and I would like to convert data(xAxis[0]0) to yyyy-mm-dd.
I tried to parse the millisecond using this function
function(valTime) {
var date = new Date(valTime);
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
m = (m < 10) ? '0' + m : m;
d = (d < 10) ? '0' + d : d;
return [y, m, d].join('-');
}
However, there is a gap between actual date(2015-01-26) and selected date in the chart (2015-01-29).
captured image
I guess if I calculate .3193, the date will be matched.
Is there any way to get the right date from the millisecond?
Your ms are actually pointing to 2011-05-09T06:08:45.178Z:
var date = new Date(1304921325178.3193); // Date 2011-05-09T06:08:45.178Z
var year = date.getFullYear();
var month = ("0" + (date.getMonth() + 1)).slice(-2);
var day = ("0" + date.getDate()).slice(-2);
console.log(`${year}-${month}-${day}`); // 2011-05-09

I am getting a function undefined error with my javascript function

I'm trying to calculate the age of a person based on an 8 digit input. When I try to run the code it says TypeError undefined is not a function..
var calcAge = function (dob) {
var age,
mm = dob.substring(0, 2),
dd = dob.substring(2, 4),
yyyy = dob.substring(4, 8),
d = new Date(),
currentDay = d.getDay,
currentMonth = (d.getMonth() + 1) < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1,
currentYear = d.getFullYear;
if (parseInt("" + mm + dd) >= parseInt("" + currentMonth + currentDay)) {
age = currentYear - yyyy;
} else {
age = (currentYear - yyyy) - 1;
};
return age;
};
d.getDay() and d.getFullYear() are functions not string values,you were using getDay() which returns the dayofweek instead of getDate() and your final test was a little off.
var calcAge = function (dob) {
var age,
mm = dob.substring(0, 2),
dd = dob.substring(2, 4),
yyyy = dob.substring(4, 8),
d = new Date(),
currentDay = d.getDate(),
currentMonth = (d.getMonth() + 1) < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1,
currentYear = d.getFullYear();
if (parseInt("" + mm + dd) <= parseInt("" + currentMonth + currentDay)) {
age = currentYear - yyyy;
} else {
age = (currentYear - yyyy) - 1;
};
return age || false;
};
using these tests it seems correct now
calcAge('02191964');//returns 51
calcAge('02201964');// 51
calcAge('02211964');//50
If you are passing in the dob parameter as 8 integers your substring calls will return the error you are seeing.

Add day(s) in a date in Javascript

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;
}

Set new date 12 months after in a form

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 '';
}
}

Categories

Resources