Add calendar to json form

Hello everybody,

I tried to attach the dhtmlx calendar to my json form and oriented by this forum topic
http://forum.dhtmlx.com/viewtopic.php?f=17&t=14757
In my case it will not work because, I think I do not understand how to bin the calendar to an input field. This is my code

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<title id='title'>BESI Marine Systems GmbH & Co. KG - Auftragsbestandsliste</title>
		<link rel="stylesheet" type="text/css" href="../../dhtmlx/dhtmlx.css" />
		<script type="text/javascript" src="../../dhtmlx/dhtmlx.js"></script>
		<script src="../../dhtmlx/connector/connector.js"></script>
		<script>
			function buildInterface(){
				dhxWins = new dhtmlXWindows();
				
				// Layout
				ablLayout = new dhtmlXLayoutObject(document.body, "1C");
				ablLayout.cells("a").setText("Auftragsbestandsliste");
		
				// Grid Master
				ablGridMaster = ablLayout.cells("a").attachGrid();
				ablGridMaster.setImagePath("../../dhtmlx/imgs/");
				ablGridMaster.setHeader("Kommission,NeubauNr,Kunde,Liefertermin,KW,Auftragsart,Bestellung,Beschreibung");
				ablGridMaster.attachHeader("#text_filter,#text_filter,#select_filter,#text_filter,#select_filter,#select_filter,&nbsp;,,&nbsp;");
				ablGridMaster.setInitWidths("75,120,150,80,90,150,*,*");
				ablGridMaster.setColAlign("right,left,left,right,right,left,left,left");
				ablGridMaster.setColTypes("ro,ro,ro,ro,ro,ro,ro,ro");
				ablGridMaster.setColSorting("int,str,str,date,str,str,str,str");
				ablGridMaster.enableMultiline(true);
				ablGridMaster.init();
				ablGridMaster.loadXML("xml/master.xml");
				ablGridMaster.attachEvent("onRowDblClicked", function (rID){
					// Detailswindow
					if(!dhxWins.window("ablDetailsWin")){
						win = dhxWins.createWindow("ablDetailsWin",20,20,500,800);
						win.center();
						win.attachEvent("onClose",function(){
							ablAccordion.cells("a3").detachToolbar();
							ablAccordion.cells("a4").detachToolbar();
							ablAccordion.cells("a5").detachToolbar();
							win.hide;
							return true;
						});
					}
					else
						win.show("ablDetailsWin");
						dhxWins.window("ablDetailsWin").setText("Auftrag "+rID);

					// Accordion 
					ablAccordion = win.attachAccordion(rID);
					ablAccordion.addItem("a1", "Auftrag");
					ablAccordion.addItem("a2", "Vertrieb");
					ablAccordion.addItem("a3", "Vertriebsabwicklung");
					ablAccordion.addItem("a4", "m. Konstruktion");
					ablAccordion.addItem("a5", "e. Konstruktion");
					ablAccordion.openItem("a1");
					
					// Toolbar Tab Vertriebsabwicklung
					vertriebsabwicklungToolbar = ablAccordion.cells("a3").attachToolbar();
					vertriebsabwicklungToolbar.setIconsPath("icons/");
					vertriebsabwicklungToolbar.loadXML("xml/vertriebsabwicklungToolbar.xml");
					vertriebsabwicklungToolbar.attachEvent("onclick",function(id){
						if(id=="saveVertriebsabwicklung"){
							dpfs_vertriebsabwicklung.sendData();
						}
					});
					
					// Toolbar Tab m. Konstruktion
					mkonstruktionToolbar = ablAccordion.cells("a4").attachToolbar();
					mkonstruktionToolbar.setIconsPath("icons/");
					mkonstruktionToolbar.loadXML("xml/mkonstruktionToolbar.xml");
					mkonstruktionToolbar.attachEvent("onclick",function(id){
						if(id=="savemKonstruktion"){
							dpfs_mkonstruktion.sendData();
						}
					});
					
					// Toolbar Tab e. Konstruktion
					ekonstruktionToolbar = ablAccordion.cells("a5").attachToolbar();

					// Form Auftrag
					auftragForm = ablAccordion.cells("a1").attachForm();
					auftragForm.loadStruct("xml/auftragForm.xml");
					auftragForm.load("xml/auftragDetails.php?id="+rID);
			
					// Form Vertrieb
					vertriebForm = ablAccordion.cells("a2").attachForm();
					vertriebForm.loadStruct("xml/vertriebForm.xml");
					vertriebForm.load("xml/vertriebDetails.php?id="+rID);
				
					// Form Vertriebsabwicklung
					vertriebsabwicklungForm = ablAccordion.cells("a3").attachForm();
					vertriebsabwicklungForm.loadStruct("xml/vertriebsabwicklungForm.xml");
					vertriebsabwicklungForm.load("xml/vertriebsabwicklungDetails.php?id="+rID);
					
					// Form m. Konstruktion
					var formDataMKonstruktion = [
						{type: "input", name: "GenehmigungsunterlagenAnKlasse", bind: "GenehmigungsunterlagenAnKlasse", label: "Genehmigungsunterlagen an Klasse", width: "65"},
						{type: "input", name: "KonstruktionsAbschluss", bind: "KonstruktionsAbschluss", label: "Konstruktionsabschluß", width: "65"},
						{type: "input", name: "EinbauunterlagenAnKunden", bind: "EinbauunterlagenAnKunden", label: "Einbauunterlagen an Kunden", width: "65"},
						{type: "input", name: "AblieferungsdatenErforderlich", bind: "AblieferungsdatenErforderlich", label: "Ablieferungsdaten erforderlich", width: "65"},
						{type: "input", name: "Ablieferungsunterlagen", bind: "Ablieferungsunterlagen", label: "Ablieferungsunterlagen", width: "65"},
						{type: "input", name: "LieferterminAntriebe", bind: "LieferterminAntriebe", label: "Liefertermin Antriebe", width: "65"},
						{type: "input", name: "LieferterminSchrank", bind: "LieferterminSchrank", label: "Liefertermin Schrank", width: "65"},
						{type: "input", name: "Ventilliste", bind: "Ventilliste", label: "Ventilliste", width: "65"},
						{type: "input", name: "SchrankMasse", bind: "SchrankMasse", label: "Schrankmaße", width: "200"},
						{type: "input", name: "Mimik", bind: "Mimik", label: "Mimik", width: "65"},
						{type: "input", name: "Sensortabelle", bind: "Sensortabelle", label: "Sensortabelle", width: "65"},
						{type: "input", name: "Bemerkungen", bind: "Bemerkungen", label: "Bemerkungen", width: "400", rows: "5"}	
					];
					mkonstruktionForm = ablAccordion.cells("a4").attachForm(formDataMKonstruktion);
					mkonstruktionForm.load("xml/mkonstruktionDetails.php?id="+rID);
					
					// DataProcessor Form Auftrag
					var dpf_auftrag = new dataProcessor("xml/auftragDetails.php");
					dpf_auftrag.init(auftragForm);
			
					// DataProcessor Form Vertrieb
					var dpf_vertrieb = new dataProcessor("xml/vertriebDetails.php");
					dpf_vertrieb.init(vertriebForm);
					
					// DataProcessor Form Send Vertriebsabwicklung
					var dpfs_vertriebsabwicklung = new dataProcessor("xml/vertriebsabwicklungDetails.php");
					dpfs_vertriebsabwicklung.init(vertriebsabwicklungForm);
					vertriebsabwicklungForm.load("xml/vertriebsabwicklungDetails.php?id="+rID);
					vertriebsabwicklungForm.attachEvent("onButtonClick", function(name, command){
						dpfs_vertriebsabwicklung.sendData();
					});

					// DataProcessor Form Send m. Konstruktion
					var dpfs_mkonstruktion = new dataProcessor("xml/mkonstruktionDetails.php");
					dpfs_mkonstruktion.init(mkonstruktionForm);
					mkonstruktionForm.load("xml/mkonstruktionDetails.php?id="+rID);
					mkonstruktionForm.attachEvent("onButtonClick", function(name, command){
						dpfs_mkonstruktion.sendData();
					});

				});
			}
			dhtmlxEvent(window,"load", buildInterface);
    </script>
		<style>
			html, body {
				width: 100%;
				height: 100%;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
	</body>
</html>

The form, where I want to use the calendar starts at line 92. (// Form m. Konstruktion).
There are ten input fields, where I want to use the calendar. Please, can anybody tell me, how to do that?

Kindly regards,
Daniel

Hi,

please check demo
dhtmlx.com/docs/products/dht … endar.html

Hi Andrei,

thanks for your post. I will test it soon.