I have a problem with my angular bootstrap datepicker.
I am trying to disable dates dynamically but for some reason the dates doesn't get disabled when they should be.
Here are the options for my datepicker and disabled function.
$scope.dateOptions = {
minDate: new Date(),
startingDay: 1,
dateDisabled: disabled
};
function disabled(data) {
var mode = data.mode,
date = data.date;
if(mode === 'day'){
$scope.disabledDates.forEach(function(disabledRange){
var from = new Date(disabledRange.fromDate);
var to = new Date(disabledRange.toDate);
if(DateService.inRange(date, from, to)){
console.log("disabled");
return true;
}
});
}
}
I am using popup calendar, when I open it disabled function is being called for each day in the calendar as expected and it returns true for each date that should be disabled but for some reason it doesn't disable them in the calendar.
Can someone try to point me in the right direction, I've tried making directives and decorators to refresh the calendar view but they haven't worked either.
Related
I am using datetimepicker with a pair of linked selectors.
Upon the initial load the 'start_date' should show the current date and the 'expiry_date' should show the 'start_date + 30 days. This works as intended. However when a new 'start_date' is selected the expiry should always default to be 30 days ahead.
This is what I have:
$(function () {
function plusCalendarMonthToDate(e) {
return moment(e.date).add(30, 'days').millisecond(0).second(0).minute(0).hour(0)
}
defaultStartDate = new Date();
$('#datetimepicker-start').datetimepicker({
format: 'YYYY-MM-DD 00:00:00',
minDate: defaultStartDate,
defaultDate: defaultStartDate
});
$('#datetimepicker-expiry').datetimepicker({
useCurrent: false,
format: 'YYYY-MM-DD 00:00:00',
minDate: $('#datetimepicker-start').val(),
defaultDate: plusCalendarMonthToDate(defaultStartDate)
});
$("#datetimepicker-start").on("dp.change", function (e) {
$('#datetimepicker-expiry').data("DateTimePicker").minDate(e.date);
// when a start_date is selected, set the expiry to 30 days plus
plusCalendarMonth = plusCalendarMonthToDate(e);
$('#datetimepicker-expiry').data("DateTimePicker").defaultDate(plusCalendarMonth);
});
$("#datetimepicker-expiry").on("dp.change", function (e) {
$('#datetimepicker-start').data("DateTimePicker").maxDate(e.date);
});
});
When I select a new start_date the expiry_date does not update. I think it is because I already set the 'defaultDate' in the initialisation, if I remove it then the feature works but when I lose my initial default value for the expiry_date. How can I over-write the initial defaultDate?
Seems the solution is to use 'date()' not 'defaultDate()':
$('#datetimepicker-expiry').data("DateTimePicker").date(plusCalendarMonth)
My current calendar looks like this :
full-calendar design
What I'm trying to do is change calendar date when I click a date in datepicker ( which is already done using .fullCalendar('gotoDate',date ) ) , the thing is , to get the resources and events I need to re-send the query to the server with the new value of 'date' , otherwise the calendar won't reload the data.
Here's the url I'm using to get the resources :
resources:
{
url: '/general?handler=AllResources',
data: function () {
return {
// must return the new date to display in calendar
};
}
}
'AllResources' method only get a few records depending on the date specificied
as parameter.
BTW : I'm rendering fullCalendar in document.ready , then I have the following function to give my datepicker the 'changeDate' functionality :
$('.fc-center h2').datepicker({
format: "dd/mm/yyyy",
language: "es",
dateFormat: "dd/mm/yyyy",
todayHighlight: true
}).on("changeDate", function (e) {
var date = moment(e.date);
$("#calendar").fullCalendar('gotoDate', date);
});
Im not sure if i unserstand your problem.
So if you change the date, the resources don't get updated?
Have a look at refetchResourcesOnNavigate
[edit]
Try this:
$('.fc-center h2').datepicker({
format: "dd/mm/yyyy",
language: "es",
dateFormat: "dd/mm/yyyy",
todayHighlight: true
}).change(function (e) {
var mydate =moment($(this).val(),'DD/MM/YYYY').format('YYYY-MM-DD');
$("#calendar").fullCalendar('gotoDate', mydate);
});
And then when initializing the calender set 'refetchResourcesOnNavigate: true' to make sure whenever the calendar changes the resources get loaded again
I'm try to update fullcalendar event after user change date from bootstrap-datepicker: http://bootstrap-datepicker.readthedocs.org/en/latest/events.html
I'm following the (only) solution found here: How to combine jquery date-picker and jquery full calendar
which for bootstrap-datepicker would be:
$('#fullcalEventEnd').datepicker().on('changeDate', function(evt){
var endDate = evt.date;
list.eventUpdated.end = moment(endDate).format("DD-MM-YYYY");
$(cal).fullCalendar('renderEvent', list.eventUpdated, true);
});
What it should do is, update an event created once the user selects the calendar, so on my select function i have:
select: function(start, end) {
$('#fullcalEventFrom').datepicker('setValue', start);
$('#fullcalEventTo').datepicker('setValue', end);
list.eventUpdated = {
title: eventTitle,
start: start,
end: end
};
$(cal).fullCalendar('renderEvent', list.eventUpdated, true); // stick? = true
$(cal).fullCalendar('updateEvent', event);
},
....
list is my global object: var list = {}
But so far nothing, I'm not able to update the event and this line
$(cal).fullCalendar('renderEvent', list.eventUpdated, true); is giving me an error and I don't understand why
Anyone already face this problem?
A bootstrap datepicker is initialized on load. How can I change the options for that datepicker after the page is loaded and the datepicker has already been initialized?
See here for an example http://jsfiddle.net/Leoqs1xg/
The weekStart is set to 4 (Thursday) at first with
$('#mydate').datepicker({weekStart: 4});
but if I change it to something else with
$('#mydate').datepicker({weekStart: 1});
weekStart is still 4.
There is now a method destroy available.
I would do it like this:
$('#sv_pickup_date').datepicker('destroy').datepicker({
format: 'dd/mm/yyyy'
, autoclose: true
, startDate: '20/08/2018'
, endDate: '24/08/2018'
});
Optionally you may want to also use clearDates method.
Like this you can define your own reinitialize method for bootstap datepicker.
I think you need to remove and re-initialize the object
More info here
Bootstrap Datepicker re-initialize date format
I faced the same hurdle in my current project where on change of dropdown I recreate and recheck the available dates. So for that purpose I needed to send over ajax new enabled dates. #strapro was on the right track.
if (called_from_type_of_retreat == 'IGR') {
var myMinDateToday = getTodaysDate();
var enabledDatesArrayIGR = '';
$('#arrival_date_div_IGR').datetimepicker();
/*Ajax call for IGR*/
$.ajax({
type: "get",
url: "getAjaxAvailableDatesIGR",
data: {
"todays_date": myMinDateToday
},
dataType: "json",
success: function(data) {
/*Assign array which is returned as Json*/
enabledDatesArrayIGR = data.availableDatesArray;
/* DateTime Pickers */
$('#arrival_date_div_IGR').datetimepicker('destroy');
$('#arrival_date_div_IGR').datetimepicker({
format: "DD.MM.YYYY",
ignoreReadonly: true,
enabledDates: enabledDatesArrayIGR
});
},
error: function(xhr, status, errorThrown) {
console.log(xhr.responseText);
}
});
}
Pay attention to raw initialize of datetimepicker lines 4.
Then in Ajax call I destroy that datetimepicker (line 17) of datetimepicker and set my settings line (18-22).
My version of eonasdan bootstrap datetimepicker is : 4.17.45
There is no re-initialization. However if you update the value of the input programmatically, for example another part of your code, and want to see the change when you open the picker you could use setDate to read the new value.
// var mynewdate = your-converted-to-date-string;
$('.datepicker').datepicker('setDate', mynewdate);
I'm using Trent Richardson's great Datetimepicker. However, I'm running into a specific issue in which the plugin does not act like the traditional jQuery UI Datepicker.
When you start with a blank date, then press next or previous to change the month, in Datetimepicker it automatically inserts a date and time, where jQuery UI does not. The fact that it adds that is causing issues in my application, and I would just like it not to do that in the first place.
Here's my initialization:
function datepickerAdd() {
$('input[name=valueTextField]').addClass('datepicker');
$( ".datepicker" ).datetimepicker({
dateFormat: 'm/d/yy ',
timeText: '<spring:message code='customMetaData.datetimepicker.time'/>',
controlType: 'select',
timeFormat: "h:mm TT",
ampm: true
});
$('input[name=valueTextField]').attr('onPaste', 'return false')
}
Does anyone have anywhere to start with this?
There's no such option for Date, like alwaysSetTime for Time in this Datetimepicker. So you have to implement it by yourself. Just add these lines in your datetimepicker call:
onChangeMonthYear: function(year, month, dpInst, tpInst) {
if(!tpInst.timeDefined && !dpInst.dateDefined) {
this.value = '';
dpInst.dateDefined = null;
}
},
onSelect: function(date, dpInst) {
dpInst.dateDefined = true;
}
Check working JSFiddle here