jquery timepicker time start issue - javascript

I have and timepicker in my code. code is given below.
function getCurrentTime(date) {
var hours = date.getHours(),
minutes = date.getMinutes(),
ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0'+minutes : minutes;
return hours + ':' + minutes + ' ' + ampm;
}
var cur_time = new Date();
cur_time.setHours(cur_time.getHours() + 1);
$('.pickup_time').timepicker({
timeFormat: 'hh:mm p',
interval: 30,
minTime: getCurrentTime(new Date()),
// minTime: '1',
// maxTime: '11:30pm',
// startTime: '01:00',
dynamic: false,
dropdown: true,
scrollbar: true
});
$('.pickup_time').timepicker('setTime', cur_time);
Using this code i am getting dropdown like which is given below in image .what i exactly want is i want to start the time from the 2:00 when its 1:43. and if time is 1:25 i want it toi start from 01:30.
Help needed on this can any one have idea about this ???

In order to round the current time to the next half hour, adjust your getCurrentTime() function as follows:
function getCurrentTime(date) {
// extract hours and minutes from given date
var hours = date.getHours(),
minutes = date.getMinutes();
// round minutes to half hour or next hour
if (minutes <= 30) {
minutes = "30";
} else {
minutes = "00";
hours = (hours + 1) % 24; // loop on 24 hours
}
// calc if morning or afternoon
var ampm = hours >= 12 ? "pm" : "am";
// adjust hour to 12h format
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
return hours + ":" + minutes + " " + ampm;
}

Related

javascript getHours() is not a function

I want to add a minute offset to the current time and display it in 12 hour format
var now = new Date();
var offset = 1000;
var timeOffset = now.setMinutes(now.getMinutes() + offset);
var hours = timeOffset.getHours();
var minutes = timeOffset.getMinutes();
var ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0'+minutes : minutes;
var newTime = hours + ':' + minutes + ' ' + ampm;
console.log(newTime)
why is this throwing TypeError: dateTime.getHours is not a function?
setMinutes set the minutes on the current date-object so take now for further calculations.
var now = new Date();
var offset = 1000;
now.setMinutes(now.getMinutes() + offset);
var hours = now.getHours();
var minutes = now.getMinutes();
var ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0'+minutes : minutes;
var newTime = hours + ':' + minutes + ' ' + ampm;
console.log(newTime)
The following line does not work as you intened;
var timeOffset = now.setMinutes(now.getMinutes() + offset);
timeOffset will be an integer with a number of miliseconds. Instead off defining a second var, you can alter the now variable like so;
var now = new Date();
var offset = 1000;
now.setMinutes(now.getMinutes() + offset);
var hours = now.getHours();
var minutes = now.getMinutes();
var ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0'+minutes : minutes;
var newTime = hours + ':' + minutes + ' ' + ampm;
console.log(newTime)

How to set am/pm in javascript

I am using new Date() to create a customize time, and also I'm using a function to format time in am/pm:
const formatTimeAMPM = (date, midnight = { am: "AM", pm: "PM" }) => {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? ` ${midnight.am}` : ` ${midnight.pm}`;
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? "0" + minutes : minutes;
hours = hours < 10 ? "0" + hours : hours;
var strTime = hours + ":" + minutes + " " + ampm;
return strTime;
};
let startDate = new Date(Date.now());
console.log('before change :',formatTimeAMPM(startDate));
startDate.setHours(8, 30, 0, 0);
console.log('after change :',formatTimeAMPM(startDate));
If you run the snippet, you will see console logs the 8:30 pm , Can anyone tell me how to set am for it when I change hour the startDate ?
Your am/pm check is backwards:
var ampm = hours >= 12 ? ` ${midnight.am}` : ` ${midnight.pm}`;
If the hour is >= 12, it should be PM not AM, so it should be:
var ampm = hours >= 12 ? ` ${midnight.pm}` : ` ${midnight.am}`;
Now if you run it, it will show 8:30 AM and if you set the hour to 20 it will show 8:30 PM
This will fix your current issue but it would be better to use an existing library for date formatting since it can get complicated, especially with i18n. There a couple popular ones such as date-fns and moment.js that will do the heavy lifting for you.

Page last modified using Javascript with 12 hour clock showing am or pm

