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());
});
Related
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)
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?
While it is possilble to change x-scale date format by date_scale from template, it is not work in Angular. I add a directive based on this tutorial, and then add the following code:
gantt.templates.date_scale = function(date){
return gantt.date.date_to_str(gantt.config.date_scale)(date);
};
However, the method is called never.
This is a bug in DHTMLX Gantt (https://forum.dhtmlx.com/viewtopic.php?f=15&t=32888&p=141311&hilit=gantt.templates.date_scale#p141311). Up to now, this bug is not fixed but as you can see in the mentioned link (which is a link from their forum) there is a trick. You can use events as following to get what you want:
gantt.attachEvent("onTemplatesReady", function() {
gantt.templates.date_scale = function(
return gantt.date.date_to_str("%Y, %F %j")(date);
};
gantt.templates.scale_cell_class = function(date){
return "newWidth";
};
});
So i have uibDatepicker directive (https://angular-ui.github.io/bootstrap/#datepicker) where i want to send request for each day provided in datepicker, hit server with that date, and return if it should be disabled or not.
The problem is that it's async call, and dateDisabled function does not handle promises.
Any suggestions?
<span uib-datepicker datepicker-options="datepickerOptions" ng-model="selectedDate"></span>
-
$scope.datepickerOptions: {
dateDisabled: function (dateAndMode) {
if (dateAndMode.mode !== "day") {
return false;
}
//async call
TimeService.getIsDateAvailable(dateAndMode.date).then(function (data) {
//returns true or false
return data.data;
});
}
I tried a lot of solutions. I found this answer: Disable dates using factory response UI Bootstrap Datepicker
But i can't apply this to my code.
You could preload the disabled dates and store them in a scope variable and then search for current date in the cached data. I think this is the best solution.
So i managed to fix this with preloading dates that are disabled. The trick i needed is first to get all 42 visible dates from datepicker, and than pass them to server, filter them and return back. Also if we change month, we will have new 42 visible dates, so we need to update disabled dates again.
You can see part of getting datepicker visible dates in this question:
angular bootstrap datepicker get visible dates (day mode)
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