Is there any way to manipulate the html time input, so I can add up to 100 Minutes and 59 seconds?
No. Time input is for time. Your clock is more than 60 minutes?
Another way is to write custom input field with JavaScript. Or add number input field and then with JavaScript calculate hours/minutes/seconds ...
Edit: After re-reading the original post, I'm pretty sure I'm answering the wrong question here. But I'll leave it in case someone else finds it useful.
If you're referring to <input type="time">, you can access and modify the value like a normal input element:
var time = document.getElementById('time');
var button = document.getElementById('button');
function handleButtonClick() {
var parts = time.value.split(':');
var hour = parseInt(parts[0]);
var minute = parseInt(parts[1]);
hour += 1;
minute += 7;
// TODO: Need to validate the new time
time.value = hour + ':' + minute;
}
button.addEventListener('click', handleButtonClick, false);
<input id="time" type="time">
<button id="button">Process</button>
You can use Jquery for this:
function addMinutes(time, minsToAdd) {
function D(J){ return (J<10? '0':'') + J;};
var piece = time.split(':');
var mins = piece[0]*60 + +piece[1] + +minsToAdd;
return D(mins%(24*60)/60 | 0) + ':' + D(mins%60);
}
$("#add").click(function(){
var time = $("#time").val();
var new_time = addMinutes(time, '100');
alert(new_time);
});
Working DEMO
Related
Similar to "This site has been accident-free for x days," the number would increase automatically every day. I'm ok with entering a starting number or the date from which I want to count. Also like a reverse countdown. Thanks in advance!
You can do something like this:
function getAccidentFreeDays() {
const dateThen = new Date('11/17/2021'); // enter the accident free day
const dateNow = new Date(); // gets todays date
const diff = dateThen.getTime() - dateNow.getTime(); // get the difference between the date then and the date now
const days = Math.ceil(diff / (1000 * 3600 * 24)); // converts the milliseconds to days
return days;
}
Get the start date and minus it from the current date, then get the difference.
Using JavaScript
const date1 = new Date('11/18/2021');
const date2 = new Date();
const diffTime = Math.abs(date2 - date1);
const diffDays = Math.round(diffTime / (1000 * 60 * 60 * 24));
document.getElementById('x').innerHTML = diffDays;
<div>This site has been accident-free for <span id="x"></span>day(s)
You can use
function sleep(milliseconds) {
var start = new Date().getTime();
for (var tik = 0; tik < 1e7; tik++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
var counter = 0;
while (true) {
sleep(86400000);
counter++;
}
/* Whatever you have here */
<!DOCTYPE HTML>
<html>
<!-- whatever you have here -->
<body>
<!-- whatever you have here -->
<script src="/script.js"></script>
</body>
</html>
I found a good way to add sleeping (a.k.a waiting) into JS and then converted days to milliseconds (quite a lot to do), so you can insert sleep with the milliseconds from a day, and then add counter. You can then insert counter into your tag represented with x.
How to set 15 min after time from the current time set to time input field using jQuery.
<input name="user_time" id="user_time" type="time" class="form-control" >
I have found this solution that works. I don't know what event you want to use, but for example I have use an onclic even on your input.
$('#user_time').click(function(){
var d = new Date();
var min = d.getMinutes() + 15
var date = d.getHours()+":"+ min;
$('#user_time').val(date);
});
Change the event and use the one you want.
You could:
create a new Date object: let d = new Date();
add 15 minutes: d.setMinutes(d.getMinutes() + 15);
define the new value: let user_time = d.getHours() + ':' + d.getMinutes();
set the new value with jQuery: $('#user_time').val(user_time); (or you can simply do it with Vanilla JS: document.getElementById('user_time').value = user_time;)
let d = new Date();
d.setMinutes(d.getMinutes() + 15);
let user_time = d.getHours() + ':' + d.getMinutes();
$('#user_time').val(user_time); // document.getElementById('user_time').value = user_time;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="user_time" id="user_time" type="time" class="form-control" >
Is there any way to evade jquery and make notification be shown only one time per browser ?
For example, goes to website, notification pops up and that is it, next time when user comes to site from same browser notification wont be showen to him.
I would mainly try to evade adding jquery just for that, so if anyone knows a way to do this with materializecss or some plain html i would be thankful.
How do you trigger the notification?
You could do a basic localStorage check for example to "detect" if the notification has been displayed or not:
function foo() {
const hasSeenNotification = window.localStorage.getItem('shown');
if (!hasSeenNotification) {
window.localStorage.setItem('shown', true);
// show notification here
// ...
}
}
You need to add cookies.
And then check is it is exists:
if (GetCookieShowMessageDocument('ShowPoPUP'))
{
...
}
Here is a sample:
function GetCookieShowMessageDocument(c_name) {
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++) {
x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g, "");
if (x == c_name) {
return unescape(y);
}
}
}
function SetCookieShowMessageDocument(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else var expires = "";
document.cookie = name + "=" + escape(value) + expires + "; path=/";
}
I've got a script that hides most of the page when you first load the webpage.
When it does this, I want it to run a function which gets the current date, then saves it.
I've having trouble getting to do this for a few reasons.
Here is the page load code, where it hides the page if it's not been setup:
$(document).ready(
function() {
if (setup=="true") {
$("#show-page").show();
loadSetup();
} else {
$("#page-nav").hide();
}
});
Here is the date function:
function getStartDate() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth();
var yyyy = today.getYear();
var startDate = dd + (mm * 30) + (yyyy * 360)
//edit
// return startDate
$("#start-date").val(startDate);
localStorage.startDate = $("#start-date").val();
}
I then want an if function in the first part of the loading page which says if the stored start date + 30 is less than the current date, show a message that gives them an updated url (isNewUrlNeeded()).
This was my attempt:
$(document).ready(
function() {
if (setup=="true") {
$("#show-page").show();
loadSetup();
isNewUrlNeeded();
} else {
$("#page-nav").hide();
getStartDate();
}
});
The problem here is that the getStartDate value isn't stored and I'm not sure how to store it. The reason it needs to be stored is so I can call on it later in the function isNewUrlNeeded.
Any help would be greatly appreciated.
Thank you!
Kind Regards,
Gary
You can try this :
function getStartDate() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth();
var yyyy = today.getYear();
var startDate = dd + (mm * 30) + (yyyy * 360)
$("#show-page").data("start-date", startDate);
}
To retrieve this date you could do the follow :
var startDate = $("#show-page").data("start-date");
I'm very new to dojo, so please bear with me. I'm currently working on creating a dojo calendar, with events sourced from a database. The calendar defaults to the grid (monthly) view, and on load, makes an initial call to get the first set of events. The default view makes a call to get the current months events +/- one week. I'm using a JsonRest object in an Observable to accomplish this.
This is currently working without issue. Where I'm having an issue is pulling / updating data for other months. The desired effect is to have the user click the forward or back button to move to the next or previous month. When this occurs, I would like to query the database for the new events to display. I'm able to return the new data and log it to the console, but I cannot get it to display on the calendar. I'm sure I'm missing something (hopefully) simple, but I cant figure it out, or find any good documentation. Here's what I have:
require(['dojo/parser',
'dojo/ready',
'dojox/calendar/Calendar',
'dojo/store/Observable',
'dojo/store/JsonRest',
'dijit/registry'],
function(parser, ready, Calendar, Observable, JsonRest, registry) {
ready(function(){
var MM = new Date().getMonth() + 1;
if (MM < 10)
{ MM = '0' + MM};
var YYYY = new Date().getFullYear();
var monthStore = new Observable(JsonRest({target: '/levelx/teamSchedule/getMonthInfo/'}));
calendar = new Calendar({
store: monthStore,
dateInterval: 'month',
style: styleText,
editable: false,
cssClassFunc: function(e){
return e.calendar;
},
query: '?q=' + YYYY + '-' + MM
}, 'calendar');
calendar.on("timeIntervalChange",function(e){
var YYYY = e.startTime.getFullYear();
var MM = e.startTime.getMonth() + 1;
if (MM < 10)
{ MM = '0' + MM};
monthStore.query('?q=' + YYYY + '-' + MM).then(function(results){
console.log(results);
});
});
I feel like I'm so close. Like I said, I have the correct data being returned to the console (console.log(results)), but no clue how to get it to show in the actual calendar.
I was able to accomplish what I needed with the following modifications. Whenever the user changes the displayed date range, it will automatically run a query to gather and display the proper events.
require(['dojo/parser',
'dojo/ready',
'dojox/calendar/Calendar',
'dojo/store/JsonRest',
'dijit/registry',
'dojo/dom',
'dojo/html'],
function(parser, ready, Calendar, JsonRest, registry, dom, html) {
ready(function(){
var MM = new Date().getMonth() + 1;
if (MM < 10)
{ MM = '0' + MM};
var YYYY = new Date().getFullYear();
var detailStore = JsonRest({target: '/levelx/teamSchedule/getDayInfo/'});
var monthStore = JsonRest({target: '/levelx/teamSchedule/getMonthInfo/'});
calendar = new Calendar({
dateInterval: 'month',
style: styleText,
editable: false,
cssClassFunc: function(e){
return e.calendar;
}
}, 'calendar');
calendar.on("timeIntervalChange",function(e){
var YYYY = e.startTime.getFullYear();
var MM = e.startTime.getMonth() + 1;
if (MM < 10)
{ MM = '0' + MM};
calendar.set('query','?q=' + YYYY + '-' + MM);
calendar.set('store', monthStore);
});
});
});
Try changing the interval-change function so that query is set via Calendar object and not directly onto the store.
calendar.on("timeIntervalChange",function(e){
var YYYY = e.startTime.getFullYear();
var MM = e.startTime.getMonth() + 1;
if (MM < 10)
{ MM = '0' + MM};
// this
this.query('?q=' + YYYY + '-' + MM).then(function(results){
console.log(results);
});
});
Have never used the calendar just yet, so its a guess tbh.. But it looks like there's an initial query to be set in the calendar properties, and that this should reflect in the dojo.store.api. The calendar itself most likely does not observe correctly and then in turn does not render when new data arrives.