I'm using DateTimePicker jQuery plugin by XDSoft, please check below image
My requirement is that, if i selected current date,(9th Nov, 2015) then the time from time picker should show 6hrs add to current time...
I mean, in above image current Date is selected... and current time is 12.00 but i want that 12.00 & above time should be disable..
How can we do that..??
Based on XDSoft DateTimePicker documentation, here's what can be done:
var logic = function( currentDateTime ){
var d1 = new Date();
// Check that it's today, so we need to restrict time chooser
if (currentDateTime.getDate() == d1.getDate() && currentDateTime.getMonth() == d1.getMonth())
{
// Adding six hours
d1.setHours ( d1.getHours() + 6 );
// Creating 'HH:MM' string
var defaultTime = (d1.getHours() < 10 ? "0" : "") + d1.getHours() + ":" + (d1.getMinutes() < 10 ? "0" : "") + d1.getMinutes();
// Enforce time restriction
// ('this' is jquery datetimepicker object)
this.setOptions({
minTime : defaultTime,
defaultTime : defaultTime
});
}
else
{
// Lift time restriction if selected day is not today
this.setOptions({
minTime : false,
defaultTime : false
});
}
};
// Initiate datepicker with custom logic
$('#datetimepicker').datetimepicker({
onChangeDateTime:logic,
onShow:logic
});
Adding 6 hours solution based on: https://stackoverflow.com/a/13034220/2715393
Related
Let's say I have a button that should display only on the particular time period(9am to 5pm), otherwise the button should not display.
The if statement is only entered if the time is between 9:00 and 17:00 (5pm).
const date = new Date();
const hours = date.getHours();
if (hours >= 9 && hours <= 16) {
// add code to show button
}
Show an alert in a browser on the whole 24 hour period of a set time frame and show it for the same 24 hour period of a set timezone no matter what the user's timezone is.
Then show the period relative to the user's timezone
I spent quite a bit of time figuring this out and wanted to post my results to help someone.
http://jsfiddle.net/y7uLtwno
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.14/moment-timezone-with-data-2012-2022.min.js"></script>
<script>
// Goal: Show a maintenance alert on a webpage that lasts for the 24 hour period relative to a set time zone and then show the alert with the maintenance period relative to the browser's timezone
// Variables: You must set the static timezone relative to where the maintenance is happening
// Scnario: Your server is in one timezone and scheduled maintenance happens every month, and you want to alert users worldwide in their timezone for the whole day
// Author: Joshua Wyss
//MUST use .ready to account for the way that Confluence loads the side-bar. Without it the sidebar loads after the alert and makes the sidebar overlap the header until the user scrolls.
function showHide() {
// Grab the alert div "s" and the text inside the div "h"
var s = document.getElementById(4);
var h = document.getElementById(5);
// *** SET THESE VARIABLES *** //
// Set location to ISO timezone
var location = 'America/Chicago';
// 24 hr format for start and end of maintnenace relative to above timezone. To use 12 hr format change variables t1 and t2 format to 'hh:mm a' the use the "hh:mm am/pm" see: http://momentjs.com/docs
var maintStart = '18:00';
var maintEnd = '20:00';
//For weekOfMonth # should be the number week of the month (starting at 1)
var weekOfMonth = 4;
//For dayOfWeek # is >> 0=Sun, 1=Mon, 2=Tue, 3=Wed, 4=Thu, 5=Fri, 6=Sat
var dayOfWeek = 1;
// *** SET THESE VARIABLES *** //
//set d to current time in United States Central Time
var d = moment(moment().utc().format()).tz(location);
// Get "location" day of month number (example: 22 or 01)
var centDateNum = d.format('DD').toString();
// Get "location" day of week number
var centDayOfWeek = d.format('e').toString();
// Check if "location" today matches weekOfMonth and dayOfWeek specified
if (Math.ceil(centDateNum / 7) == weekOfMonth && centDayOfWeek == dayOfWeek) {
// Show the HTML alert
s.style.display = (s.style.display == 'block') ? 'none' : 'block';
// Convert start time to local
var t1 = moment.tz(maintStart, 'HH:mm', location).local().toDate();
// Convert end time to local
var t2 = moment.tz(maintEnd, 'HH:mm', location).local().toDate();
// Add start and end time to the HTML alert. TO modify formatting see: http://momentjs.com/docs/#/displaying/format/
h.innerHTML += " " + moment(t1).format('dddd') + " " + moment(t1).format('HH:mm') + "-" + moment(t2).format('HH:mm');
}
}
</script>
<div id="4" style="display:none; background-color: linen; border: 3px solid darkred; margin: 2px; padding: 2px; font-weight: bold; text-align: center;">
<h3 id="5">Monthly maintenance scheduled this </h3>
</div>
<body onload="showHide()">
I want to create IOS application by Html and javascript.
I have this toggle switch ، I want to call RepeatTask when the user click on checkbox
<input type="checkbox" check="setInterval(RepeatTask,86400000);" >
when it calls the function I want to repeat the this function every day and check time like-
function RepeatTask(){
var date = new Date(); // Create a Date object to find out what time it is
var hours=timeEdit.substring(0, 2);
var minutes=timeEdit.substring(5, 7);
if(date.getHours() === hours && date.getMinutes() === minutes){ // Check the time
// Do stuff
}
}
Can someone help me !
I am using this jQuery cookie plugin for create & display cookie.
var date = new Date();
var minutes = 2;
date.setTime(date.getTime() + (minutes * 60 * 1000));
$.cookie('the_cookie', 'the_value', { expires: date });
alert($.cookie('the_cookie'));
I set two minutes (for test, usually I will use one hour. Explained below.), but if I visit the page again after two minutes, it is still displaying cookie alert.
What I want to do
I want to display a message to my website for one hour timing. It means, when visitor open my website first time, visitor can see the message. When visitor clicks on other page, the message will not show. After one hour, the message will show again.
How can I set minutes, hours as well as days?
Here is my codes fiddle.
That's because you're showing the alert after you create/recreate the cookie. :)
If you move alert($.cookie('the_cookie')); to the start of your code snippet, your cookie will disappear in 2 minutes.
Just use Chrome's Resources > Cookies tab to verify. :)
Here's an updated test harness that will also show the cookie expiring:
http://jsfiddle.net/bvaughn/860rr2Ly/
if ($.cookie('temporaryCookie')) {
alert('Cookie still set');
} else if ($.cookie('longerCookie')) {
alert('Cookie expired at ' + $.cookie('longerCookie'));
} else {
alert('Cookie never set');
}
var expiresAt = new Date();
expiresAt.setTime(expiresAt.getTime() + 5000); // 5 secs
$.cookie('longerCookie', new Date());
$.cookie('temporaryCookie', true, { expires: expiresAt });
You can try
var thecookie = $.cookie('shown');
if (!thecookie) {
var date = new Date();
var delay = 20 * 1000;
date.setTime(date.getTime() + delay);
$.cookie('shown', 'true', {
expires: date
});
$('body').html('show the message')
}
Demo: Fiddle
If you're not worried about IE8 and earlier, you can just use max-age and straight javascript as a simpler solution:
if (document.cookie.indexOf('the_cookie') == -1) {
//show message
document.cookie = 'the_cookie;path=/;max-age=120;';
}
This shows the message and sets a 2 minute cookie if the cookie has not been set previously or has expired.
i need my calendar to go to the current date when [today] button is clicked, so that the user can get to the current day when browsing my calendar.
for example the current month is feb 2013
and the user is browsing on the dec 2015 page of the calendar when he clicks the [today] button it will automatically return to the current days page of the calendar which is
feb 2013.
i'am using
jquery-ui-datepicker.min.js
as a plugin for my calendar
The jQuery UI Datepicker has functionality built into it for this.
See this: http://jqueryui.com/datepicker/#buttonbar
$(function() {
$( "#datepicker" ).datepicker({
showButtonPanel: true
});
});
You could do:
function TodaysDate() {
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
return month + "/" + day + "/" + year;
}
$("#btnToday").click(function() {
var today = new Date();
$(target).datepicker('setDate', TodaysDate());
}
Where target is your date picker control ID.