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?

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

Sugarcrm date picker disable dates before current date

Has any one managed to disable dates on sugars date picker before the current date?
I am calling it in a custom programmed module like so:
<script id="script" type="text/javascript">
YAHOO.util.Event.onDOMReady(function()
{
var now = new Date();
Calendar.setup ({
inputField : "date",
ifFormat : cal_date_format,
daFormat : "%m/%d/%Y %I:%M%P",
button : "date_start_trigger",
singleClick : true,
step : 1,
weekNumbers: false,
startWeekday: 0
});
});

There is no upgrade safe way to do this.
But have solved it by adding a parameter in include/javascript/calendar.js
Search for line calendar.cfg.setProperty("selected" just after that line add following code
if(typeof(params.customMinDate) != 'undefined')
calendar.cfg.setProperty("minDate", params.customMinDate);
And then in your calendar setup array, you should add following param,
customMinDate : new Date(),
And that should now disable all dates in past. But this works on for the calendar pops up on text field, and not when you click on calendar image.
If you find its solution, do share here, which will help others and me too.
I hope SugarCRM will overcome this limitation and make it more flexible in future releases.