How to format the javascript Date object the way stackoverflow does it.
For example. Aug 23 '10 at 23:35
This is what I tried.
new Date(val.replace(' ','T')+'Z').toString().split('GMT')[0]
This works cross browser. But doesn't look neat.
function formatDate(date) {
var monthNames = [
"Jan", "Feb", "Mar",
"Apr", "May", "Jun", "Jul",
"Aug", "Sep", "Oct",
"Nov", "Dec"
];
var day = date.getDate();
var monthIndex = date.getMonth();
var month = monthNames[monthIndex];
var year = date.getFullYear().toString().substring(2,3);
var hours = date.getHours();
var minutes = date.getMinutes();
return month+' '+day+" '"+year+' at '+hours+':'+minutes;
}
Try this:
var date = new Date();
var formattedDate =
(date.toLocaleString("en-us", { month: "long" })) + " " +
date.getDate() + " '" + (date.getFullYear() % 100);
var formattedTime = date.getHours() + ':' + date.getMinutes();
alert( formattedDate + " at " + formattedTime );
Here's a JSFiddle.
Related
My function displays the current date along with the next 60 days however I want the current date to be highlighted. What would be the best approach?
var date = new Date();
var dayInt = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
var dateRange = document.getElementById('calendar-table-range');
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
document.getElementById("month").innerHTML = monthNames[month];
document.getElementById("year").innerHTML = year;
for(var day = 0; day < 60; day++) {
var date = new Date();
date.setDate(date.getDate() + day);
var cell = document.createElement("li");
var cellText = document.createTextNode(day);
var date = ('0' + date.getDate()).slice(-2) + ' '
+ monthNames[date.getMonth()] + ' '
// + date.getFullYear();
cell.innerHTML = date;
dateRange.appendChild(cell);
}
Since you're always showing the next 60 days, the current date is always the first date in the list, so it's easy to target with a CSS selector. For example:
#calendar-table-range li:first-child {
background-color: yellow;
}
Another way to go about it is to create a timestamp in the same format as the dates in the range then search for it.
E.g. the following, which puts formatting into a separate function and removes code that wasn't being used:
function formatDate(d){
let monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
return ('0 ' + d.getDate()).slice(-2) + ' '
+ monthNames[d.getMonth()];
}
function highlightToday() {
let today = formatDate(new Date());
let cells = document.querySelectorAll('#calendar-table-range > li');
for (var i=0, iLen=cells.length; i<iLen; i++) {
if (cells[i].textContent == today) {
cells[i].style.color = 'red';
return;
}
}
}
var date = new Date();
var dayInt = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
var dateRange = document.getElementById('calendar-table-range');
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
document.getElementById("month").innerHTML = monthNames[month];
document.getElementById("year").innerHTML = year;
for(var day = 0; day < 6; day++) {
var date = new Date();
date.setDate(date.getDate() + day);
var cell = document.createElement("li");
var date = formatDate(date);
cell.innerHTML = date;
dateRange.appendChild(cell);
}
<div id="month"></div>
<div id="year"></div>
<input type="button" onclick="highlightToday()" value="highlight today">
<ol id="calendar-table-range">
</ol>
I have a below JavaScript function which returns time from the full date.
function f() {
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sept", "Oct", "Nov", "Dec"
];
d = new Date();
var utcOffset = -6;
var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
var localDate = new Date(utc + (3600000 * (utcOffset + 1)));
var fullDate = localDate.getDate() + ' ' + monthNames[localDate.getMonth()] + ' ' + localDate.getFullYear() + ' ' + localDate.toLocaleTimeString();
var now = new Date(fullDate).getTime();
return now;
}
In all browsers it returns expected output but not for Internet Explorer 11, as it returns NaN.
Please suggest changes to get the expected output.
var today = new Date();
//$('#timeStampID').val(today.getFullYear() + '-' +
('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' +
today.getDate()).slice(-2));
$('#timeStampID').val(String(('0' +
today.getDate()).slice(-2)) + ' ' +
String(('0' + (today.getMonth() + 1)).slice(-2)) + ' ' +
String(today.getFullYear()));
Here i'm getting output on input filed as : 23 04 2018 but i want to show Apr in place of 04 i.e name of the month
Unfortunately, there isn't a method for this built into the Date object. But you can do something like this:
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var monthName = months[today.getMonth()];
My code returns date in the format dd-MMM--YYYY (example: 13-Jan-2014). I want to add a random time next to it. Something like: 13-Jan-2014 03:00 PM or 13-Jan-2014 03:00 AM. What can I add to get the desired output? Thanks.
function randomDate(start, end) {
return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}
function DateAndTimeFormate(date) {
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var date = new Date(date);
return date.getDate() + '-' + monthNames[(date.getMonth() + 1)] + '-' + date.getFullYear();
}
var datewithformate = DateAndTimeFormate(randomDate(new Date(0000, 0, 0), new Date()));
//Start date
$("#time").val(datewithformate)
You can check this-
function randomDate(start, end) {
return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}
function DateAndTimeFormate(date) {
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var date = new Date(date);
var hours = date.getHours();
var t = hours >= 12 ? 'pm' : 'am';
var hour = (hours % 12).toString().length == 1 ? '0' + (hours % 12) : (hours % 12);
var minutes = date.getMinutes();
var minute = minutes.toString().length == 1 ? minutes + '0' : minutes;
return date.getDate() + '-' + monthNames[(date.getMonth())] + '-' + date.getFullYear() + ' ' + hour + ':' + minute + ' ' + t;
}
var datewithformate = DateAndTimeFormate(randomDate(new Date(0000, 0, 0), new Date()));
//Start date
$("#time").val(datewithformate)
https://jsfiddle.net/Luhtfzxj/3/
You already have a method which produces a random date time, it is only a question of formatting.
function randomDate(start, end) {
return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}
function DateAndTimeFormate(date) {
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var date = new Date(date);
// get the time
var time = date.toLocaleString('en-US', { hour: 'numeric', hour12: true });
// to fulfill your requirements some further manipulations
var ampm = time.slice(-2);
time = parseInt(time);
if (time < 10) { time = '0' + time }
time += ':00 ' + ampm;
return date.getDate() + '-' +
monthNames[(date.getMonth())] + '-' +
date.getFullYear() + ' ' +
time;
}
Example is here.
function DateAndTimeFormate(date) {
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];
var date1 = new Date(date);
date1.setTime(1332403882588);
return date1.getDate() + '-' + monthNames[(date1.getMonth() + 1)] + '-' + date1.getFullYear() + ' ' + date1.getHours() + ':' + date1.getMinutes();
}
You can use .setSeconds(x) method to add a random time with x is random number falls in range of 0 <= x < 86400. For example:
var date = new Date('13-Jan-2014');
// date = Mon Jan 13 2014 00:00:00 GMT+0700 (SE Asia Standard Time)
var randomSeconds = Math.floor((Math.random() * 86400));
// randomSenconds = 53135
date.setSeconds(randomSenconds)
// date = Mon Jan 13 2014 14:45:35 GMT+0700 (SE Asia Standard Time)
I think this javascript library http://momentjs.com/ is helpful for you to manipulate/format/... dates that you don't need to write long/complicated code like the code in your question. For example:
moment().format('MMMM Do YYYY, h:mm:ss a'); // January 13th 2017, 2:17:37 pm
How to show clock with CST time format in HTML page using JavaScript? It should show exact CST time in this format "02 Jul 2015 10:34:45 PM"
Not sure if there is a better way but i was unable to find anything. This works though.
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sept", "Oct", "Nov", "Dec"
];
d = new Date();
//set the offset
var utcOffset = -6;
//get utc
var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
//create new date adjusting by the utcOffset to get local date/time
var localDate = new Date(utc + (3600000 * (utcOffset+1)));
//check if one character if so format as two by adding leading 0.
var formatDay = (localDate.getDate().length > 1) ? localDate.getDate() : '0' + localDate.getDate();
//string everything together
var fullDate = formatDay + ' ' + monthNames[localDate.getMonth()] + ' ' + localDate.getFullYear() + ' ' + localDate.toLocaleTimeString();
$('#div1').html(fullDate);
http://jsfiddle.net/ojga6a5u/