Custom Time picker with seconds


#1

Hi,

For my current development I require the duration in seconds, which I’ve setup a custom scale for and also require to have both start date and end date in the lightbox section under the following format “%d %m %y %h:%i:%s”.

I’ve used the custom blocks functionality to setup the required section, but I am not able to get it save both start date and end date. I can get it to save either one of them and the other one is automatically synced to the min duration I’ve setup(1 sec).

I’ve used the following custom form blocks:
gantt.form_blocks[“date_start_editor”] = {
render: function (sns) {
return “


//"< TimePicker defaultValue = { moment(‘12:08:23’, ‘HH:mm:ss’) } value = ‘value’ /> "
//< div >
},
set_value: function (node, value, task) {
	if (!task.unscheduled) {
		var date_local_value = gantt.date.date_to_str("%Y-%m-%d")(value) + "T" + gantt.date.date_to_str("%H:%i")(value)
		node.childNodes[0].value = date_local_value;
	}
},
get_value: function (node, task) {
	task.start_date = new Date(node.childNodes[0].value)
	task.end_date = gantt.calculateEndDate(task.start_date, task.duration)
	return task.start_date;
},
focus: function (node) {
	var a = node.childNodes[0];
	a.select();
	a.focus();
}

};

gantt.form_blocks[“date_end_editor”] = {
render: function (snd) {
return “


//"< TimePicker defaultValue = { moment(‘12:08:23’, ‘HH:mm:ss’) } value = ‘value’ /> "
//< div >
},
set_value: function (node, value, task) {
	if (!task.unscheduled) {
		var date_local_value = gantt.date.date_to_str("%Y-%m-%d")(value) + "T" + gantt.date.date_to_str("%H:%i")(value)
		node.childNodes[0].value = date_local_value;
	}
},
get_value: function (node, task) {
	task.end_date= new Date(node.childNodes[0].value)
	return task.end_date;
},
focus: function (node) {
	var a = node.childNodes[0];
	a.select();
	a.focus();
}

};

This is how I want the two fields to look. I’ve tried to use the built-in picker but there I could not find any proof that it supports timestamp edit on the range picker. Only way I managed to did it was using the duration type time picker but it’s not what I am looking for. I cannot add both start end date and duration using that.

On task drag I have no issues scheduling, it syncs automatically the the zoom I am currently in.

Any help would be highly appreciated!

Thanks!


#2

P.S. I have a pretty tight deadline, would REALLY appreciate a faster response.


#3

Can I please get some help on this? Thanks!


#4

Hope I am not breaking any forum rules by quoting myself. But I’ve managed to fix the issue. Lightbox save is working fine now.
But sadly I have another issue, when I double double click on an event it does not read the seconds, they are always 00, it always stop at min. What configuration should I add for this?

Thanks!


#5

Hi,

I’ve been scrapping all the forums/documentation but did not manage to find any property for this. Is there anything I can do? My current issue is that I need to somehow set the date format in the lightbox section. I have no issues saving the data but when I want to open it, it does not read the seconds, it only reads up to mins, default to 00 seconds, like below.

As you can see above the highlighted task I have the start date of 00:00:00 and endate of 00:00:01, but when I retrieve the task it does not read the seconds, defaults to 00. Is there an option I can use?


#6

Hello Emilian,
Gantt doesn’t have the second duration_unit and scale. The dev team will add that feature in the future, but I cannot give you any ETA.

For now, you can try implementing that by using Gantt API and Javascript, but there is no guarantee that all Gant features will work correctly with it.
Here is an example of the implementation:
https://snippet.dhtmlx.com/5/6ad689c75

Please note, that when Gantt loads the data, it creates HTML elements for the timeline cells. So, if you try to load big intervals with the second scale, the browser won’t be able to load the page or it will take a long time.

Also, please note, that if you have the license, you can contact the support team according to the instructions in the email with the license as questions on the forum have a lower priority.


#7

Hi Ramil,

Thank you for the answer.

I’ve already implemented the example you gave me. After some trial and error I’ve managed to make all the major components to recognize the seconds. The only issue I have as of now is that on TaskEdit the lightbox does not recognize the full start/end-date(seconds included) and it defaults to 00 seconds. Is there any work-around I can do as of now? Since the seconds scale is not natively supported. This is a major requirement of my implementation, I find it weird that it is able to read the dates properly in the grid columns but not in the lightbox. Is there a specific lightbox date config or something like that?

And regarding the license, I am currently doing a prototype using the trial to see if the library can fulfill all our needs.

Thank you!


#8

I’ve fixed the issue. As of now the component is working fine. Is there a way to import custom components in the form_block return statement? the datetime-local input type I am using is not accessible in firefox, which may pose an issue. I am building the app in react and would like to create a custom component to use that instead of the basic html. I’ve tried it but it does not work. Is it supported?


#9

Hello Emilian,
There is no way to render React elements inside Gantt, you can only add HTML elements.
That feature will be implemented in the future, but I cannot give you any ETA.

In the 7.1 version, it will be partially implemented. The dev team will add a way to let React and Angular render their components inside the grid.


#10

This is great, will be very useful for us as well.

Could you expand on partially though?


#11

Hi Ramil,

When will the 7.1 version be released? That sounds interesting.


#12

Hello Emilian and Joseph,
The 7.1 version is scheduled in November, but it may happen to be released in late October:


#13

The part on allowing component to render wasn’t in part of the list in the 7.1 in Trello, and I’m actually more interested in what it meant by “partially implemented”? Thanks


#14

Hello Joseph,
We updated the Roadmap.
In the 7.1 version, it will be possible to let React or Angular render elements inside the grid. The dev team will try to add a way to do that in other parts of Gantt for example, in the lightbox, but I cannot promise that. In that sense, the feature of rendering Gantt elements via React/Angular will be implemented partially, not for all parts of Gantt.


#15

I see, that’s a great start.

Looking forward to that…Thanks!