We Keep Coding

Get the date variable in Fullcalendar.js and Datepicker

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());
});

Tempus Dominus Dynamically Changing Options

I feel like this question is reasonably straightforward. I'm trying to dynamically change options on the Tempus Dominus Bootstrap Datetimepicker.
In particular, I'd like to change the options on one of my datepickers on change of another datepicker on the same page.
// Initialisation.
$(function () {
$("#datetimepicker_start").datetimepicker({
format: 'DD/MM/YYYY',
date: '{{ widget.value }}',
minDate: moment() // Today's date.
});
});
// Initialisation.
$(function () {
$("#datetimepicker_end").datetimepicker({
format: 'DD/MM/YYYY',
date: '{{ widget.value }}',
minDate: moment() // Today's date.
});
});
// Document ready, set up event listener:
$('#datetimepicker_start').on('change.datetimepicker', function() {
$("#datetimepicker_end").datetimepicker({
format: 'DD/MM/YYYY',
date: moment()
minDate: $('#datetimepicker_start').val() // Trying to limit the mininmum date of this picker
// to the be value of the first.
});
});
This is an edited example. I'm currently dynamically inserting the initial date picker instantiation with my template logic as it's part of a form that is loaded in by my web framework.
I can't seem to find a way to update these options on the fly. Explicitly what I'm trying to do is link the two date pickers so that the user can't pick an end date earlier than the start. I've also tried
$("#datetimepicker_end).minDate = $('#datetimepicker_start).val()
Or even just a moment() for the value I set in the above line. No change. Any point in the right direction would be great.
EDIT: SOLUTION:
$('#datetimepicker_start').on('change.datetimepicker', function() {
var new_min_date = $(this).datetimepicker('date');
$("#datetimepicker_end").datetimepicker('minDate', new_min_date);
});
BONUS QUESTION:
The above method does what I'm trying to achieve, however when setting a minimum date it doesn't allow the end date box to stay blank if it already was. Does anyone know how to achieve this?

Dhtmlx date_scale is not called ever in angular?

While it is possilble to change x-scale date format by date_scale from template, it is not work in Angular. I add a directive based on this tutorial, and then add the following code:
gantt.templates.date_scale = function(date){
return gantt.date.date_to_str(gantt.config.date_scale)(date);
};
However, the method is called never.

This is a bug in DHTMLX Gantt (https://forum.dhtmlx.com/viewtopic.php?f=15&t=32888&p=141311&hilit=gantt.templates.date_scale#p141311). Up to now, this bug is not fixed but as you can see in the mentioned link (which is a link from their forum) there is a trick. You can use events as following to get what you want:
gantt.attachEvent("onTemplatesReady", function() {
gantt.templates.date_scale = function(
return gantt.date.date_to_str("%Y, %F %j")(date);
};
gantt.templates.scale_cell_class = function(date){
return "newWidth";
};
});

Bootstrap datetimepicker default date&time in expanded calendar only

This configuration:
$(function () {
$('#datetimepicker').datetimepicker({
defaultDate: moment(),
sideBySide: true
});
});
allows set default date & time when no value is set for this field (e.g. from database).
My question: I would like to configure it so it should show default date&time only after clicking on calendar icon. I.e. if no value is passed to the input it should be empty by default, and if user clicks on calendar, it becomes default (see explanation picture below).

The solution was found here:
$("#myDateTimePicker").datetimepicker({
useCurrent: false
}).on('dp.show', function() {
return $(this).data('DateTimePicker').defaultDate(new Date());
});
It isn't very elegant, so if somebody knows how to make it more pretty, your answers are welcome.

Rendering glDatePicker to dynamically changed date

I am using glDatePicker plugin.
To change dynamically selected date I call following code where dateDepartureVar is the constructor of glDatePicker object.
dateDepartureVar.options.selectedDate = new Date(2015, 9, 18);
dateDepartureVar.render();
This code changes the selectedDate however when the calendar is opened again, it does not open on the selectedDate, it opens wherever it was left off before.
I need the calendar to open exactly on selectedDate. What am I missing?

Please verify you have correctly obtained an instance of the datepicker when you initialized. here's an excerpt (slightly edited) from the official documentation :
When attaching your input, you can pass true to the second call to the glDatePicker constructor to get an instance of glDatePicker returned. You can also do this while chaining with options:
// Doing it in a single pass
var dateDepartureVar = $('#example1').glDatePicker(
{
showAlways: true,
selectableDOW: [0, 2, 3]
}).glDatePicker(true); //Pass true here
More info here (official docs)

This worked for me.
The trick is set firstDate too.
$('select[name="monthSelect"]').change(function() {
let newDate = new Date((new Date()).getFullYear(), parseInt($(this).val())-1, 1);
$.extend(calendar.options, {
selectedDate: newDate,
firstDate: newDate
});
calendar.render();
});