Tempus Dominus Dynamically Changing Options - javascript

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?

Related

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

Populating bootstrap datetimepicker from variable

I am attempting to use the inline bootstrap datetimepicker from https://eonasdan.github.io/bootstrap-datetimepicker/
Currently this is in a popup window after the user clicks on a date/time from a table on another page. I was attempting to pass the date/time from the page into datetimepicker and have it set the default date to that provided. If I set option date like:
$('#datetimepicker12').datetimepicker({
inline: true,
sideBySide: true,
date: new Date(1547870400000)
});
});
This will start the picker with the date given but if attempting to populate a variable and use in the same manner results in the current date/time:
var date = '1547870400000'
$('#datetimepicker12').datetimepicker({
inline: true,
sideBySide: true,
date: new Date(date)
});
});
document.write(date);
I added the document.write to confirm my variable is populated correctly which it does return the correct value set higher in the page.
Thanks for any assistance.
Try this-
var date = '1547870400000';
$('#datetimepicker12').data("DateTimePicker").date(new Date(date));

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.

Angular Pikaday configuration

I tried to implement Angular Pikaday to my project, however, i cannot set options of the Pikaday directive. I don't what to implement it globally, especially for minDate or maxDate options. When i try with getting the element by ID it works fine.
I would like to know what i am missing.
$scope.myPickerObject = {
firstDay: 1, // not showing
numberOfMonths: 2, // not showing
onSelect: function() {
alert('hi');
}
};
//$scope.myPickerObject = new Pikaday({ // onSelect: function() { // alert('hi'); // } // Doesn't work either //});/
Fiddle
You are not providing pickaday a callback, you should define on-select method on input itself like shown in the
Fiddle:
http://plnkr.co/edit/X10a4peeKQK2uj30mJQk?p=preview
If you want to configure specific input

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.

Categories