Convert timestamp from am/pm to 24-hour in Javascript - javascript

I'm using jquery timepicker. On user side, time needs to be displayed as am/pm format (10:30am or 5:30pm). I need to append that value to datepicker value.
For example, if datepicker value is 07/08/2015, final value should be 07/08/2015 17:30.
Problem here is in converting 5:30pm to 17:30. How to do it with javascript

You could write your own conversion function that converts time-strings with "pm" in them by adding 12 hours, like so:
var convertTimeStringTo24Hours = function(timeString) {
if (timeString.match(/pm$/)) {
var match = timeString.match(/([0-9]+):([0-9]+)pm/);
var hours = parseInt(match[1]) + 12;
var minutes = match[2];
return hours + ':' + minutes;
} else {
return timeString.replace('am', '');
}
};

In case you want to convert from the 12 Hour system(hh:mm:ssPM/AM) to 24 Hour system then you could use the following
function timeConversion(s) {
const timeString = s.toString()
if (timeString.match(/PM$/)) {
var match = timeString.match(/([0-9]+):([0-9]+):([0-9]+)PM/)
var hours = parseInt(match[1]) + 12;
var minutes = match[2];
var second = match[3]; parseInt(match[1])
if (parseInt(match[1]) === 12) {
return parseInt(match[1])+ ':' + minutes + ':' + second;
} else {
return hours + ':' + minutes + ':' + second;
}
} else {
var match = timeString.match(/([0-9]+):([0-9]+):([0-9]+)AM/)
var hours = parseInt(match[1]);
var minutes = match[2];
var second = match[3];
if (hours === 12) {
return '00:' + minutes + ':' + second;
} else {
return timeString.replace('AM', '');
}
}
}

Related

Jquery function to Increment one hours based on time input string

I have string value in this format.
9:00 am
i want it to be like this.
9:00 am - 10:00 am
second hour must be 1 greater then first one. for example if time is
7:00 am then it should be 7:00 am - 8:00 am
how can i do that using jquery?
i tried this but its not working as it works now.
var time= "9:00 am"
var nexttime=time.setHours(time.getHours()+1)
alert(nexttime);
getting error of
time.getHours is not a function
You can try this :
function increaseTimeByOne(timeStr) {
var splitedTimeStr = timeStr.split(':');
var hours = parseInt(splitedTimeStr[0]);
var meridiem = splitedTimeStr[1].split(" ")[1];
var minutes = splitedTimeStr[1].split(" ")[0];
var nextHours = (hours + 1);
var nextMeridiem;
if (hours >= 11) {
if (meridiem.toLowerCase() == "am") {
nextMeridiem = "pm";
} else if (meridiem.toLowerCase() == "pm") {
nextMeridiem = "am";
}
if (nextHours > 12) {
nextHours = nextHours - 12;
}
} else {
nextMeridiem = meridiem;
}
return nextHours + ":" + minutes + " " + nextMeridiem;
}
and using above function as
var timestr="9:00 am";
var next_hour = increaseTimeByOne(timeStr);
alert(next_hour);
refer this
var time=new Date();
time.setHours(9, 00, 00);
var nexttime=(time.getHours()+1);
alert(nexttime);
// to get hrs mins and seconds
var nexttime=(time.getHours()+1) +":"+time.getMinutes()+":"+time.getSeconds();
YOu can make your time string like:
function increaseTimeByOne(t) {
var s = t.split(':');
var n = parseInt(s[0], 10);
var nt = (n + 1) + ":00 ";
var ampm = n >= 11 ? "pm" : "am";
return t + " - " + nt + ampm;
}
console.log(increaseTimeByOne('9:00 am'));
console.log(increaseTimeByOne('11:00 am'));
console.log(increaseTimeByOne('12:00 pm'));

How to format database datetime in javascript?

