So i have uibDatepicker directive (https://angular-ui.github.io/bootstrap/#datepicker) where i want to send request for each day provided in datepicker, hit server with that date, and return if it should be disabled or not.
The problem is that it's async call, and dateDisabled function does not handle promises.
Any suggestions?
<span uib-datepicker datepicker-options="datepickerOptions" ng-model="selectedDate"></span>
-
$scope.datepickerOptions: {
dateDisabled: function (dateAndMode) {
if (dateAndMode.mode !== "day") {
return false;
}
//async call
TimeService.getIsDateAvailable(dateAndMode.date).then(function (data) {
//returns true or false
return data.data;
});
}
I tried a lot of solutions. I found this answer: Disable dates using factory response UI Bootstrap Datepicker
But i can't apply this to my code.
You could preload the disabled dates and store them in a scope variable and then search for current date in the cached data. I think this is the best solution.
So i managed to fix this with preloading dates that are disabled. The trick i needed is first to get all 42 visible dates from datepicker, and than pass them to server, filter them and return back. Also if we change month, we will have new 42 visible dates, so we need to update disabled dates again.
You can see part of getting datepicker visible dates in this question:
angular bootstrap datepicker get visible dates (day mode)
Related
I am working to add datepicker to fullcalendar so users can skip to a desired date. The issue I am having is getting the date variable from datepicker to work with calendar.gotoDate(). I am sure this is something simple, but I only know enough about javascript to struggle by.
I currently have a script using datepicker like so:
jQuery(function($) {
$('#datepicker').datepicker({
dateFormat: 'yy-mm-dd',
});
function get_datepicker() {
var date = $('#datepicker').datepicker('getDate');
return date;
};
});
After I call fullcalendar (which is working flawlessly) I am trying to add a listener for the date change.
document.getElementById('datepicker').addEventListener('change', function() {
get_datepicker();
calendar.gotoDate(date);
});
since fullcalendar has removed jquery, it makes it a bit tougher (for me at least) to implement other scripts like datepicker, which normally wouldn't make sense to load, but in Wordpress, it is already there...
You are never setting the date variable inside the change listener. Either of the following should work.
document.getElementById('datepicker').addEventListener('change', function() {
let date = get_datepicker();
calendar.gotoDate(date);
});
OR
document.getElementById('datepicker').addEventListener('change', function() {
calendar.gotoDate(get_datepicker());
});
I have a React+Redux application, and I display the date in it using Moment.js. I want a function to run when the date changes.
Right now I have a function to check the date:
checkDate(local) {
if (local === null) {
localStorage.setItem('date', moment().format('MM-DD-YYYY'));
} else if (moment(local).isBefore(moment().format('MM-DD-YYYY'))) {
this.props.resetAll(); // This calls an action.
}
}
And if I call it manually, or refresh the page when the date changes, it works just fine. But, I want to be able to have my application run that this.props.resetAll() line on its own without my having to refresh the page. What would the best way be to go about it? Should it be something that happens on the Redux side of things in an action or reducer? Should I have checkDate() be called every X seconds or so somewhere in the component lifecycle (if so, where)?
Thanks in advance for any help!
I would set a timeout until 24:00 which then calls the update function:
moment() is defined as the current date/time, to get the difference to a specific time, you can use the .diff() function. So for example if you want the milliseconds till the start of the next day:
var msTillEndOfDay = moment().endOf('day').add(1, 'seconds').diff(moment(), 'milliseconds');
.endOf('day') would be 23:59:59 so you just add 1 seconds to have the next day.
You then simply set the Timeout with the specific update function or dispatch the right action:
setTimeout( () => {
this.props.dispatch({type: 'UPDATE_DATE'})
}, msTillEndOfDay);
i have a jquery-datepicker on my page :
<div id="COICalendar" class="datepicker ll-skin-vigo"></div>
The script looks as follows :
$("#COICalendar").datepicker();
This way I always see the complete month.
Now how can I capture the "onselectedmonthchange"-event (if that exists), in my codebehind file?
The reason I need to do that is because I want to several dates to get a specific color. And those dates come from a database.
Additionally I have several of the calendars on the same page, and I want them all to change to the same month when I change the month on one of those calendars.
You can try using beforeShowDay event callback:
// css
.highlightedDate {
/* highlight styles */
}
// javascript
function paintDatepicker(specialDates) {
$("#" + dateFieldId).datepicker({
beforeShowDay : function(calDate) {
/* This callback function will be invoked before painting each
* date.
* Perform required business validations here and then check
* if the conditions are met.
* You may access 'specialDates' here.
*/
if (condition) {
return [true, "highlightedDate", calDate];
}
}
});
}
I have a table in my SQL Server database with two column
'whenDateTime' (datetime,null)
'duration' (time(7),null)
From my javascript I call a JSON-service with
$.getJSON("myService/GetAllHappenings",
function (allData) {
var mappedAction = $.map(allData, function (item) {
return new Happening(item)
});
self.Happenings(mappedAction);
//... some other code...
});
where
self.Happenings = ko.observableArray();
When inspecting "myService/GetAllHappenings" as an URL in my browser (Firefox) I get:
<duration>PT1M</duration>
<whenDateTime>2014-11-12T11:26:00</whenDateTime>
In the database the values are:
sduration whenDateTime
00:01:00.0000000 2014-11-12 11:26:00.000
But when I step through the $.getJSON the values are ok until the line
self.Happenings(mappedAction);
Before this line mappedAction contains the data
"2014-11-12T11:26:00"
"00:01:00"
But just after this line the data are transformed into
"30.06.2020 11:26"
"00:00"
How can this happen?
And how can I fix this?
I think super cool's answer is good. I've ran into weird problems trying to instantiate jQuery-UI datepickers on top of <input type="text"> elements that are supposed to display datetimes when I send them over as datetimes.
I'm working with http://arshaw.com/fullcalendar/ and I would like to dynamically filter the events shown based on various checkboxes on the page. I am using an ajax source (with filters passed as parameters) to gather data.
The problem I am running into is once I load the calendar, I cannot, for the life of me (or stackoverflow searches) figure out how to update the parameters. It seems once the calendar is loaded, those parameters are "baked" and cannot be changed.
I have tried every combination of addEventSource, removeEventSources, removeEvents, refetchEvents, etc (as recommended here: rerenderEvents / refetchEvents problem), with still no luck.
My current solution is to re-initiate the entire .fullCalendar every time a filter is updated-- this is leading to tons of issues as well and really isn't an elegant solution.
Any ideas on a simpler way to do this? Refetching your source with updated parameters each time should be automatic. I really do appreciate your help.
In my code i do like that :
I have an array with the calendars id to display and i update it when the user check or uncheck the checkbox.
In fullCalendar initialization I retrieve all events and i filter them with this function :
function fetchEvent( calendars, events) {
function eventCorrespond (element, index, array) {
return $.inArray(element.calendarid, calendars) > -1;
}
return events.filter(eventCorrespond);
}
$('#calendar').fullCalendar({
events: function(start, end, callback) {
//fetch events for date range on the server and retrieve an events array
//update calendars, your array of calendarsId
//return a filtered events array
callback(fetchEvent(calendars , events));
}
});
and when the user check or uncheck a checkbox i do :
$('#calendar').fullCalendar('refetchEvents');
The solution that works for me is:
$('#calendar').fullCalendar('removeEventSource', 'JsonResponse.ashx?technicans=' + technicians);
technicians = new_technicians_value;
$('#calendar').fullCalendar('addEventSource', 'JsonResponse.ashx?technicans=' + technicians);
After "addEventSource" events will be immediately fetched from the new source.
full answer here https://stackoverflow.com/a/36361544/5833265