How setattribute value input date? - javascript

How would you set the value adding day+1 from the current date in JavaScript?
I have this:
<input type="date" id="mycalendar" >
try to set value:
var datedft = document.getElementById('mycalendar').value;
var date = new Date(datedft);
var newdate = new Date(date);
newdate.setDate(newdate.getDate());
var dd = newdate.getDate();
var mm = newdate.getMonth() + 2;
var y = newdate.getFullYear();
var newformat =y+'-'+mm+'-'+dd ;
document.getElementById('mycalendar').value = newformat
In my console Browser I got:
The specified value "2020-10-1" does not conform to the required
format, "yyyy-MM-dd".

The required format is "yyyy-MM-dd", so your date string value should be "2020-10-01".
var newFormat = y.toString().padStart(4, '0') + '-' + mm.toString().padStart(2, '0') + '-' + dd.toString().padStart(2, '0');

If the date format is absolutely critical to the functioning of the webpage, then we will need to make that choice. Below is a code snippet with the date format altered to the YYYY-MM-DD format.
<input type="text" name="input" placeholder="YYYY-MM-DD" required
pattern="(?:19|20)\[0-9\]{2}-(?:(?:0\[1-9\]|1\[0-2\])-(?:0\[1-9\]|1\[0-9\]|2\[0-9\])|(?:(?!02)(?:0\[1-9\]|1\[0-2\])-(?:30))|(?:(?:0\[13578\]|1\[02\])-31))" />

I believe you're asking how to get the correct format when the day(getDate()) is less than 10.
var datedft = document.getElementById('mycalendar').value;
var date = new Date(datedft);
var newdate = new Date(date);
newdate.setDate(newdate.getDate());
var dd = newdate.getDate();
var updatedDD = dd >= 10 ? dd : `0${dd}`; // updated line
var mm = newdate.getMonth() + 2;
var y = newdate.getFullYear();
var newformat =y+'-'+mm+'-'+updatedDD ; // updated line
document.getElementById('mycalendar').value = newformat

I think you want to add one day to the date which user has selected. please check the code snippet.
function onChangeDate() {
var datedft = document.getElementById('mycalendar').value;
var date = new Date(datedft);
date.setDate(date.getDate() + 1)
var newformat = date.toISOString().substr(0, 10)
document.getElementById('mycalendar').value = newformat
}
<input type="date" id="mycalendar" onchange='onChangeDate()'>

The below code will set the next day date in "mycalendar"
const today = new Date(); // today's date
const tomorrow = new Date(today.setDate(today.getDate() + 1)); // tomorrow's date
document.getElementById('mycalendar').value = tomorrow.toISOString().split('T')[0];
<input type="date" id="mycalendar" >

Related

How to change format to standard time JavaScript

I have a date string in JavaScript which is arranged in a particular manner. How do I rearrange this in order to fit standard time?
let date = "2020-06-01T00:00:00Z"
How do I rearrange the date variable in order to match the format MM/DD, YYYY ?
Change your code to as follows:
let date = "2020-06-01T00:00:00Z";
date = new Date(date);
var dd = date.getDate();
var mm = date.getMonth()+1;
var yyyy = date.getFullYear();
if(dd<10){dd='0'+dd}
if(mm<10){mm='0'+mm};
console.log(mm+'/'+dd+', '+yyyy)
i don't real know this is possible but i found the function you can use instead
function GetFormattedDate() {
var todayTime = new Date();
var month = todayTime.getMonth() + 1;
var day = todayTime.getDate();
var year = todayTime.getFullYear();
return month + "/" + day + "/" + year;
}
console.log(GetFormattedDate());
so you can add more in the function or edit what the function will return as a format according to your will

How can I use input type date to dynamically only allow for one year from current date?

Here is my code so far. I am not sure how to accomplish a max date other than setting that in the input tag itself. I want it to be dynamic so whatever the current date is, the calendar only allows a selection of up to one year.
<input type="date" id="txtDate" />
$(function(){
var dtToday = new Date();
var month = dtToday.getMonth() + 1;
var day = dtToday.getDate();
var year = dtToday.getFullYear();
if(month < 10)
month = '0' + month.toString();
if(day < 10)
day = '0' + day.toString();
var maxDate = dtToday + 365;
alert(maxDate);
$('#txtDate').attr('max', maxDate);
});
example: today is 10/1/2019 it should be allowed to only select dated from 10/1/2019-10/1/2020 tomorrow a user should be allowed to only select from 10/2/2019-10/2/2020
link to fiddle
Setting the min and max values for a date input based on today's date can be done when the page loads:
// Formt date as YYYY-MM-DD
function formatISOLocal(d) {
let z = n => ('0' + n).slice(-2);
return d.getFullYear()+'-'+z(d.getMonth()+1) + '-' + z(d.getDate());
}
window.onload = function() {
let inp = document.querySelector('#i0');
let d = new Date();
inp.min = formatISOLocal(d);
inp.defaultValue = inp.min;
d.setFullYear(d.getFullYear() + 1);
inp.max = formatISOLocal(d);
// Debug
console.log(inp.outerHTML);
}
<input type="date" id="i0">
If the user agent doesn't support input type date, this will still set the min/max/default values, but you'll have to handle out of range values yourself.
Just add a year to the current date
var dtToday = new Date();
dtToday.setYear(dtToday.getYear() + 1);
$(function(){
var dtToday = new Date();
dtToday.setFullYear(dtToday.getFullYear() + 1)
let formatted_date = dtToday.getFullYear() + "-" + (dtToday.getMonth() + 1) + "-" + dtToday.getDate()
alert(formatted_date);
$('#txtDate').attr('max', formatted_date);
});
You can't add to a date object like that; you need to first get it as a timestamp. You can do that by using Date.now() or, if you need the Date object, dtToday.getTime().
That gives you a timestamp in milliseconds, so you also need to convert 365 days into milliseconds; meaning you want to add 365 * 24 * 60 * 60 * 1000 to it, not just 365.

