What am I doing wrong here I am trying to get the current date to be in the input box, however if I change the date I want the new value to be there?
But currently no matter what date I enter it outputs the current date.
function display_array() {
////////////Date convert
var d = new Date();
var mm = d.getMonth() + 1;
var dd = d.getDate();
var yy = d.getFullYear();
var Dateissue = mm + '/' + dd + '/' + yy; //(US)
document.getElementById("DateissueO").innerHTML = "Date of issue: " + Dateissue;
var Dateissue = document.getElementById("DateissueO").value;
}
window.onload = function() {
document.getElementById('Dateissue').value = new Date().toLocaleDateString('en-CA')
}
<INPUT id="button" onclick="display_array();" class="button" type="button" value="Submit">
Date of Issue: <INPUT name="Dateissue" id="Dateissue" type="date">
<DIV id="DateissueO"></DIV>
You need to initialize your Date object with the selected date.
Get the new date from element Dateissue and convert it to the compatible date format for new Date(YYYY/MM/DD) constructor.
document.getElementById('Dateissue').value.replace(/-/g, '/')
Look at this code snippet
function display_array() {
////////////Date convert
var d = new Date(document.getElementById('Dateissue').value.replace(/-/g, '/'));
var mm = d.getMonth() + 1;
var dd = d.getDate();
var yy = d.getFullYear();
var Dateissue = mm + '/' + dd + '/' + yy; //(US)
document.getElementById("DateissueO").innerHTML = "Date of issue: " + Dateissue;
var Dateissue = document.getElementById("DateissueO").value;
}
window.onload = function() {
document.getElementById('Dateissue').value = new Date().toLocaleDateString('en-CA')
}
<INPUT id="button" onclick="display_array();" class="button" type="button" value="Submit">
Date of Issue: <INPUT name="Dateissue" id="Dateissue" type="date">
<DIV id="DateissueO"></DIV>
See? now is using the new selected date from field Dateissue.
Related
I just tried to make a span with formatted date under foreach using knockout
I have this script
Date.prototype.toFormattedDate = function () {
var dd = this.getDate();
if (dd < 10) dd = '0' + dd;
var mm = this.getMonth() + 1;
if (mm < 10) mm = '0' + mm;
var yyyy = this.getFullYear();
/* change format here */
return String(dd + "/" + mm + "/" + yyyy);
};
and in html i try this
<span class="form-control" data-bind="text: new Date(my_date).toFormattedDate() " />
my_date is a string date "2020-09-13T00:00:00"
but it always shows NaN/NaN/NaN
i tried to use moment.js but it gave me "Invalid date"
Demo:
Date.prototype.toFormattedDate = function() {
var dd = this.getDate();
if (dd < 10) dd = '0' + dd;
var mm = this.getMonth() + 1;
if (mm < 10) mm = '0' + mm;
var yyyy = this.getFullYear();
/* change format here */
return String(dd + "/" + mm + "/" + yyyy);
};
const formatted = new Date("2020-09-13T00:00:00").toFormattedDate();
console.log(formatted)
It's happening because my_date is an observable. new Date(my_date) will try to convert the observable to a date and it fails. So, get the value in the observable by using my_date() and use it in the new Date() constructor
Date.prototype.toFormattedDate = function(){var a=this.getDate();if(a<10){a="0"+a}var b=this.getMonth()+1;if(b<10){b="0"+b}var c=this.getFullYear();return String(a+"/"+b+"/"+c)};
ko.applyBindings({ my_date: ko.observable('2020-09-13T00:00:00') })
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<span class="form-control" data-bind="text: new Date(my_date()).toFormattedDate() " />
Another option is to create a custom binding for your date format. You could move all the date format code to the custom binding directly if you don't want to pollute Date.prototype
function customDateHandler(element, valueAccessor) {
var value = ko.unwrap(valueAccessor());
element.textContent = new Date(value).toFormattedDate()
}
ko.bindingHandlers.customDateFormat = {
init: customDateHandler,
update: customDateHandler
};
And use the binding in your span:
<span class="form-control" data-bind="customDateFormat: my_date" />
Here's a snippet:
function customDateHandler(element, valueAccessor) {
var value = ko.unwrap(valueAccessor());
element.textContent = new Date(value).toFormattedDate()
}
ko.bindingHandlers.customDateFormat = {
init: customDateHandler,
update: customDateHandler
};
Date.prototype.toFormattedDate = function(){var a=this.getDate();if(a<10){a="0"+a}var b=this.getMonth()+1;if(b<10){b="0"+b}var c=this.getFullYear();return String(a+"/"+b+"/"+c)};
ko.applyBindings({ my_date: ko.observable('2020-09-13') })
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<span class="form-control" data-bind="customDateFormat: my_date" />
I have a function:
function loadDefaultDate(){
var currentDate = new Date();
var curYear, curMonth, curDay;
curYear = currentDate.getFullYear();
curMonth = ("0" + (currentDate.getMonth() + 1)).slice(-2);
curDay = ("0" + currentDate.getDate()).slice(-2);
document.getElementById("startDate").value = curYear + "-" + curMonth + "-" + curDay;
}
And html form input:
<input type=text name="startDate" size=10 maxlength=10 onload="loadDefaultDate()" onclick="javascript:resetValues();">
Why I am not getting default date when page loads?
Try with this:
function load() {
console.log("load event detected!");
}
window.onload = load;
Your input has name="startDate", but you are trying to look it up by Id.
Set the proper Id on your input.
<input type=text name="startDate" id="startDate" size=10 maxlength=10 onclick="javascript:resetValues();">
I also manually called loadDefaultDate in javascript. As adeneo's comment mentions, onload does not work with input elements.
function loadDefaultDate(){
var currentDate = new Date();
var curYear, curMonth, curDay;
curYear = currentDate.getFullYear();
curMonth = ("0" + (currentDate.getMonth() + 1)).slice(-2);
curDay = ("0" + currentDate.getDate()).slice(-2);
document.getElementById("startDate").value = curYear + "-" + curMonth + "-" + curDay;
}
loadDefaultDate();
OK, new to JS, but I have a HTML form with a input box. This input box value needs to be = to a JavaScript function I wrote and I can't get it to work.
In the head I have the location of my js file. Basically, I want to have the input box value = the JavaScript function.
<script src="js/functions.js"></script>
The HTML input box
<input type="text" name="date" id= "date" value= "" class="inputBox"
disabled />
The JavaScript function
function dateToday{
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10) {
dd='0'+dd
}
if(mm<10) {
mm='0'+mm
}
today = mm+'/'+dd+'/'+yyyy;
document.write(today);
}
You can use document.getElementById("date").value to set the value of the input.
Also "function dateToday{" need to be changed to "function dateToday(){"
function dateToday() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
today = mm + '/' + dd + '/' + yyyy;
document.write(today);
document.getElementById("date").value = today;
}
dateToday();
<input type="text" name="date" id="date" value="" class="inputBox" disabled />
<script>
// Place this code at the end of the document body
window.onload = function(){
document.getElementById("date").value = dateToday();
};
</script>
</body>
And change document.write(today); to return today;
You may want to look into the date input type.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
You can do document.getElementById("date").value = dateToday() as mentioned by user2182349 and also make sure to add
return today;
in your function dateToday().
Except for a few changes here and there nothing major. Check the following code.
function dateToday() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
today = mm + '/' + dd + '/' + yyyy;
return today;
}
document.getElementById("date").value = dateToday();
<input type="text" name="date" id="date" value="" class="inputBox" disabled/>
<script>
$(function() {
document.getElementById("date").value = dateToday()
});
</script>
Here is my code,
function getDateonperiod(elem)
{
var periodval=$("#period"+elem).val();
var days = periodval * 30;
var startDate=new Date();
var endDate = new Date();
endDate.setDate(endDate.getDate() + days);
var strDate = startDate.getFullYear() + "-" + (startDate.getMonth()+1) + "-" + startDate.getDate();
$("#from_date"+elem).val(strDate);
$("#to_date"+elem).val((endDate.getFullYear()+'-'+endDate.getMonth() + 1)+'-'+endDate.getDate());
}
Onchange input field value getting number of days days. I'm getting start date correctly but end date if input value 1 its working fine but its more than one its returning like this 2016-11-27 2016-21-28 from current date. How to fix this?
You missed a parenthesis:
endDate.getFullYear()+'-'+(endDate.getMonth() + 1)+'-'+endDate.getDate();
Try this:
$( "#period" ).change(function() {
var periodval=$("#period").val();
var days = periodval * 30;
var startDate=new Date();
var endDate = new Date();
endDate.setDate(endDate.getDate() + days);
var strDate = startDate.getFullYear() + "-" + (startDate.getMonth()+1) + "-" + startDate.getDate();
$("#from_date").val(strDate);
$("#to_date").val(endDate.getFullYear()+'-'+(endDate.getMonth() + 1)+'-'+endDate.getDate());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="period" />
<input type="text" id="from_date" />
<input type="text" id="to_date" />
you can use moment.js here
var days = 10;
var dateFormat = 'YYYY-MM-DD';
var startFormatted = moment().format(dateFormat);
var endFormatted = moment().add(days, 'day').format(dateFormat);
console.log(startFormatted)
console.log(endFormatted)
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
You are not adding days correctly.
function getDateonperiod(elem)
{
var periodval=$("#period"+elem).val();
var days = periodval * 30;
var startDate=new Date();
var endDate = new Date(startDate.getFullYear(),startDate.getMonth(),startDate.getDate()+n);
var strDate = startDate.getFullYear() + "-" + (startDate.getMonth()+1) + "-" + startDate.getDate();
$("#from_date"+elem).val(strDate);
$("#to_date"+elem).val((endDate.getFullYear()+'-'+endDate.getMonth() + 1)+'-'+endDate.getDate());
}
Simply use this library
http://momentjs.com/
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js">
Your code with momentjs
function getDateonperiod(elem)
{
var periodval=$("#period"+elem).val();
var days = periodval * 30;
var startDate = new moment();
var endDate = new moment();
endDate.add(days,'days');
var strStartDate = startDate.format("YYYY - MM - DD");
var strEndDate = endDate.format("YYYY - MM - DD");
$("#from_date"+elem).val(strDate);
$("#to_date"+elem).val(strEndDate);
}
I just extended Date function for adding days. This may help you:
Date.prototype.addDays = function(days) {
this.setDate(this.getDate() + parseInt(days));
return this;
};
$("#period").change(function() {
var periodval = $("#period").val();
var days = periodval;
var startDate = new Date();
var endDate = new Date();
endDate.addDays(days);
//endDate.setDate(endDate.getDate() + days);
var strDate = startDate.getFullYear() + "-" + (startDate.getMonth() + 1) + "-" + startDate.getDate();
$("#from_date").val(strDate);
$("#to_date").val(endDate.getFullYear() + '-' + (endDate.getMonth() + 1) + '-' + endDate.getDate());
});
I have a StartDate and an ExpiryDate textbox. Both take values in the forms of 10/12/2013.
What I would like to be able to do is, when you change the StartDate textbox (whether from empty or just updating the date) the ExpiryDate textbox needs to add 1 year onto the date.
Example:
If StartDate = 10/12/2013 then ExpiryDate will automatically change to 10/12/2014.
How to do that with JS?
function MyFunc() {
MyTextBox = document.getElementById("<%= TextBox1.ClientID %>");
MyTextBox2 = document.getElementById("<%= TextBox2.ClientID %>");
var date = new Date(MyTextBox.value);
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear() + 1;
MyTextBox2.value = day + "/" + month + "/" + year;
}
Try this, call the setExpiryDate() function whenever you need to set the expiration date.
function setExpiryDate() {
var txtStartDate = document.getElementById("ctrl1");
var txtExpiryDate = document.getElementById("ctrl2");
var dt = new Date(txtStartDate.value);
if (!isNaN(dt)) {
dt = dt.setYear(dt.getYear() + 1);
txtExpiryDate.value = padStr(temp.getDate()) + '/' + padStr(temp.getMonth() + 1) + '/' + temp.getFullYear().toString();
}
}
function padStr(i) {
return (i < 10) ? "0" + i : "" + i;
}
How about this:
function updateInput(value){
document.getElementsById('Yourelement').Value = value;
}
Other than that, all you need is some date parsing/string manipulation to find the correct year.