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.
Related
I have an input date where I want the user not to choose dates before the current day I am using the minDate function but by default, the calendar jumps me to the date of november 2027. I hope you can help me, I've been working on this for days.
$(document).ready(function(){
$(function(){
const fechaAhora= new Date();
const year=fechaAhora.getFullYear();
const mes=fechaAhora.getMonth() + 1;
const dia=fechaAhora.getDate()+ 1;
const fechaD=year+'-'+mes+'-'+dia;
$("#fecha").datepicker({
minDate:fechaD,
})
})
});
Use this code:
minDate: new Date()
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
}
//Reset At Midnight
function resetAtMidnight() {
var now = new Date();
var night = new Date(
now.getFullYear(),
now.getMonth(),
now.getDate() + 1, // the next day, ...
0, 0, 0 // ...at 00:00:00 hours
);
var msToMidnight = night.getTime() - now.getTime();
setTimeout(function() {
reset(); // <-- This is the function being called at midnight.
resetAtMidnight(); // Then, reset again next midnight.
}, msToMidnight);
}
function reset() {
$('#calendar').fullCalendar('today');
}
I am trying to have FullCalendar.js update the current day everyday at midnight. I pulled this reset snippet from another post on here - but the reset function does not seem to execute.
You have not provided full detail so I don't know what exactly you need but following code might help you to solve your issue.
You can check midnight quite easily using moment.js library.
Following code was taken from another post Best Way to detect midnight and reset data
$(document).ready(function() {
var midnight = "0:00:00";
var now = null;
setInterval(function() {
now = moment().format("H:mm:ss");
if (now === midnight) {
alert('reset() function here');
}
$("#time").text(now);
}, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<code id="time"></code>
Fullcontrol:
You can either use rerenderEvents or refetchEvents as per your requirement. So it will be something like this
function reset(){
$('#calendar').fullCalendar('rerenderEvents');
OR
$('#calendar').fullCalendar('refetchEvents');
}
If you want to re-draw the fullcontrol then here is another informative post 're-draw fullcalendar'
As post suggested you can do
$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar('render');
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
I am terrible with Javascript but learning from my bruises.
On the site I am working on - I currently have a page setup for everyday of the year (i.e. January 1st has its own page '01-jan-01.html' January 2nd is '01-jan-02.html') - I want to make a button that will look up the current date then send the user to the corresponding page (Think 'This day in history').
I already have a button that will pick one of these pages at random and the code works see below:
<script type="text/javascript">
var urls = [
'01-jan-01.html'
'01-jan-02.html'
....
];
function goSomewhere() {
var url = urls[Math.floor(Math.random()*urls.length)];
window.location = url; // redirect
}
Then on my button I simply call goSomewhere() on the onClick() and as i said earlier, this works fine. However I can't figure out how to select based on the CURRENT DATE. any help would be greatly appreciated. thank you!
EDIT: No answers but here is the progress so far:
<script>
var day = date.getDate();
var month = date.getMonth();
function goSomewhere() {
var url = month + "-" + day];
window.location = url; // redirect
}
</script>
This wouldn't even solve my problem entirely but its how I'm trying to wrap my head around the logic. In the above code I would still need to find a way to incorporate the 'jan' (month) varible in each webpage link since the formatting is 'MM-mmmmm-DD' - would it be easier if I change the naming mechanic to simply "MM-DD"? I'd prefer not to since it would involve a lot of manual work. Thanks
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1;
var yyyy = today.getFullYear();
var yy = yyyy.toString().substr(2,2); //get two digit year
if(dd<10){ dd='0'+dd }
if(mm<10){ mm='0'+mm }
location.href = yy+'-'+mm+'-'+dd+'.html';