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>
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" />
The script in the html below works as expected. It loads the latest version of a page by getting today's date info and modifying the iframe src.
But when I put just the script into a WordPress code module for a section of a page, it takes over the whole page. I suspect the problem is the use of document.body.innerHTML, but I don't know what the correct javascript code is.
<html>
<head>
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1;
var yyyy = today.getFullYear();
var h = h > 12 ? h - 12 + 'PM' : h + 'AM';
if (dd < 10) {
dd = '0' + dd;
}
if (mm < 10) {
mm = '0' + mm;
}
var today = mm + '%2f' + dd + '%2f' + yyyy;
document.body.innerHTML += ' <iframe src="https://www.colorado.gov/airquality/site.aspx?aqsid=080770020&seeddate= ' + today + '" width = "100%" height ="600"> </iframe> ';
</script>
</body>
</html>
document.getElementsByClassName('et_pb_code_inner')[1].innerHTML += ' <iframe src="https://www.colorado.gov/airquality/site.aspx?aqsid=080770020&seeddate= ' + today + '" width = "100%" height ="600"> </iframe> ';
I am trying to display Time on my view with format 10: 30 PM PST from time stamp with format like '2012-10-10T06:42:47Z'. I tried different ways to do that and failed. Any good option to display time in that format?
My trail is here
$(document).ready(function() {
$("span.localtime").localtime();
});
(function() {
(function($) {
return $.fn.localtime = function() {
var fmtDate, fmtZero;
fmtZero = function(str) {
return ('0' + str).slice(-2);
};
fmtDate = function(d) {
var hour, meridiem;
hour = d.getHours();
if (hour < 12) {
meridiem = "AM";
} else {
meridiem = "PM";
}
if (hour === 0) { hour = 12; }
if (hour > 12) { hour = hour - 12; }
return hour + ":" + fmtZero(d.getMinutes()) + " " + meridiem + " " + (d.getMonth() + 1) + "/" + d.getDate() + "/" + d.getFullYear();
};
return this.each(function() {
var tagText;
tagText = $(this).html();
$(this).html(fmtDate(new Date(tagText)));
return $(this).attr("title", tagText);
});
};
})(jQuery);
}).call(this);
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 need a help.
I would like to see the last 24 hours in the timeline Chart. This is the formatted datetime DD/MM/YYYY HH:MM:SS.
This is the data source: https://docs.google.com/spreadsheets/d/1H602ZpDfwl044qjDyIDfscOWoaSqLzjsvb3TuZXEK6c/edit#gid=0
I'm getting en error: Uncaught SyntaxError: Unexpected token ILLEGAL
Does anyone have any idea to solve this?
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization',
'version':'1','packages':['timeline']}]}"></script>
<script type="text/javascript">
google.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1H602ZpDfwl044qjDyIDfscOWoaSqLzjsvb3TuZXEK6c/edit#gid=0');
var nowone = getNowDate();
query.setQuery("select A,B,C where B >= datetime '"+nowone+"' ");
query.send(handleQueryResponse);
}
function getNowDate(){
var d=new Date();
d.setDate(d.getDate() - 1);
var year = d.getFullYear();
var month = d.getMonth() + 1;
var day = d.getDate();
var hour = d.getHours();
var minute = d.getMinutes();
var second = d.getSeconds();
var microsecond = d.getDate();
if (month.toString().length == 1) {
month = '0' + month;
}
if (day.toString().length == 1) {
day = '0' + day;
}
if (hour.toString().length == 1) {
hour = '0' + hour;
}
if (minute.toString().length == 1) {
minute = '0' + minute;
}
if (second.toString().length == 1) {
second = '0' + second;
}
//while(microsecond.toString().length < 3) {
// microsecond = '0' + microsecond;
//}
var dateString = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second';
return dateString;
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var options = {
timeline: { singleColor: '#8d8' },
};
var container = document.getElementById('example5.2');
var chart = new google.visualization.Timeline(container);
chart.draw(data, options);
setTimeout(drawChart, 5000);
}
</script>
</head>
<body>
<div id="example5.2" style="height: 500px;"></div>
</body>
</html>
This is purely a JS issue. You have an extra quote in JS that doesn't belong. When you set your time, it should be:
var dateString = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
Instead of
var dateString = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second';
If you remove the extraneous quote, your error will go away.