How to disable html date input type in choosing future dates?

I have a code and just last year, it was still working. What it does is that it disables user to pick future dates. Now that it's January, it doesn't seem to be working. I do not understand why. Please help me fix this. Your help will be appreciated.
This is the input:
<input id="reqDate" class="form-control col-md-7 col-xs-12" name="reqDate" required="required" type="date">
Javascript:
<script type="text/javascript">
var input = document.getElementById("reqDate");
var today = new Date();
var day = today.getDate();
// Set month to string to add leading 0
var mon = new String(today.getMonth()+1); //January is 0!
var yr = today.getFullYear();
if(mon.length < 2) { mon = "0" + mon; }
var date = new String( yr + '-' + mon + '-' + day );
input.disabled = false;
input.setAttribute('max', date);
</script>
By the way, I am using this code in a .php file.
Like you have used, the native input[type="date"] element supports a maximum date value:
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
http://www.w3schools.com/tags/att_input_max.asp
The JavaScript you are using to set the date does not zero-pad the day, so for the first of January, you would get the date max="2016-01-1". To keep with your JavaScript version, sero pad the date with:
<script>
var input = document.getElementById("reqDate");
var today = new Date();
var day = today.getDate();
// Set month to string to add leading 0
var mon = new String(today.getMonth()+1); //January is 0!
var yr = today.getFullYear();
if(mon.length < 2) { mon = "0" + mon; }
if(day.length < 2) { dayn = "0" + day; }
var date = new String( yr + '-' + mon + '-' + day );
input.disabled = false;
input.setAttribute('max', date);
</script>
With this being a PHP script, to simplify your code you could use:
<input type="date" name="bday" max="<?=date('Y-m-d')?>">
N.B. Support for input[type="date"] varies between browsers (see http://caniuse.com/#feat=input-datetime).
You can confirm the max value used is in the correct supported RCF3339 format by inspecting the element in the browser inspector.
Did you try using min attribute in the input. In html5 we can specify min or max attributres in proper date format YYYY-MM-DD

Get clientside Date and Time format in Javascript

I want is, the formatted string as, MM/DD/YY or DD/MM/YYYY.
Which of these is set by client in his/her system.
How to get it?
var date = new Date();
var day = date.getDay();
var month = date.getMonth();
var year = date.getFullYear();
var final = day + "/" + month + "/" + year;
console.log(final); // "1/11/2015"
http://jsbin.com/zixacacuda/edit?js,console
var dt=new Date('2015-12-12');
var d=dt.getDay();
var m=dt.getMonth();
var y=dt.getFullYear();
var dtformated=d+'/'+m+'/'+y
console.log(dtformated)
var now = new Date().toLocaleDateString();
it willl retrun "12/28/2015 (MM/DD/YYYY)" format.

Get the date value in mm/dd/yyyy format in javascript

If i am entering a date in first text box i need to get the duration in second textbox by taking the differece with
current date, i do somting its working fine only with dd/mm/yyyy format,but i need to enter the date in mm/dd/yyyy format. my working Code will be here please help me
<input type="text" name"mydate" id="mydate" placeholder="mm/dd/yyyy">
<input type="text" name="duration" id="duration">
<script>
function getYearFn()
{
from = $("#mydate").val().split("/");
var fromdate = new Date(from[2], (from[1]-1), from[0]);
var today = new Date();
var year1 = fromdate.getFullYear();
var year2 = today.getFullYear();
var yeardiff = year2 - year1;
var month1 = fromdate.getMonth()+1;
var month2 = today.getMonth()+1;
var monthdiff = (month1 - month2)*-1;
$('#duration').val(yeardiff +" " +"Years"+" "+monthdiff*-1 +""+"Months" )
}
</script>
You only have to interchange the parameters in the date creation.
Instead of
var fromdate = new Date(from[2], (from[1]-1), from[0]);
use
var fromdate = new Date(from[2], (from[0]-1), from[1]);

Categories

Resources