Attach double calendar to a form

Suite and Optimus Suite 5
#1

Hi I just want to know if there is any way to attach the double calendar object to a form object?

#2

Hi,

there isn’t built-in method for this. If you provided the form initialization code and more details about the issue (to which fields you need to attach the calendar), possibly we could suggest something.

#3

Here is the code:

dhxWins= new dhtmlXWindows();
win = dhxWins.createWindow(“win1”,30, 30,800, 600);
win.setText(“Some text”);
dhxWins.setSkin(“dhx_skyblue”);
var layout = win.attachLayout(“2U”, “dhx_skyblue”);
layout.cells(“a”).setWidth(220);
layout.cells(“a”).setHeight(600);
layout.cells(“a”).fixSize(true,true);
layout.cells(“b”).fixSize(true, true);
var formData = [
{type: “select”, name: “field1”, label: “Some text”},
{type: “input”, name: “field2”, label: “Some text”},
{type: “input”, name: “field3”, label: “Some text”}
];

var dhtmlxForm = layout.cells(“a”).attachForm(formData);

I will like to attach a double calendar component within the form “dhtmlxForm” as another element. Is it possible?

#4

You can init calendar in normal way and use

dhtmlXForm.prototype.items.input.showCalendar=function(item){ var inp = item.childNodes[0].childNodes[1].childNodes[0]; inp.onclick = function(){ mycal.show(); //mycal refers to initialized calendar object } };
and after form init - use

dhtmlxForm.doWithItem("comments", "showCalendar");
#5

I’ve tried but not luck could you send and example of it?

#6

got the following error when trying what you said

and placed the following code on my app:

    var formData = [
         {type: "select", name: "aseguradora", label: "Aseguradora"},
         {type: "input", name: "dCalInput", label: "De"},
         {type: "input", name: "dCalInput", label: "A"},
         {type: "button", name: "consultar", value: "Consultar"}
    ];
   var dhtmlxFrom = layout.cells("a").attachForm(formData);
   var mDCal = new dhtmlxDblCalendarObject("dCal", true);
   dhtmlxFrom.prototype.items.input.showCalendar=function(item){
         var inp = item.childNodes[0].childNodes[1].childNodes[0];
         inp.onclick = function(){
               mDCal.show(); //mycal refers to initialized calendar object
         }
   };
  dhtmlxFrom.doWithItem("dCalInput", "showCalendar");

Please advice

#7

Hello, please check attached demo.

Comments:

Codelines suggested by Stanislav

dhtmlXForm.prototype.items.input.showCalendar...

and your codelines

dhtmlxFrom.prototype.items.input.showCalendar...

are different;

Double calendar does not have autoshow/hide functionality,
custom added into demo.
14.zip (57.1 KB)

#8

I have tried the demo but it is not working quite well since the double calendar show up when you click on the first input field but when you select the date range it doesn’t update the inputs with the date’s selected.

#9

Hello,

You asked for attach calendar to form.
For automatically value inserting you need to use calendar functonality.

Please see improved demo.
14.zip (57.2 KB)

#10

Thank you ! that worked just fine, I guess you guys should think on do an add-on of this double calendar o simple calendar as part of the elements list of the Form object.

#11

Probably this functionality will added in future.

#12

I modified the code litle bit. I’ve added a second input. But the calendat is working only on the first input.

[code]var form, myCalendar;
function doOnLoad() {

		var formData = [
			{type: "input", name: "calendar1", label: "Date2"},
			{type: "input", name: "calendar", label: "Date"},
			{type: "button", name: "btn", value: "Submit"}
		];
		form = new dhtmlXForm("listObj", formData);
		
		dhtmlXForm.prototype.items.input.showCalendar = function(item) {
			var inp = item.childNodes[0].childNodes[1].childNodes[0];
			inp.onclick = function(e){
				e = e||event;
				e.cancelBubble = true;
				e.returnValue = false;
				if (!myCalendar) {
					myCalendar = new dhtmlXCalendarObject(this, true);
					myCalendar.show();
				}
				return false;
			};
		};
		form.doWithItem("calendar", "showCalendar");
		form.doWithItem("calendar1", "showCalendar");
		
	}[/code]
#13

Hello,

for dhtmlxDoubleCalendar youneed a bit different approach.

First, check sample: dhtmlx.com/docs/products/dht … r_dbl.html

Second, some explanation - actualy double calendar does not support assignation to inputs, so you need code from form just to parse inputs’ clicks to show calendar (in you post code almost correct), then you need attach onClickHandler to calendar and set date into input manualy.

if (!myCalendar) {
myCalendar = new dhtmlXCalendarObject(this, true);

will replaced with:

if (!myCalendar) {
myCalendar = new dhtmlxDblCalendarObject(‘dhtmlxDblCalendar’,…
… some settings
myCalendar.draw();
dhtmlxDblCalendar - is already existing container, you need create it manualy

and attach evrnt handler
myCalendar.setOnClickHandler(function (date, cal, type) {
// date - date,
// cal - calendar instance,
// type - “left”/“right” - means calendar
and here depending on left/right - set value to corresponding input,
form.setItemValue(…
})

something like.

#14

I’m sorry I added it in the wrong thread.I wanted single calendars, not double.

Please see here

viewtopic.php?f=17&t=14757&p=49396#p49396