I have a datetime value gotten from an SQLServer database table:
2016-08-16T17:00:00Z
Using javascript, I want to format the date as follow:
16/08/2016 17:00:00
I have used the code below:
$scope.FormatDate = function (value) {
if (value !== null && typeof (value) !== 'undefined') {
var date = new Date(value);
var returnStr = date.getDate() + "/" + date.getMonth() + 1 + "/" + date.getFullYear();
return returnStr;
} else {
return value;
}
}
The result from the sample resource is:
17/71/2016
I want your help to get the output result as: "16/08/2016 17:00:00"
If all you want to do is format it then you don't need to create an actual date object, you can do a simple string replace using a regex to grab the individual parts, as per this simple demo:
var value = "2016-08-16T17:00:00Z";
console.log(value.replace(/(\d{4})-(\d\d)-(\d\d)T([^Z]+)Z/,"$3/$2/$1 $4"));
In the context of your function:
$scope.FormatDate = function (value) {
if (value !== null && typeof (value) !== 'undefined') {
return value.replace(/(\d{4})-(\d\d)-(\d\d)T([^Z]+)Z/,"$3/$2/$1 $4");
} else {
return value;
}
}
Another solution:
var parsed = Date.parse("2016-08-16T17:00:00Z"),
date = new Date(parsed),
day = date.getUTCDate(),
month = date.getUTCMonth() + 1,
year = date.getUTCFullYear(),
hour = date.getUTCHours(),
minute = date.getUTCMinutes(),
second = date.getUTCSeconds(),
dateStr = "";
day = day < 10 ? "0" + day : day;
month = month < 10 ? "0" + month : month;
hour = hour < 10 ? "0" + hour : hour;
minute = minute < 10 ? "0" + minute : minute;
second = second < 10 ? "0" + second : second;
dateStr = day + "/" + month + "/" + year + " " + hour + ":" + minute + ":" + second;
console.log(dateStr);
Updated: The old code may change across countries, because they have different local date/time format, so I have updated to format it explicitly.
Try this
function formatDate(date)
{
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
minutes = minutes < 10 ? '0'+minutes : minutes;
seconds = seconds < 10 ? '0'+seconds : seconds;
var strTime = hours + ':' + minutes + ':' +seconds ;
return date.getMonth()+1 + "/" + date.getDate() + "/" + date.getFullYear() + " " + strTime;
}
You can use this library to format the date as you desire with implementing some logic.
http://momentjs.com/
Just work with the function parameter value and use moment.
Example:
const date = moment("2016-08-16T17:00:00Z").date();
const month = moment("2016-08-16T17:00:00Z").month();
const hour = moment("2016-08-16T17:00:00Z").hour();
const year = moment("2016-08-16T17:00:00Z").year();
const minute = moment("2016-08-16T17:00:00Z").minute();
const sec = moment("2016-08-16T17:00:00Z").second();
// implementing some logic
console.log('' + date + '/' + month + '/' + year + ' ' + hour + ':' + minute + ':' + sec);
here is the fiddle:
https://jsfiddle.net/Refatrafi/6m4m7mp3/

convert time to to 12 hour by manipulate string

