We Keep Coding

Bootstrap Datetime picker dynamic default date not working

I am trying to update the default date on each link clicked. But it only updates for the first time. After I click another link it still shows old date. But when I debug the defaultD is updating.
I am using bootstrap-datetimepicker
updateSessionDate: function(datetime){
$("#updateUTCDate").modal("show");
var defaultD = moment(datetime, "MMM Do YYYY, h:mm a").format("MM-DD-YYYY HH:mm:ss");
$('#current_session_date').datetimepicker({
defaultDate: defaultD,
});
},
Click any date it will show only the first one I have click.
How do I update date and time on each click?

$('#current_session_date').datetimepicker({
defaultDate: defaultD,
});
This creates the datetimepicker with an initial value, so doesn't work if the datetimepicker already exists.
You either need to call date([newDate]) to update it in place (you'll need to initialise it elsewhere) or destroy() it when the modal is closed, allowing you to remake it with a new initial value.

Setting selected date in calendar to null on Bootstrap datetime picker

I'm using the bootstrap datetime picker, the documentation of which can be found here: https://eonasdan.github.io/bootstrap-datetimepicker/Options/
I'm trying to set the selected date to null. I'm able to blank out the date (i.e. 2/10/2019) within the input field, but when I click on the input field and the calendar opens, the old date is still selected in blue. WiThis is my code to de-select all dates within the calendar.
$(document).ready(function() {
$('.removedate').on('click', function(){
$("#id_booking_date").val('') //this correctly removes date from input field
$('.input-group').datetimepicker({
date: new Date(null)
});
});
This code isn't working. Do you know what I should try?
Thanks!

Can you please try to use "useCurrent" option for this? Check it out here https://eonasdan.github.io/bootstrap-datetimepicker/Options/#usecurrent

Please try this, they have clearly mentioned here
Working example:
$('#datetimepicker4').datetimepicker({
useCurrent: false,//
});

Tempus Dominus - setting date with javascript

I am using Tempus Dominus Bootstrap-4 datetime picker in a modal window that is shown when user double clicks on a specific row of a table:
$('#btn_modal').on('click', function() {
//
// .... some irrelevenat code, like geting data of a specific row,
// .... filling other fields
//
$('#modal_datetimepicker').datetimepicker({
defaultDate: moment(row['date_rkw'], "YYYY-MM-DD"),
viewMode: 'days',
format: 'YYYY-MM-DD',
extraformats: [ 'YYYY-MM-DD' ]
});
$('#modal').modal();
});
The date is properly set first time the modal is shown, but next time the modal is shown (selecting other row to edit), it keeps the previous value,
completely ignoring the above call with new value to defaultDate.
What is the proper way to set datetimepicker to a specific date?
I tried calling destroy with
$('#modal_datetimepicker').datetimepicker('destroy')
or even
$('#modal_datetimepicker').val(row['date_rkw'])
but with no luck.

You can try destroying datepicker when modal is hidden
$('#modal').modal('show')
.on('hidden.bs.modal',function(){
$('#modal_datetimepicker').datetimepicker('destroy')
});
Have a look at this reference - https://getbootstrap.com/docs/4.0/components/modal/

FullCalendar - changeView not resetting onclick

I am trying to change the view of a calendar, and show a specific date range, based on some fields content.
The date format from inside these 2 fields are like this : 2018-05-05
Here's my code:
$('#checkRange').on('click', function () {
$('#calendar').fullCalendar('changeView', 'list', {
start: $('#firstDate').val(),
end: $('#endDate').val()
});
});
So basically, when I click on the "checkRange" button, I want the calendar to switch the view to the list view, and change the "start" and "end" options to the value inside the "firstDate" field, and "endDate" field.
It works fine the first time the page loads, but it looks like once the "start" and "end" options are set, even if I change the content of the "firstDate" and "endDate" fields, and click the "checkRange" button again, it will not update the view.
Any help would be highly appreciated.
Thanks!

Try this: https://fullcalendar.io/docs/v1/rerenderEvents
$("selector").fullCalendar( ‘rerenderEvents’ );
or https://fullcalendar.io/docs/v1/refetchEvents
$("selector").fullCalendar( ‘refetchEvents’ );

Update bootstrap datetimepicker after every step/click

I'm using this extension of Bootstrap's datepicker. It works well enough, but I've come upon a usability issue - when selecting a date/time, the text field the datepicker is attached to does not update unless all the steps (year/month/day/hour/minute) are selected to the end. Clicking away from the datepicker before clicking all the steps yields no change to the date in the text field.
How do I make it so that when the user clicks away mid-selection (maybe because they just want to change the date, but find the already-present hour and minute to be acceptable), the text field is updated appropriately?
For example:
Initial date in field: 2015/10/10 10:00
Click on 2015/10/15 -> click away -> date in field: 2015/10/15 10:00
Is that even possible?

Check this updated fiddle - https://jsfiddle.net/4cqLcxcm/8/
Added on changeDay event on datepicker, which will trigger on change of date and set that value into input box.
Below is the code I have changed.
$(document).ready(function() {
var now = new Date();
$('#send-time').datetimepicker({
format: 'yyyy/mm/dd hh:ii',
startDate: now
})
.on('changeDay', function(ev){
$('#send-time').datetimepicker('update',ev.date);
});
console.log('test');
});