We Keep Coding

Is there a rangeselector event to get dates outside the data range?

I am looking to build a chart which loads and displays years worth of time-series data, collected over years, but loaded dynamically in small chunks (1 day, 1 week, 1 month). For instance, I am looking at a chart which is displaying data for 8/21 -> 8/22.
I would like to use the built-in range selector in order to change the date range, for example to change the From date to 8/15, and then go fetch and display data for 8/15 -> 8/22.
I am looking for an event or API which is triggered when the date rangeselector is modified by a user. I have found and experimented with xAxis.events. setExtremes, but this doesn't seem to have what I need. Before triggering this event, the chart does some form of sanitization, the date I give it is discarded and the To-From dates in the event are normalized to the min-and-max range of the data itself. For example, suppose I have data loaded into my chart from 8/19 -> 8/22 (3-day window), but I have my chart zoomed in to 8/21 -> 8/22 (1 day). I would like to see data from 8/15 -> 8/22 so I change the From date to 8/15. The event that gets fired changes the min I entered to be 8/19, as that is the minimum edge of the existing data, but what I would like is an event that says the date was changed to 8/15.
I have also tried to hack something in using the rangeSelector.inputDateParser API, but this is definitely not ideal, and I don't think it will even work, as I can't tell [i]which[/i] date field was edited.
I'm not sure what else to try, but i'm worried I will need to implement/integrate my own custom range selector separately, which I would rather not do.
Here is a jsFiddle using setExtremes. (It's from the API docs, not my code, but it's a good representation of what I'm trying to do)
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/xaxis/events-setextremes/
What I would like to happen is, when I set the From date to '2001-01-01', that the setExtremes event (or some other event) returns 2001-01-01 (Or any equivalent in some other format). But the problem is, it changes 2001 to 2007, because that's the lowest data value, before telling me what value was entered.
Is there any way to detect or trigger an event when I change the date in the range selector to a date outside of the range of the data?

There is no such event in the Highcharts core. However, it can be easily added by wrapping RangeSelector.prototype.drawInput and adding these lines of code:
// Custom event
H.fireEvent(rangeSelector, 'RSValueProvided', {
inputValue: inputValue,
dataMin: dataMin,
dataMax: dataMax
});
After that, you can add a callback function that will be invoked when the event occurs:
chart: {
events: {
load: function() {
var chart = this;
Highcharts.addEvent(chart.rangeSelector, 'RSValueProvided', function(e) {
var date = +new Date(e.inputValue);
if (date < e.dataMin || date > e.dataMax) {
console.log(e.inputValue);
}
});
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/cf0h8tp5/
API reference:
https://api.highcharts.com/class-reference/Highcharts#.fireEvent%3CT%3E
https://api.highcharts.com/class-reference/Highcharts#.addEvent%3CT%3E

Fullcalendar recurring event exclusion

I'm using fullcalendar with drag-drop external events and json data source.
These events repeat weekly by default.
I want to now add functionality that enables a user to delete a single instance of this repeating event (like in google calendar).
I believe this will require some sort of mechanism to exclude a certain event date from a repeating event.
I wasn't able to find anything in the fullcalendar documentation that would support this sort of behaviour out-of-the-box.
I would prefer a client-side only solution to this.

I have created a jsfiddle that shows how to display a daily concurrent event with the exception of one date. I have included a custom property (excludedDate).
In your solution, you will need to include a property called, say, excludedDates which contains an array of dates, and every time you want to delete a single instance you just add the date to this property array. Then, at the eventRender you will loop through this array to see if you need to exclude the event for any given day.
eventRender: function(event, element, view) {
var theDate = event.start
var excludedDate = event.excludedDate;
var excludedTomorrrow = new Date(excludedDate);
//if the date is in between August 29th at 00:00 and August 30th at 00:00 DO NOT RENDER
if( theDate >= excludedDate && theDate < excludedTomorrrow.setDate(excludedTomorrrow.getDate() + 1) ) {
return false;
}
}

Knockout and Kendo Datetimepicker resets date to today when changing time

I have page that uses the Kendo DateTimePicker with the input bound to a Knockout Observable. I am using knockout-kendo.js for the bridging.
As you can see in this JSFiddle, I set up the observable with today's date time at initialization. I later set the value (as if it was loaded from an ajax retrieval, I just didn't want to deal with the echo api on JSFiddle)
var SchedulerAppointmentModel = function () {
var self = this,
saved = [],
initComplete = false;
self.StartDateTime = ko.observable(moment().format("MM/DD/YYYY hh:mm A"));
self.StartDateTime(moment("10/23/2014 1:30 PM").format("MM/DD/YYYY h:mm A"));
};
The problem is, if I change the time in my drop down box, the date resets to today. I wanted to leave the date alone.
I think it has something to do with setting the kendoDateTimePicker in code and not in html. I think if i could somehow set the max later, it would work.

Not sure if you still need an answer, but...
I see you've pulled in the knockout-kendo library. With that there is no need to manually initialize the dateTimePicker. You can simply use the binding that comes with that library:
<input id="appt-start-datetime" value="0" data-bind="kendoDateTimePicker: StartDateTime" />
Fiddle Updated

JavaScript to update End Date when Start Date is changed

For the site I am developing, I use a form to update the different fields of a model.
Some of those fields need to be updated according to the values of others.
For example, each instance of a Task, has a start date, an end date, and a length which have to verify the following : End = Start + Length (where weekends are not counted, but that is a secondary issue).
So one of the functions I am trying to write would do :
When the user changes the value of the input Start_date
Get that date from the input field
Get the value of the field Length
Update the value of the input "End date" with (Start_date + Length)
The three inputs concerned by my example have the following IDs : id_start, id_length, id_finish.
Here is what I have written, but which doesn't work at all (nothing visible happens...) :
<script>
$( "#id_start" ).change(function() {
var start = new Date();
var finish = new Date();
var numberOfDays = document.getElementById('id_length').value;
start = document.getElementById('id_start').value;
finish.setdate(start.getDate()+document.getElementById('id_length'))
$('#id_finish').val(finish);
});
</script>
Any hint at a solution to make it work would be hugely appreciated.

Let's look at what your code is actually doing.
var start = new Date();
Here you create a new Date object.
start = document.getElementById('id_start').value;
Here, you change the value of start to the value of the DOM element with the id = 'id_start'. The problem is, this value isn't a Date object. Even the new HTML Date input type (which isn't supported by Firefox or IE) will only give you a string when you pull it's value. So you've created a new Date object, and then you throw it out immediately.
So now start isn't a Date, but a string. In this line:
finish.setdate(start.getDate()+document.getElementById('id_lenght'))
You're attempting to call the undefined .getDate() on a string object, so you'll get an error.
Here's what you need to do. That string (assuming it's in ISO format: YYYY-MM-DD or YYYY-MM-DDTHH:MM:SS) can be used to create a new Date.
start = new Date(document.getElementById('id_start').value);
Now start is actually a date object, and you can add the length in days to get your end date.
Of course, you'll want to make sure the input is in an acceptable format! There's a lot of 'date picker' options (jQueryUi, for example, has a datepicker), and if you're only interested in supporting Chrome, the works well.

What's the difference between bootstrap datepicker "setDate" and "update" methd?

I've tried to use
$element.datepicker('setDate', dateObj);
And
$element.datepicker('update', dateObj);
to set the internal date of a datepicker. But it looks like if i use setDate, the default selected date(which is the start date) is still highlighted, but update will clear the default selected date and use the new dateObj as selected
I wonder how to clear the default selected date with setDate

I've been playing around trying out different alternatives to the API and according to my findings, there's no difference between those two.
$("#calendar").datetimepicker("update",new Date());
$("#calendar").datetimepicker("setDate",new Date());
It seemed to me confusing and suspicious that they'd put in two different methods for the same task so I started asking around. By the word of mouth, I've learned that the former was originally intended to be the general setter of all properties but due to technical issues, the functionality was dropped (only retaining the date setting capability due to compatibility issues for pre-existing code).
$("#calendar").datetimepicker("update", "weekStart", 4);
The above was but isn't anymore changing the starting week of the control.

Difference between bootstrap datepicker “setDate” and “update” is as follows:
$("#calendar").datetimepicker("setDate",new Date()); = triggers an event "change"
$("#calendar").datetimepicker("update",new Date()); = no triggers an event "change"