"2015-06-23 14:00:00"
I tried to format above date time into 12 hour base but stuck in somewhere.
function formatDate(raw_date){
var right = raw_date.substring(10, 0);
var hours = ((right[0].substring(2,0) + 11) % 12 + 1);
var min = raw_date.substring(14,16);
var suffix = right[1] >= 12 ? "PM":"AM";
right[1] = ((right[1] + 11) % 12 + 1) + suffix;
return hours + ':' + min + ' ' + suffix;
}
Can someone help? My desired output is "23/06/2015 02:00 PM"
Try this:
function formatDate(raw_date) {
var right = new Date(raw_date);
var currentHours = right.getHours();
var timeOfDay = (currentHours < 12) ? "AM" : "PM";
if (currentHours > 12) {
currentHours -= 12;
}
return (right.getDate() + '/' + right.getMonth()+ '/' + right.getFullYear() +" "+ currentHours+ ":"+right.getMinutes() + timeOfDay);
}
alert(formatDate("2015-06-23 14:00:00"));
Demo
Solution based on your code:
function formatDate(raw_date){
var year = raw_date.substring(0,4);
var month = raw_date.substring(5,7);
var day = raw_date.substring(8,10);
var right = raw_date.substring(10);
var hours = ((right.substring(0,3))% 12 );
var min = raw_date.substring(14,16);
var suffix = right.substring(0,3) >= 12 ? "PM":"AM";
return day + "/"+month+"/"+year+" "+hours + ':' + min + ' ' + suffix;
}
You should follow a simple flow.
Try to break down the input -> convert them _> and then sum them up:
function formatDate(raw_date){
var right = raw_date.substring(0, 10);
var year=right.substring(0,4);
var month=right.substring(5,7);
var day=right.substring(8,10);
right=day+"/"+month+"/"+year;
var left=raw_date.substring(11, raw_date.length);
var hours = left.substring(0,2);
var suffix = hours >= 12 ? "PM":"AM";
hours=hours-12;
if(hours<10) hours='0'+hours;
var min = left.substring(3,5);
left=hours+":"+min+" "+suffix;
return right + ' ' + left;
}

Clock and date javascript

Im creating a JS clock/date. I previously got the time to work perfectly then I decided to add more onto my clock (date). Right now I cant figure why it isn't working. If anyone could give me tip or idea how to fix it, I would greatly appreciate it.
function timedate()
{
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var dn="PM"
var d = currentTime.getDate(); <--
var day = (d < 10) ? '0' + d : d;
var m = currentTime.getMonth() + 1; <--
var month = (m < 10) ? '0' + m : m;
var yy = currentTime.getYear(); <--
var year = (yy < 1000) ? yy + 1900 : yy;
if (hours<12)
{
dn="AM"
}
if (hours>12)
{
hours=hours-12
}
if (hours==0)
{
hours=12
}
if (minutes<=9)
{
minutes="0"+minutes
}
var clocklocation = document.getElementById('timedate');
clocklocation.innerHTML = "" +hours+":"+minutes+dn+""+day + "/" + month + "/" + year;
setTimeout("timedate()", 1000);
}
timedate();
Your code works, it is just not visible because you do not have seconds showing
Also change
setTimeout("timedate()", 1000);
to
setTimeout(timedate, 1000);
because it is not recommended
and remove the <--
Make sure it runs onload or after the tag you want to show it in
Alternatively remove the line and change
timedate();
to
setInterval(timedate,1000)
const pad = num => ("0" + num).slice(-2);
const timedate = () => {
const currentTime = new Date();
let hours = currentTime.getHours();
const minutes = pad(currentTime.getMinutes());
const seconds = pad(currentTime.getSeconds());
const d = currentTime.getDate();
const day = pad(d);
const month = pad(currentTime.getMonth() + 1);
const yy = currentTime.getFullYear();
let dn = "PM"
if (hours <= 12) dn = "AM";
if (hours >= 12) hours -= 12;
if (hours == 0) hours = 12;
hours = pad(hours);
document.getElementById('timedate').innerHTML = "" +
hours + ":" +
minutes + ":" +
seconds + dn + " " +
day + "/" + month + "/" + yy;
}
window.addEventListener("load", function() {
setInterval(timedate, 1000);
});
<span id="timedate"></span>
If you set the timeout with setTimeout(timedate, 1000) instead of your current magic string version, it works1.
1 I took the liberty of adding seconds to your code as well, to make it obvious that the clock updates. Of course, you also need to remove <-- from your code.

Javascript timezone conversion displays NaN in Internet Explorer

I am using the following javascript to convert UTC times into the users local timezone...
(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 + " "
};
return this.each(function() {
var tagText;
tagText = $(this).html();
$(this).html(fmtDate(new Date(tagText)));
return $(this).attr("title", tagText);
});
};
})(jQuery);
}).call(this);
This all works fine in every browser apart from Internet Explorer, instead of converting the time it just displays 'NaN'
Can anyone see why this is happening?

Categories

Resources