ssx95351 ssx95351 - 21 days ago 11
Javascript Question

Can't get YouTube video time format to change

I have written a js file that pulls info using YouTube API v3. I've tried many methods to get the time to change but nothing works. Can someone explain to me how to get it to change to- month/date/year?

Thank you.



var channelName = '2kolf';
var vidWidth = 166;
var vidHeight = 86;
var vidResults = 4;

$ (document).ready(function() {
$.get(
"https://www.googleapis.com/youtube/v3/channels",{
part: 'contentDetails',
forUsername: channelName,
key: 'AIzaSyCNKsA01SFcKX3ayd0kfWo8iuHzatCk2aw'},
function(data) {
$.each(data.items, function(i, item) {
console.log(item);
pid = item.contentDetails.relatedPlaylists.uploads;
getVids(pid);
})
}
);

function getVids(pid){
$.get(
"https://www.googleapis.com/youtube/v3/playlistItems",{
part: 'snippet',
maxResults: vidResults,
playlistId: pid,
key: 'AIzaSyCNKsA01SFcKX3ayd0kfWo8iuHzatCk2aw'},
function(data) {
var output;
$.each(data.items, function(i, item) {
console.log(item);
videoTitle = item.snippet.title.replace("Season 8 - ", "");
videoId = item.snippet.resourceId.videoId;
videoThumbnails = item.snippet.thumbnails.medium.url;
videoPublished = item.snippet.publishedAt;//This is to show the date published//
videoAuthor = item.snippet.channelTitle.replace("2kOLF", "2K Online Franchise");
videoStats = item.snippet.statistics;

output = '<li class="YouTubeVideos"><a class="various fancybox.iframe" title="2K Online Franchise Network" href=\"//www.youtube.com/embed/'+videoId+'\?fs=1&autoplay=1"><img height="'+vidHeight+'" width="'+vidWidth+'" src='+videoThumbnails+' ></a><br><p>'+videoTitle+'</p><br><span style="font-weight: normal;">by '+videoAuthor+'<br>'+videoPublished+'</span></li>';

//Append to results listStyleType
$('#results').append(output);
})
}
);
}
});

<!doctype html>
<html><head>
<title>YouTube Channel Videos</title>


<style>
body {
background: black;
font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
font-size: 14px;
color: #666666;

}
#container {
width: 800px;
margin: 0 auto;
overflow: auto;
background: #303030;
padding: 15px;
}
#results li{
list-style: none;
float: left;
height: auto;
margin-right: 5px;
padding-top: 5px;
text-align: left;
width: 172px;
margin-left: 10px;
}
#results li img {
border: 3px solid #3E3E3E;
border-radius: 4px 4px 4px 4px;
box-shadow: 6px 6px 5px #131313;
}
li p{
color: #ffffff;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
margin-top: 10px;
text-decoration: none;
font-weight: bold;
width: 175px;
}
.YouTubeVideos {
color: #ffffff;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
margin-top: 10px;
text-decoration: none;
font-weight: bold;
width: 175px;
float: left;
}
</style>

<script src="http://www.2kolf.com/js/jquery-3.1.1.min.js"></script>


</head>
<body>

<div id="container">
<ul id="results"></ul>
</div>

</body>
</html>




Answer

You can't change the dateformat of Youtube API results. You have to change the format using JS. You can use external plugins like Moment.js to format the date. Following is the pure JS way.

videoPublished = new Date(item.snippet.publishedAt);
formattedDate = (videoPublished .getMonth()+1) + '/' + videoPublished .getDate() + '/' + videoPublished .getFullYear();

Use formattedDate to display