I actually tried to restrict users to pick dates within 2 years from today in Datepicker.
So now there is one issue that is coming up that when in zoom out too much (By zooming out I mean when we click on the month name it will zoom out to all months and and similarly all month to all year)
this is the zooming out I am talking about
but if I zoom out to such an extent where it shows the calendar in group of a decade or a century I am not able to zoom in back or I mean not able to go back to the calendar view where I could select dates.
so is there a way to restrict users to zoom out after a level? or is there a way to fix it?
My datepicker version is Bootstrap v4.1.1
This is the code we are using
tz_today Is today's date in yyyy-mm-dd format.
endDate = new Date(new Date().setFullYear(new Date().getFullYear() + 2));
pickDate = new Date(pickDate); // in yyyy-mm-dd format
$('#Datepicker').datepicker('destroy').datepicker({
todayHighlight: true,
beforeShowDay: function (date) {
$highlight = calendar_highlight_classes(highlight_dates, pickDate, date);
return $highlight;
}
}).datepicker('setStartDate', new Date(tz_today))
.datepicker('setEndDate', endDate);
Well for me MaxViewMode worked like a charm. By default, it is set as 4 but we can change it acc. to our preference
days(0) -> month(1) -> year(2) -> decade(3) -> century(4)
MaxViewMode: 2 - to limit users to go up to years view mode
my code to limit users to go only till year
$('#Datepicker').datepicker('destroy').datepicker({
todayHighlight: true,
endDate: endDate,
maxViewMode: 2
});
Here is the documentation https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#maxviewmode
Related
I'm having difficulty getting my users to return to the month they were working in after a change is made.
Currently, I have a function that initializes the calendar.
var iv = localStorage.getItem("fcDefaultView") || 'timeGridWeek';
var id = localStorage.getItem("fcDefaultDate") || new Date;
initialView: iv,
initialDate: id,
datesSet: function (dateInfo) {
localStorage.setItem("fcDefaultView", dateInfo.view.type);
localStorage.setItem("fcDefaultDate", dateInfo.startStr);
},
What is strange is that, when the user is in any view other than monthView, everything works fine. But when in monthView, when they return to the calendar, it displays the previous month.
The issue you've got with the month view is that the "start" date of any month view in fullCalendar is often a day or two before the start of the month. For example if you open fullCalendar month view for the current month (August 2021) you'll see that the first date displayed on the calendar is 27th July. So if you log dateInfo.startStr as you're adding it to the localStorage, you'll see that for August 2021 (again for example) it'll save 27th July 2021.
However if you then set that as the initial date next time you load the calendar, fullCalendar then sets the view to the month which the date occurs in.
To solve this, rather than using the date provided directly in the datesSet callback, you can get the "currentStart" value from the view object, which is the start of the interval the view is trying to represent, rather than the start of the visible time period. This distinction only really applies in month view, so it has no impact on the already-working behaviour other views.
Change the setItem call to this:
localStorage.setItem("fcDefaultDate", dateInfo.view.currentStart);
As this is a JS Date object which then gets serialised, rather than an ISO string, you need to explicitly parse it when reading it out again, so another small change is required:
var id = Date.parse(localStorage.getItem("fcDefaultDate")) || new Date();
Demo: https://codepen.io/ADyson82/pen/JjNrMBd
Documentation: https://fullcalendar.io/docs/view-object
It's because the month starts from 0, not 1. so January is "0" and February is "1".
I have used moment.js to calculate 30 days limit in a form field where I have used daterangepicker.js to pick the date. I have disabled all previous date from current date and all dates after 30 days counting from current date. Everything was working fine until the "year" nation attacked(hehe git it?).
My date calculation was working fine using moment.js, but as the year is changing, everything breaks. Whenever I change the year to 2021 from 2020 every date becomes disabled. Like I want to post something today(22/12/2020) and want to set the deadline next year, to do that when I change the year every date becomes disable. Before changing the year I can see the dates of next year enabled and I can select it, it works fine like that. But whenever I change the year dates becomes disabled.
This is my current code to calculate date limit:
$('input[name="application_deadline"]').daterangepicker({
locale: {
format: 'DD-MM-YYYY HH:mm'
},
singleDatePicker: true,
showDropdowns: true,
startDate: moment(),
endDate: moment().subtract(-29, 'days'),
minDate: moment(),
maxDate: moment().subtract(-29, 'days')
});
My code technically works if I disable the line:
maxDate: moment().subtract(-29, 'days')
Then every date is enabled after the current date but removes the 30 days limit which I require to be working.
I have attached two screenshots of before and after changing year for the reference.
What you're describing sounds like a bug in daterangepicker.js. To reproduce, I've tested latest version from their website using jQuery 3.5.1.
Unfortunately I'm not able to reproduce what you're describing. Did you try updating to latest version 3.1?
I'm needing some guidance with a little jQuery's datepicker problem, surely its some detail i'm overseeing.
I'm trying to set some minimum dates for two datepickers; I fetch via ajax a message containing a description, a start date, and an end date, and show those values on a form. For start/end dates, I have jQuery datepickers, and for start date I always set the mininum date as today, which usually overwrites the fetched value. On the other hand, for end date, I want to set the minimum date as whatever is selected on the other datepicker (so you can't cross dates and set an end date lower than start date)
I try to set the EndDate.datepicker minDate as soon as I bind the datepicker, and again after eventually setting a value for StartDate, but it still isn't working on EndDate (it doesn't limit any date, much less update the limit when I change the StartDate)
This's the code I have:
StartDate.datepicker({ minDate: -0 });
EndDate.datepicker({ minDate: StartDate.datepicker("getDate") });
//Initial Behavior - when loading, show last landing message
$.ajax({
...
success: function (data) {
var fetchedStartDttm = ParseJsonDate(data.GetMessageResult.StartDttm);
var fetchedEndDttm = ParseJsonDate(data.GetMessageResult.EndDttm);
var today = new Date();
if (today <= fetchedEndDttm) {
//Message still in valid period
Message.val(data.GetMessageResult.MessageDesc);
StartDate.datepicker("setDate", fetchedStartDttm);
EndDate.datepicker("setDate", fetchedEndDttm);
} else {
//Last message already expired
Message.val("Text to be displayed (DELETE THIS REMINDER)");
StartDate.datepicker("setDate", today);
EndDate.datepicker("setDate", today);
}
//minimum enddate should be at least the startDate
EndDate.datepicker({ minDate: StartDate.datepicker("getDate") });
}
});
I'd deeply appreciate any help!
-ccjmk
I found similar questions and they have working solutions (at least for me)
Explaned here:How do I set Min Date in Datepicker from another Datepicker?
and here: Restrict date in jquery datepicker based on another datepicker or textbox
I'm using this version of Bootstrap DatePicker: http://eternicode.github.io/bootstrap-datepicker/ (the range type), and i have uploaded my demo on JSFiddle on here: http://jsfiddle.net/qs5co179/6/
The relevant JavaScript:
$('#sandbox-container .input-daterange').datepicker({
format: "dd/mm/yyyy",
minViewMode : 1
});
I have set the parameter minViewMode : 1 so I can view only months on calendar instead of full days, the reason is that I want to strict the user to enter:
1st day of the month in: input name="start"
and strict them too to enter only the last day of the month in: input name="end" (but the default is always 1st day of the month when you click)
For example my data entry that i am looking for like below:
From: 01/07/2015 - To: 30/09/2015.. in this format (dd/mm/yyyy)
Now I can't find any parameter to set the calender to pick the last day of the month instead of always 1st day when you click on the month in "To:" field.
one more thing also that I want to always make "From:" and "To:" having 3months period and no less, I want always to make the range 3 months minimum for the entery.
Thanks a lot in advance...
You could attach an event handler to the changeDate event (doc), and change the date manually (i.e. add a month, substract a day).
For the date handling part, I would
Get the date parts
Increase the month by one, if its December, then change it to January
Create a new Date instance
date = date.setDate(date.getDate() - 1) to get the correct day
The date parts could be exctracted by simple string slicing:
var day = str.slice(0,2);
var month = str.slice(3,5);
var year = str.slice(6,10);
I am using fuelux date picker and I have two date pickers on a page. Basically a start date and an end date. What I want to do is initialize both at the beginning and then when the user select a start date then restrict the end date picker to only have date starting from the start date that was selected by the user.
// Initialize datepickers
$('#startDate, #endDate').datepicker();
// When the start date changed by user
$('#startDate').on('changed.fu.datepicker dateClicked.fu.datepicker', function (evt, startDate) {
$('#endDate').datepicker('setDate', startDate);
$('#endDate').datepicker({
restricted: [{ from: '01/01/1900', to: startDate }]
});
});
Right now the set date works but restricted doesn't. Any solution?
You are trying to re-initialize the end date with different options which Fuel UX doesn't support. For your idea to work, you cannot initialize the end date until the start date is set.
Please review Destruction and re-initialization