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

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)

Best way to get ckeditor textarea value

I am not assured and really curious about this method of getting ckeditor value both are working well
bigMsg_Value = CKEDITOR.instances.editor1.getData();
var htmldata = CKEDITOR.instances.editor1.document.getBody().getHtml();
data that I get from both of that are seems like no difference, I wanna know which one is better and why.

getData() in ckeditor library:
getData: function( isSnapshot ) {
var data = this.getHtml();
if ( !isSnapshot )
data = this.editor.dataProcessor.toDataFormat( data );
return data;
}
As you can see internally ckeditor uses getHtml(). As per my opinion using getData() will be best as it is provided by the library.

Auto update timeAgo value from submitted date

EDIT: I think I should make things more obvious.
What I am trying to do is to make the function that displays the "time ago" from the submitted date of the post auto refresh every minute so that it stays relatively accurate even if the template is not re rendered.
I'd like to auto update my timeago value in my template but it is not working.
I've tried to set up my code with a reactive function, based on the answer to a similar question (https://stackoverflow.com/a/17933506)
Here's my code:
var timeAgoDep = new Deps.Dependency(); // !!!
var timeAgo;
var timeAgoInterval;
Template.postItem.created = function() {
function getTimeago() {
//var now = new Date();
timeAgo = moment(this.submitted).twitter();
timeAgoDep.changed(); // !!!
};
getTimeago(); /* Call it once so that we'll have an initial value */
timeAgoInterval = Meteor.setInterval(getTimeago, 5000);
};
Template.postItem.posted = function() {
timeAgoDep.depend(); // !!!
return timeAgo;
};
Template.postItem.destroyed = function() {
Meteor.clearInterval(timeAgoInterval);
};
I'm pretty sure that the problem comes from this.submitted because if I assign timeAgo = now for example, it will display the time and update like it's supposed to.
I also know that moment(this.submitted).twitter() works fine because when all I do is return it through a helper, it works.

A much better way to do this is to just embrace Meteor's reactivity and render time-dependent values reactively. In your case, the problem is that you are invalidating the dependency once every 5 seconds for each postItem rendered, which will quickly turn into a huge mess.
See https://github.com/mizzao/meteor-timesync for a package that provides reactive time variables on the client (and they are synced to server time too!) It's basically doing what you want, but in a cleaner way. (Disclaimer: I wrote this package.)
You can use moment in the same way to compute the actual string to display. For example, get rid of all the other stuff and just use
Template.postItem.posted = function() {
return moment(this.submitted).from(TimeSync.serverTime());
}
The moment().twitter() extension doesn't seem like a good choice because it only uses the current client time and doesn't allow you to pass in a specific (i.e. server-synced) time or reactive value.

jquery extension return $.each confusion

I am trying to use a jQuery extension I came across (handsontable). I am having no problem creating the table
var spreadsheet = $("#dataTable").handsontable({
rows: 3,
cols: 15,
minSpareRows: 2
});
However after I create the table I want to call various helper functions I see declared in the javascript for the Handsontable object. The problem is the extension seems to return this.each(function() { ... }); and I don't understand how I can access the underlaying Handsontable object from this. The js for the extension can be found here and I put a small demo together on the following link
http://jsfiddle.net/7JTG2/7/
as you can see I would like get the data of one of the cells when I click a button.

The relevant code is in the end:
$.fn.handsontable = function (action, options) {
if (typeof action !== 'string') { //init
options = action;
return this.each(function () {
if($(this).data("handsontable")) {
instance = $(this).data("handsontable");
...
} else {
...
instance = new Handsontable($(this), currentSettings);
$(this).data("handsontable", instance);
}
});
}
}
That means, the code sets the Handsontable instances as a data attribute to the elements (and returns the selected set to be chainable). Having one element, you can easily extract it with instance = $el.data("handsontable"). If you have a set of elements, you will need to loop over it - e.g. with each().

Looks like you could just use the onChange method of the plugin to capture data every time it is entered automatically. No need for a button. A simple example to add to your code above.
onChange: function(data) {
$("#data").append(JSON.stringify(data));
}