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
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)
I recieve array from mysql database with dates which I need to enable in datepicker and Bootstrap 3 Datepicker doesnt accept it.
var datesArray = [];
oReq.onload = function () {
var arr = $.parseJSON(this.responseText);
$(arr).each(function (index, el) {
datesArray.push(moment(el).format('DD-MM-YYYY'))
});
$('#datetimepicker').datetimepicker({
inline: true,
locale: 'ru',
format: 'DD-MM-YYYY',
minDate: new Date(),
enabledDates: datesArray
});
};
Here how it looks with the creation of array and with its passage to the Bootstrap 3 Datepicker.
And for some reason it displays that all dates are disabled.
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 am not sure what cause it to fire three times after selecting a date through date calendar. Here is the options set for rangeSelector
rangeSelector:{
enabled:true,
inputEnabled: true,
inputDateFormat: '%d/%m/%Y',
inputEditDateFormat: '%d/%m/%Y',
inputDateParser: function (value) {
value = value.split('/');
console.log(value);
return Date.UTC(
parseInt(value[0]),
parseInt(value[1]) - 1,
parseInt(value[2])
);
}
}
by using backbone.view jquery selector, here how i initiate the chart
this.$el.highcharts(Options, this.extra);
and extra as additional settings to trigger the date picker
highlightSer: function (chart){
setTimeout(function () {
$('input.highcharts-range-selector', $(chart.container).parent())
.datepicker({
format: "dd/mm/yyyy",
todayBtn: "linked",
autoclose: true,
todayHighlight: true,
orientation: "auto right"
});
}, 0);
}
is anyone experience this?
#seeARMS solution from this SO worked for me, with one modification:
Create a separate function for your event
One function has the datePicker method and your settings:
$('input_with_date_picker').datePicker({...});
A separate function controls your on changeDate event:
$(document).on('changeDate', 'input_with_date_picker', function({..do something..}));
or:
$('input_with_date_picker').on('changeDate', function({..do something..}));
Update:
The fiddle you provided in the comments is working as expected because of your added function:
$('input.highcharts-range-selector').on('changeDate', function(e) {
alert(e.date);
});
On page load, it executes twice because you have two elements that match. They seem to both be generated by this JS:
rangeSelector:{
enabled:true,
inputEnabled:true,
inputDateFormat:"%d/%m",
inputEditDateFormat:"%d/%m/%Y",
inputDateParser: function (value) {
value = value.split('/');
console.log(value);
return Date.UTC(
parseInt(value[0]),
parseInt(value[1]) - 1,
parseInt(value[2])
);
}
},
If you change the date on either of the elements, the function executes once, which is the goal of your post.
You may be indicating it's not working because the dates aren't updating when you select a new date from the datePicker. I'm not sure why this is, I'm not familiar with highcharts.
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