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();
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 some code that outputs a time string into a video. I know how to make it output as video or image but I want it to just show up as plain text so I can make a list of live-updating URLs based on the current time.
Currently it is set to "video.r" which adds the time to a "
So that instead of doing:
<video class="r" src="https://mywebsite.com/2019102618URLDATE?=201910261841?New.mp4" type="video/x-flv" width="350"></video>
It would just output as:
https://mywebsite.com/2019102618URLDATE?=201910261841?New.mp4
Here's the code for it.
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="screen.js"></script>
<center><h1> URL List </h1></center>
<video class="r" src="https://mywebsite.com/" type="video/x-flv" type="video/mp4" width="350"></video>
JS
$(function() {
var today = new Date();
var ss = today.getSeconds();
var nn = today.getMinutes() * 60 - 90; //60 second delay
var nm = today.getMinutes();
var hh = today.getUTCHours();
var dd = today.getUTCDate();
var mm = today.getUTCMonth() + 1; //January is 0!
var yyyy = today.getUTCFullYear();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
if (hh < 10) {
hh = '0' + hh
}
if (nm < 10) {
nm = '0' + nm
}
var minsec = nn + ss + 30
var today = yyyy + '' + mm + '' + dd + '' + hh + 'URLDATE?=' + yyyy + '' + mm + '' + dd + '' + hh + nm + '?New.mp4' ;
$('video.r').each(function() {
var url = $(this).attr('src');
if (url.indexOf("?") >= 0) {
$(this).attr("src", url + today);
} else {
$(this).attr("src", url + today);
}
});
});
So, I understand what you want is having a link, which points to an URL like the one you posted.
If so, then it is pretty simple. You already a function that builds the URL, now instead of using this URL as a video's src attribute, you can use it as a link's href attribute:
Edit: Or, if you just want to list URLs as plain text, simply use the link's innerHTML attribute instead of href in the below solution.
$(function() {
var today = new Date();
var ss = today.getSeconds();
var nn = today.getMinutes() * 60 - 90; //60 second delay
var nm = today.getMinutes();
var hh = today.getUTCHours();
var dd = today.getUTCDate();
var mm = today.getUTCMonth() + 1; //January is 0!
var yyyy = today.getUTCFullYear();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
if (hh < 10) {
hh = '0' + hh
}
if (nm < 10) {
nm = '0' + nm
}
var minsec = nn + ss + 30
var today = yyyy + '' + mm + '' + dd + '' + hh + 'URLDATE?=' + yyyy + '' + mm + '' + dd + '' + hh + nm + '?New.mp4' ;
$('a.r').each(function() { //here change "video.r" to "a.r"
var url = $(this).attr('href'); //and here "src" becomes "href"
if (url.indexOf("?") >= 0) {
$(this).attr("href", url + today);
} else {
$(this).attr("href", url + today);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="screen.js"></script>
<center><h1> URL List </h1></center>
<a class="r" href="https://mywebsite.com/">Link</a>
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.
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());
});