We Keep Coding

datetime picker in Tabulator?

I want to use pure javascript datetime picker in Tabulator.js. Usually I use Materializecss but they don`t provide datetime picker. Only date or time. So I had to find one. I chose rome although I liked better dtsel - it got much nicer time picker but I have not found cdn for it.
I found that Tabulator provides a way to implement customer editors. In my code (see jsFiddle) it is the editor:dateEditorOriginal function. It works nicely and even provides build in calendar. Could someone tell where the calendar comes from? Tabulator or moment?
But I need datetime so please have have a look at the var dateEditor. I tried to use rome picker but I am not able to make it work. I am able to select the date and time but it will not pass it to Tabulator.
var dateEditor = function(cell, onRendered, success, cancel, editorParams){
//cell - the cell component for the editable cell
//onRendered - function to call when the editor has been rendered
//success - function to call to pass the successfuly updated value to Tabulator
//cancel - function to call to abort the edit and return to a normal cell
//editorParams - params object passed into the editorParams column definition property
//create and style editor
var editor = document.createElement("input");
//var cellValue = cell.getValue()
var cellValue = moment(cell.getValue(), "DD-MM-YYYY HH:mm").format("DD-MM-YYYY HH:mm")
// editor.setAttribute("type", "date");
var cal
//create and style input
editor.style.padding = "3px";
editor.style.width = "100%";
editor.style.boxSizing = "border-box";
//Set value of editor to the current value of the cell
// editor.value = moment(cell.getValue(), "YYYY-MM-DD HH:mm").format("YYYY-MM-DD HH:mm")
//editor.value = cellValue
//set focus on the select box when the editor is selected (timeout allows for editor to be added to DOM)
onRendered(function(){
//console.log(cellValue)
cal = rome(editor,{
"inputFormat": "DD-MM-YYYY HH:mm",
"initialValue": cellValue,
"timeInterval": 600,
"weekStart": 1
})
// editor.focus();
// editor.style.css = "100%";
});
//when the value has been set, trigger the cell to update
function successFunc(){
var tmp = editor.value
console.log(cal.getDate())
console.log(tmp)
console.log(cell.getValue())
// success(tmp)
// success(moment(editor.value, "DD-MM-YYYY HH:mm").format("DD-MM-YYYY HH:mm"));
}
editor.addEventListener("change", successFunc);
editor.addEventListener("blur", successFunc);
//return the editor element
return editor;
};
Could someone help me to implement pure javascript datetime picker in Tabulator?
Here is jsFiddle. The column From uses my implementation of datetime picker and column To uses original dateEditor.
The issue I am facing to is that with the current set up the correct date is selected, passed to the input field but not to the Tabulator. It is my explanation what is happening if I am correct. Once the date & time selection finished I want it to see it in the Tabulator.

If you don't have to use Rome, I can suggest using flatpickr instead.
var dateEditor = (cell, onRendered, success, cancel, editorParams) => {
var editor = document.createElement("input");
editor.value = cell.getValue();
var datepicker = flatpickr(editor, {
enableTime: true,
dateFormat: "j-n-Y H:i",
onClose: (selectedDates, dateStr, instance) => {
success(dateStr);
instance.destroy();
},
});
onRendered(() => {
editor.focus();
});
return editor;
};
Here is an example:
https://jsfiddle.net/fazLh6v0/

you must call success() to update Tabulator.
for some reason (that I spent WAY too much time on but didnt get an answer), success() in your example does NOT like to be called with the existing cell value ?
So I added :
(cell.getValue() != cal.getDateString()) && success(cal.getDateString());
It also didnt like that your 2nd row doesnt have a timecode in it, so the first choice of using the time selector is ignored, and sets it to 00:00, then the 2nd (and further applications) go as expected.
Solving these other problems, is up to you I guess, coz I dont use rome.
I just use the builtin <input type=datetime-local>

Your Problem is that the blur event (You use it to capture the finish of the user) triggers already when the user clicks on the calendar - so before his choice is processed.
The only solution I could find is to use another framework.
With flatpickr (It also has a time feature and looks much nicer) for example, you can define a close event that triggers the success function.
(just like Tim's solution)

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?

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.

How to get a time visible in events?

I'm using FullCalendar 1.5.3 to display events from a json feed. I have 4 fields per event fed back - id, start, end and title. This works with each event block displaying the title.
In the FullCalendar examples the events with start and end dates show with a start time inserted before the title (formatted as 7p or 10:30a for example). How is this achieved? All my events have start and end times and I'm using the following settings...
$(document).ready(function(){
$('#claimCalendar').fullCalendar({
theme : true,
editable : false,
firstDay : 1,
aspectRatio : 4,
timeFormat: {
'' : 'H(:mm)t'
},
allDayDefault: false,
eventSources: [
{ //list of my eventSources
}
],
loading: function (bool) {
if (bool) $('#loading').show();
else $('loading').hide();
}
});
});
Any ideas on how to get the time to display? Eventually I would like the following information displayed for each event
start title end e.g. 00:00 title 07:30

I've sorted this out... Not sure why this has happened as I have used both allDayDefault:false in the fullCalendar params and allDay:false in my events but no time was displayed. I then modifed line 38 in FullCalendar.js 1.5.3 from allDayDefault:true to allDayDefault:false and hey presto I got my times showing.
I've also solved my second task and my events now display start - title - end.