I'm trying to create a script in Javascript that shows when a page was last modified, which returns the date, time, in am or pm format, of modification.
Clearly I am doing something wrong. I can't get the script to run, and it will be in my function AmPm. Can someone please help?
// Javascript code for page modification
// Shows the date, time, am or pm, of modification.
// This section sets the date of modification
function lastModified() {
var modiDate = new Date(document.lastModified);
var showAs = modiDate.getDate() + "." + (modiDate.getMonth() + 1) + "." + modiDate.getFullYear();
return showAs
}
// This section sets the time of modification
function GetTime() {
var modiDate = new Date();
var Seconds
if (modiDate.getSeconds() < 10) {
Seconds = "0" + modiDate.getSeconds();
} else {
Seconds = modiDate.getSeconds();
}
// This section writes the above in the document
var modiDate = new Date();
var CurTime = modiDate.getHours() + ":" + modiDate.getMinutes() + ":" + Seconds
return CurTime
}
// This section decides if its am or pm
function AmPm() {
var hours = new Date().getHours();
var hours = (hours + 24 - 2) % 24;
var mid = 'AM';
if (hours == 0) { // At 00 hours (midnight) we need to display 12 am
hours = 12;
} else if (hours > 12) // At 12pm (Midday) we need to display 12 pm
{
hours = hours % 12;
mid = 'PM';
}
}
var mid = //This is where I am stuck!!
return AmPm
document.write("This webpage was last edited on: ");
document.write(lastModified() + " at " + GetTime() + AmPm());
document.write("");
document.write(" NZ Daylight Savings Time.");
document.write("");
function formatAMPM(date) {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0'+minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
return strTime;
}

How to get the time converted to desired time zone

I have the following code
INPUT:
var dateString = "10/30/2014 02:15 PM +00:00";
var a = dateString .split(/[^0-9]/);
var dateVal=new Date(a[0],a[1]-1,a[2],a[3],a[4],a[5]);
var minutes=dateVal.setMinutes(dateVal.getMinutes() + 330);
var hours = dateVal.getHours();
if(parseInt(hours,10) < 10){
hours = "0"+hours;
}
var minutes = parseInt(dateVal.getMinutes());
var ampm = parseInt(hours, 10) >= 12 ? 'PM' : 'AM';
hours = parseInt(hours % 12);
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0'+minutes : minutes;
strTime = hours + ':' + minutes + ' ' + ampm;
return strTime
OUTPUT:
Actual: 7:45 AM
Expected : 7:45 PM
I am able to get the time zone converted but not able to get the desired output as i like to get 7:45 PM but i always get the way opposite.
Can some help me out with this.
The problem is, that a time past midday doesn't get detected, when you convert the string. Try to search for PM and if found increase your hours by twelve:
var dateString = "10/30/2014 02:15 PM +00:00";
var a = dateString .split(/[^0-9]/);
if(dateString.indexOf("PM") != -1) a[3] = Number(a[3]) + 12;
var dateVal=new Date(a[0],a[1]-1,a[2],a[3],a[4],a[5]);

display time am/pm inside a div with javascript

Hi Everyone I am sorry if this question has been answered before but I haven't been able to find a solution. I am completely new to js so please be nice :)
I wanted to ask how can I have the time display inside a div? I can't get this function to display on my page. When I launch the page in the browser, it is just blank.
Thank you, I hope my question makes sense.
document.getElementById("para1").innerHTML = formatAMPM(date);
function formatAMPM(date) {
var elem = document.getElementById("para1");
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0'+minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
return strTime;
}
You need this:
document.getElementById("para1").innerHTML = formatAMPM(new Date());
And you might also want to wrap it in something like jQuery's ready() to make sure the DOM has been loaded:
$(document).ready(function() {
// Handler for .ready() called.
});
http://api.jquery.com/ready/
jQuery's isn't the only way, but just a suggestion.
document.getElementById("para1").innerHTML = formatAMPM();
function formatAMPM() {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours || 12;
minutes = minutes < 10 ? '0'+minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
return strTime;
}
DEMO VIEW
You can return it in a user-familiar time string with toLocaleTimeString().
A replace will remove the seconds counter-
function formatAMPM() {
var d=new Date().toLocaleTimeString();
return d.replace(/^(\d{2}:\d{2}):\d{2}(.*)/, '$1$2');
}
Or you can call this or your method on a timer-
onload= function(){
window.showTimer= setInterval(function(){
var date= new Date(),
hours= date.getHours(),
time= date.getMinutes();
if(time<10) time= '0'+time;
document.getElementById("para1").innerHTML=
(hours%12 || 12)+':'+time+(hours>= 12? ' pm':' am');
},1000);
}

Categories

Resources