dhtmlxCalendar not working as expected

Hello,

I have a form bound to a grid. I want to use the dhtmlxCalendar in the form. The form code looks like:

       	    //http://forum.dhtmlx.com/viewtopic.php?f=7&t=27606  
       	    type: "calendar",  
       	    dateFormat: "%m/%d/%Y",
       	    serverDateFormat: "%Y-%m-%d %H:%i",
            name: "DOB",
            label: "Date of Birth",
            value: "",
            required: false

When I pick a date using the calendar, the form shows a date correctly in mm/dd/yyyy format, but once I try saving the data, the grid shows the date in a format like this:

Sat Jan 05 2013 15:52:46 GMT -0800 (Pacific Standard Time)

and then the form field shows:

Invalid Date

The backend database is SQL Server 2005, and the column is data type ‘datetime’.

Please tell me how to make this work correctly. Code samples would be appreciated. Thanks.

It seems like you use it right - see the sample.
13.01.24form.rar (771 KB)
Could you provide us a direct link or completed demo?
docs.dhtmlx.com/doku.php?id=othe … leted_demo

Hi, Darya,

Thanks for trying to help. I don’t know what to do with a .rar file, so I couldn’t make use of it. What do I use to open it, please?

Here is the client code. I hope you can help me. I like the DHTMLX product, and am trying to urge my boss to purchase it, but these little problems we keep experiencing with it are hurting us:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
	<title>FRST Datastore test</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />	

		<style type="text/css">
			div.marginl {margin-left:20pt;}
		</style>	

<!-- Layout -->
	<link rel="stylesheet" type="text/css" href="./dhtmlxLayout/dhtmlxLayout/codebase/dhtmlxlayout.css">
	<link rel="stylesheet" type="text/css" href="./dhtmlxLayout/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_skyblue.css">
	<script src="./dhtmlxLayout/dhtmlxLayout/codebase/dhtmlxcommon.js"></script>
	<script src="./dhtmlxLayout/dhtmlxLayout/codebase/dhtmlxlayout.js"></script>  
	
<!-- Tab bar -->
	<link rel="STYLESHEET" type="text/css" href="./dhtmlxTabbar/dhtmlxTabbar/codebase/dhtmlxtabbar.css">
	<script src='./dhtmlxTabbar/dhtmlxTabbar/codebase/dhtmlxcommon.js'></script>
	<script src='./dhtmlxTabbar/dhtmlxTabbar/codebase/dhtmlxtabbar.js'></script>
	<script src='./dhtmlxTabbar/dhtmlxTabbar/codebase/dhtmlxcontainer.js'></script>	
	
<!-- Grid -->
	<link rel='stylesheet' type='text/css' href='./dhtmlxGrid/dhtmlxGrid/codebase/dhtmlxgrid.css'>
	<link rel='stylesheet' type='text/css' href='./dhtmlxGrid/dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css'>
	<link rel='stylesheet' type="text/css" href='./dhtmlxGrid/dhtmlxGrid/samples/common/css/style.css' media="screen" />
	<script src='./dhtmlxGrid/dhtmlxGrid/codebase/dhtmlxcommon.js'></script>
	<script src='./dhtmlxGrid/dhtmlxGrid/codebase/dhtmlxgrid.js'></script> 
	<script src='./dhtmlxGrid/dhtmlxGrid/codebase/dhtmlxgridcell.js'></script>		
	<script src='./dhtmlxGrid/dhtmlxGrid/codebase/ext/dhtmlxgrid_validation.js' type='text/javascript' charset='utf-8'></script>
	<script src='./dhtmlxGrid/dhtmlxGrid/samples/common/data.js'></script>
	<script src='./dhtmlxGrid/dhtmlxGrid/codebase/ext/dhtmlxgrid_srnd.js'></script>
	<script src='./dhtmlxGrid/dhtmlxGrid/codebase/ext/dhtmlxgrid_filter.js'></script>
	<script src='./dhtmlxGrid/dhtmlxGrid/codebase/ext/dhtmlxgrid_form.js'></script>	

<!-- Form -->  
    	<link rel='stylesheet' type='text/css' href='./dhtmlxForm/dhtmlxForm/codebase/skins/dhtmlxForm_dhx_skyblue.css'>
    	<script src='./dhtmlxForm/dhtmlxForm/codebase/dhtmlxcommon.js'></script> <!--Ensure form libraries are placed after tab, grid libraries-->		
    	<script src='./dhtmlxForm/dhtmlxForm/codebase/dhtmlxform.js'></script>	

<!-- Calendar -->
	<!-- http://www.dhtmlx.com/docs/products/dhtmlxGrid/samples/01_cell_types/01_calendar_grid.html -->
        <link rel="stylesheet" type="text/css" href="./dhtmlxCalendar/dhtmlxCalendar/codebase/dhtmlxcalendar.css">
        <link rel="stylesheet" type="text/css" href="./dhtmlxCalendar/dhtmlxCalendar/codebase/skins/dhtmlxcalendar_dhx_skyblue.css">
        <script src="./dhtmlxCalendar/dhtmlxCalendar/codebase/dhtmlxcalendar.js"></script>
        <script src="./dhtmlxForm/dhtmlxForm/codebase/ext/dhtmlxform_item_calendar.js"></script>
        <!--script src="./dhtmlxGrid/dhtmlxGrid/codebase/excells/dhtmlxgrid_excell_dhxcalendar.js"></script-->	
   	
<!-- Datastore -->
	<script src='./datastore/datastore_debug.js'></script>
	<script src='./datastore/datastore.js'></script>
	
<!-- Dataprocessor -->
	<script src='./dhtmlxGrid/dhtmlxdataprocessor/sources/dhtmlxdataprocessor.js'></script>
	
<!-- Dataconnector -->
	<script src='./dhtmlxConnector_php_v15_120612/php/codebase/connector.js'></script>
    <style>
    
        div#tabbar {
            position: relative;
            width: 600px;
            height: 400px;
            margin-left: 20px;
            margin-top: 20px;
        }
    </style>
    <script>
    
var dhxLayout;    
var myForm, formData;
var myGrid, myGrid2, myGrid3;
var dhxTabbar;
var obj;
var myuid;
    
function doOnLoad() {
	
// 	Initialise datastore.
	var contacts = new dhtmlXDataStore({
		url:"connectorFRST2.php",
		datatype:"xml"
	});
	
//	Set default datastore scheme.
	contacts.data.scheme({
	
		LName: 			"",
		FName:			"",
		DOB:			"",
		Moniker:		"",
		Offense_1:		"",
		Offense_2:		"",
		Offense_3:		"",
		Address_1:		"",
		Address_2:		"",
		Address_3:		"",
		Phone_home:		"",
		Phone_cell:		"",
		Phone_other:		"",
		ReleasedDate:		"",
		DischargeDate:		"",
		ProbationOfficer:	"",  
		ContactPhone:		"",
		Race:			"",
		Height:			"",
		Weight:			"",
		Eyes:			"",
		Hair:			"",
		CII:			"",
		FBI:			"",
		MNI:			"",
		CDC:			"",
		CDL:			"",
		DLState:		"",
		Gang_1:			"",
		Gang_2:			"",
		Gang_3:			"",
		Tattoos:		"",
		Employer_1_name:	"",
		Employer_1_address:	"",
		Employer_1_supv:	"",
		Employer_1_phone:	"",
		Employer_2_name:	"",
		Employer_2_address:	"",
		Employer_2_supv:	"",
		Employer_2_phone:	"",
		Employer_3_name:	"",
		Employer_3_address:	"",
		Employer_3_supv:	"",
		Employer_3_phone:	"",
		Contact_1_name:		"",
		Contact_1_address:	"",
		Contact_1_relation:	"",
		Contact_1_phone:	"",
		Contact_2_name:		"",
		Contact_2_address:	"",
		Contact_2_relation:	"",
		Contact_2_phone:	"",
		Contact_3_name:		"",
		Contact_3_address:	"",
		Contact_3_relation:	"",
		Contact_3_phone:	"", 
		Comments:		"", 
		ClientID:		"",
		ProbationStatus:	"",
		ActivityStatus:		""
	});	

        var myDP = new dataProcessor("connectorFRST2.php");
	myDP.init(contacts);
	
// Set 'Contact' form data.
// See http://docs.dhtmlx.com/doku.php?id=dhtmlxform:positioning, http://docs.dhtmlx.com/doku.php?id=dhtmlxform:form_input for formatting how-to.
    formData = [{
        type: "settings",
        position: "label-left",
        labelWidth: 145,
        inputWidth: 375
    }, {
        type: "block",
        inputWidth: "auto",
        list: [{
            type: "input",
            name: "LName",
            label: "Last Name",
            value: "",
            required: true
        }, {
            type: "input",
            name: "FName",
            label: "First Name",
            value: "",
            required: true
       }, {
       	    //http://forum.dhtmlx.com/viewtopic.php?f=7&t=27606  
       	    //http://docs.dhtmlx.com/doku.php?id=dhtmlxgrid:formatting_date_values
       	    //type: Calendar",  
       	    //dateFormat: "%m/%d/%Y",
       	    //serverDateFormat: "%Y-%m-%d %H:%i",
	    type: "input",       	    
            name: "DOB",
            label: "Date of Birth",
            value: "",
            //validate: "ValidDate",
            //dateFormat: "%d/%m/%Y",
            //serverDateFormat: "%Y-%m-%d %H:%i",
            required: false
        }, {       	       
            type: "input",
            name: "Moniker",
            label: "Moniker",
            value: "",
            required: false 
 	}, {
            type: "input",
            name: "Offense_1",
            label: "Offense 1",
            value: "",
            required: false
        }, {
            type: "input",
            name: "Offense_2",
            label: "Offense 2",
            value: "",
            required: false
        }, {
            type: "input",
            name: "Offense_3",
            label: "Offense 3",
            value: "",
            required: false
       }, {
            type: "input",
            name: "Address_1",
            label: "Address 1",
            value: "",
            required: false
       }, {
            type: "input",
            name: "Address_2",
            label: "Address 2",
            value: "",
            required: false
       }, {
            type: "input",
            name: "Address_3",
            label: "Address 3",
            value: "",
            required: false
       }, {
            type: "input",
            name: "Phone_home",
            label: "Home Phone",
            value: "",
            //validate: "ValidNumeric",
            validate: function(v){return String(v).match(/^\d{10}$/)!=null; },
            required: false
       }, {
            type: "input",
            name: "Phone_cell",
            label: "Cell Phone",
            value: "",
            validate: "ValidNumeric",            
            required: false
       }, {
            type: "input",
            name: "Phone_other",
            label: "Other Phone",
            value: "",
            validate: "ValidNumeric",            
            required: false
       }, {
            type: "input",
            name: "ReleasedDate",
            label: "Released Date",
            value: "",
            required: false
       }, {
            type: "input",
            name: "DischargeDate",
            label: "Prog Discharge Date",
            value: "",
            required: false
       }, {
            type: "input",
            name: "ProbationOfficer",
            label: "Probation Officer",
            value: "",
            validate: "ValidNumeric",            
            required: false
       }, {
            type: "input",
            name: "ContactPhone",
            label: "PO Contact Phone",        
            value: "",
            //validate: "ValidNumeric",           
            required: false          
      }, {
            type: "input",
            name: "Race",
            label: "Race",
            value: "",
            required: false
       }, {
            type: "input",
            name: "Height",
            label: "Height",
            value: "",
            validate: "ValidNumeric",            
            required: false
       }, {
            type: "input",
            name: "Weight",
            label: "Weight",
            value: "",
            validate: "ValidNumeric",            
            required: false
       }, {
            type: "input",
            name: "Eyes",
            label: "Eyes",
            value: "",
            required: false
       }, {
            type: "input",
            name: "Hair",
            label: "Hair",
            value: "",
            required: false
       }, {
            type: "input",
            name: "CII",
            label: "CII",
            value: "",
            required: false
       }, {
            type: "input",
            name: "FBI",
            label: "FBI",
            value: "",
            required: false
       }, {
            type: "input",
            name: "MNI",
            label: "MNI",
            value: "",
            required: false 
       }, {
            type: "input",
            name: "CDC",
            label: "CDC",
            value: "",
            required: false 
       }, {
            type: "input",
            name: "CDL",
            label: "Drivers License",
            value: "",
            required: false 
       }, {
            type: "input",
            name: "DLState",
            label: "DL State",
            value: "",
            required: false
       }, {
            type: "input",
            name: "Gang_1",
            label: "Gang 1",
            value: "",
            required: false
       }, {
            type: "input",
            name: "Gang_2",
            label: "Gang 2",
            value: "",
            required: false
            
       }, {
            type: "input",
            name: "Gang_3",
            label: "Gang 3",
            value: "",
            required: false
       }, {
            type: "input",
            name: "Tattoos",
            label: "Tattoos",
            rows: 2,            
            value: "",
            tooltip: "Enter any tattoo descriptions here.",
            required: false
       }, {
            type: "input",
            name: "Employer_1_name",
            label: "Employer 1 Name",
            value: "",
            required: false
       }, {
            type: "input",
            name: "Employer_1_address",
            label: "Employer 1 Address",
            value: "",
            required: false
       }, {
            type: "input",
            name: "Employer_1_supv",
            label: "Employer 1 Supv",
            value: "",
            required: false
       }, {
            type: "input",
            name: "Employer_1_phone",
            label: "Employer 1 Phone",
            value: "",
            //validate: "ValidNumeric",            
            required: false
            
       }, {
            type: "input",
            name: "Employer_2_name",
            label: "Employer 2 Name",
            value: "",
            required: false
       }, {
            type: "input",
            name: "Employer_2_address",
            label: "Employer 2 Address",
            value: "",
            required: false
       }, {
            type: "input",
            name: "Employer_2_supv",
            label: "Employer 2 Supv",
            value: "",
            required: false
       }, {
            type: "input",
            name: "Employer_2_phone",
            label: "Employer 2 Phone",
            value: "",
           // validate: "ValidNumeric",            
            required: false
       }, {
            type: "input",
            name: "Employer_3_name",
            label: "Employer 3 Name",
            value: "",
            required: false
       }, {
            type: "input",
            name: "Employer_3_address",
            label: "Employer 3 Address",
            value: "",
            required: false
       }, {
            type: "input",
            name: "Employer_3_supv",
            label: "Employer 3 Supv",
            value: "",
            required: false
       }, {
            type: "input",
            name: "Employer_3_phone",
            label: "Employer 3 Phone",
            value: "",
            //validate: "ValidNumeric",            
            required: false 
       }, {
            type: "input",
            name: "Contact_1_name",
            label: "Contact 1 Name",
            value: "",
            required: false
       }, {
            type: "input",
            name: "Contact_1_address",
            label: "Contact 1 Address",
            value: "",
            required: false            
       }, {
            type: "input",
            name: "Contact_1_relation",
            label: "Contact 1 Relation",
            value: "",
            required: false  
       }, {
            type: "input",
            name: "Contact_1_phone",
            label: "Contact 1 Phone",
            value: "",
            //validate: "ValidNumeric",            
            required: false  
       }, {
            type: "input",
            name: "Contact_2_name",
            label: "Contact 2 Name",
            value: "",
            required: false
       }, {
            type: "input",
            name: "Contact_2_address",
            label: "Contact 2 Address",
            value: "",
            required: false            
       }, {
            type: "input",
            name: "Contact_2_relation",
            label: "Contact 2 Relation",
            value: "",
            required: false  
       }, {
            type: "input",
            name: "Contact_2_phone",
            label: "Contact 2 Phone",
            value: "",
            //validate: "ValidNumeric",            
            required: false
       }, {
            type: "input",
            name: "Contact_3_name",
            label: "Contact 3 Name",
            value: "",
            required: false
       }, {
            type: "input",
            name: "Contact_3_address",
            label: "Contact 3 Address",
            value: "",
            required: false            
       }, {
            type: "input",
            name: "Contact_3_relation",
            label: "Contact 3 Relation",
            value: "",
            required: false  
       }, {
            type: "input",
            name: "Contact_3_phone",
            label: "Contact 3 Phone",
            value: "",
            //validate: "ValidNumeric",            
            required: false

      }, {
            type: "input",
            name: "Comments",
            label: "Comments",
            rows: 3,
            value: "",
            required: false     
      }, {        	
            type: "input",
            name: "ClientID",
            label: "ClientID",
            value: "",
            required: true,
            hidden: true
          
      }, {
      	    type: "select",
            name: "ProbationStatus",
            label: "Nonprobate",
            value: "",
            options:
            [
            	    {text: "Yes", value: "Y"},
            	    {text: "No",  value: "N", selected: true},
            ],
            required: "false"
      }, {
            type: "select",
            name: "ActivityStatus",
            label: "Active",
            value: "",
            options:
            [
            	    {text: "Yes", value: "Y", selected: true},            	    
            	    {text: "No",  value: "N"},
            ],            
            required: false  	
     	    
      }, {        	
            type: "block", list:[{
            	type: "button", offsetTop:8, name:"add", value:"add"
            	}, {
            	type: "newcolumn"
            	}, {
            	type: "button", name:"change", offsetTop:8, value:"change"
            	}, {
            	type: "newcolumn"
            	}, {
            	type: "button", name:"delete", offsetTop:8, value:"delete"
            	}, {
       		type: "newcolumn"
       		}, {
            	type: "button", name:"clear", offsetTop:8, value:"clear"
            }]	
        }]
    }];

// To attach forms and grids to the tab bar, see:        
// http://www.dhtmlx.com/docs/products/dhtmlxForm/samples/05_integration/05_split.html#code         
// http://dhtmlx.com/docs/products/dhtmlxTabbar/samples/05_components/01_grid_inside.html
// To attach layout to tabbar, see:
// http://www.dhtmlx.com/docs/products/dhtmlxLayout/samples/04_components/04_tabbar.html
         
//	Initialise layout.
	dhxLayout = new dhtmlXLayoutObject("parentId", "2U");
	dhxLayout.cells("a").setText("Contact Search");	

//	Attach tab bar to layout and initialise tab bar.
    	//dhxTabbar = new dhtmlXTabBar("tabbar");
    	dhxTabbar = dhxLayout.cells("b").attachTabbar();    	
    	dhxTabbar.setImagePath("./dhtmlxTabbar/dhtmlxTabbar/codebase/imgs/");
    	dhxTabbar.setSkin("dhx_skyblue");
    	dhxTabbar.addTab("a1", "Contact", 70);
    	dhxTabbar.addTab("a2", "Referrals", 70);
    	dhxTabbar.addTab("a3", "Notes", 70);
    	dhxTabbar.addTab("a4", "Reports", 70);
    	dhxTabbar.setTabActive("a1");
    	dhxTabbar.attachEvent("onTabClick", function(id, last_id) {
    		var buttonHtml	
    		switch(id)
    		{
    		case "a2":
			buttonHtml = '<button onclick="addDeferralRow();">Add Referral</button>' +  		
			             '<button onclick="deleteDeferralRow();">Delete Referral</button>' +
			             '<button onclick="location.reload();">Refresh</button>';
			document.getElementById("tabbuttons").innerHTML = buttonHtml;
			break; 
    		case "a3":
			buttonHtml = '<button onclick="addNoteRow();">Add Note</button>' +  		
			             '<button onclick="deleteNoteRow();">Delete Note</button>' +
			             '<button onclick="location.reload();">Refresh</button>';
			document.getElementById("tabbuttons").innerHTML = buttonHtml;
			break; 			
		default:   			
			document.getElementById("tabbuttons").innerHTML = "";
		}   		
    	});    	
 	
//	Attach 'Contact Search' grid to layout and initialise grid.    	
	myGrid = dhxLayout.cells("a").attachGrid();
	myGrid.setImagePath("./dhtmlxGrid/dhtmlxGrid/codebase/imgs/");
	myGrid.setHeader("NP,Active,Last Name,First Name,Date of Birth,AO");
	myGrid.setInitWidths("60,60,140,140,100,100");
	myGrid.setColumnIds("ProbationStatus,ActivityStatus,LName,FName,DOB,ProbationOfficer");
	myGrid.attachHeader("#select_filter,#select_filter,#text_filter,#text_filter,#text_filter,#select_filter");
	myGrid.enableAutoWidth(true);
	myGrid.setColAlign("left,left,left,left,right,right");
	myGrid.setColTypes("ro,ro,ro,ro,ro,ro");
	myGrid.setColSorting("str,str,str,str,date,str");
	myGrid.setSkin("dhx_skyblue");
	myGrid.sortRows(0);
	myGrid.init();
	myGrid.sync(contacts);
	myGrid.attachEvent("onRowSelect", function(){
		//alert("grid ClientID: " + myGrid.getSelectedRowId()); // <-- This has no value after adding a row via myForm!
		myGrid2.clearAll();
		myGrid2.loadXML("connectorFRST2referrals.php?clientid="+myGrid.getSelectedRowId(), function(){myGrid2.sortRows(2, "date", "des");});
		myGrid3.clearAll();
		myGrid3.loadXML("connectorFRST2notes.php?clientid="+myGrid.getSelectedRowId(), function(){myGrid3.sortRows(1, "date", "des");});			
		return true;
	});
	
//	Attach 'Contact' form to tab bar.    
    	myForm = dhxTabbar.cells("a1").attachForm(formData);
        myForm.enableLiveValidation(true);
        myForm.attachEvent("onButtonClick", function() {
        	myForm.validate();
        });        
	myForm.bind(myGrid);	
	//myForm.setDateFormat("%d/%m-%Y");
	myForm.attachEvent("onButtonClick", function(id){
			
		if (myForm.getItemValue("LName") == "") { 
			alert("Last Name cannot be empty");	
			return; 
		}
		
		if (myForm.getItemValue("FName") == "") { 
			alert("First Name cannot be empty");	
			return; 
		}
		
		if (id=='add'){
			myuid = (new Date()).valueOf(); 
			myForm.setItemValue("ClientID", myuid);
			obj = myForm.getFormData();
			obj.id = myuid;								// Both datastore and grid expect the "id" property on the data object.
			contacts.add(obj);
			contacts.sort("#LName#","asc");
			myGrid.selectRow(myGrid.getRowIndex(myuid),false,false,true);
			return true;
			// http://forum.dhtmlx.com/viewtopic.php?f=14&t=9526&start=10 		<-- Get, select row index.
			// http://docs.dhtmlx.com/doku.php?id=dhtmlxgrid:rows_manipulation 	<-- Row manipulation methods.

		}
		else if (id=='change'){
			myForm.save(); 								// Saves the form data changes.
		}
		else if (id=='delete'){ 							// Deletes the selected row.
			var selectedItem = myGrid.getSelectedRowId();
			contacts.remove(selectedItem);
		}
		else if (id=='clear'){
			myForm.clear();
		}
	});
        
//	Attach 'Referrals' grid to tab bar and initialise grid.    

//	2013.01.03 - It is necessary to create another PHP dataprocessor script to source data from the 'referrals' table, then use an event handler
// 	in the main grid to load data into the second grid. See http://stackoverflow.com/questions/12226273/how-to-refresh-reload-dhtmlx-grid. 

	myGrid2 = dhxTabbar.cells("a2").attachGrid();
	myGrid2.setImagePath("./dhtmlxGrid/dhtmlxGrid/codebase/imgs/");
	myGrid2.setHeader("Assistance,Referrals,Contact Date,Follow Up,Cost,ContactID, ReferralID");
	myGrid2.attachHeader("#select_filter,#text_filter,#text_filter,#text_filter,#text_filter");
	myGrid2.setInitWidths("100,200,100,100,100,0,0");	
	myGrid2.enableAutoWidth(true);
	myGrid2.setColAlign("left,left,right,right,right,,");
	myGrid2.setColTypes("ed,ed,ed,ed,ed,ro,ro");
	myGrid2.setColumnIds("0,1,2,3,4,5,6");
	myGrid2.enableValidation(true, true);		
	myGrid2.setColValidators(["NotEmpty","NotEmpty","NotEmpty",,]);	
	myGrid2.setColSorting("str,str,date,date,int,,");
	myGrid2.enableMultiselect(false);	
	myGrid2.setSkin("dhx_skyblue");	
	myGrid2.init();
	myGrid2.enableSmartRendering(true);
	
//	Initiate referrals data processor.	
	myDataProcessor = new dataProcessor("connectorFRST2referrals.php"); // use the connector file as a constructor parameter.		
	myDataProcessor.init(myGrid2);
	myDataProcessor.setUpdateMode("cell",true);
	myDataProcessor.setDataColumns("true,true,true,true,true,true");

//	Attach 'Notes' grid to tab bar and initialise grid.    

//	2013.01.03 - It is necessary to create another PHP dataprocessor script to source data from the 'notes' table, then use an event handler
// 	in the main grid to load data into the third grid. See http://stackoverflow.com/questions/12226273/how-to-refresh-reload-dhtmlx-grid. 

	myGrid3 = dhxTabbar.cells("a3").attachGrid();
	myGrid3.setImagePath("./dhtmlxGrid/dhtmlxGrid/codebase/imgs/");
	myGrid3.setHeader("Officer Name/ID,Date/Time,Note,ClientID,NoteID");
	myGrid3.attachHeader("#select_filter,#text_filter,#text_filter");
	myGrid3.setInitWidths("200,100,300,0,0");	
	myGrid3.enableAutoWidth(true);
	myGrid3.setColAlign("left,right,left,,");
	myGrid3.setColTypes("ed,ed,ed,ro,ro");
	// http://www.dhtmlx.com/docs/products/dhtmlxGrid/samples/01_cell_types/07_pro_excells_numberformat.html	
	//myGrid3.setDateFormat("%Y-%m-%d");
	//myGrid3.setDateFormat("%d-%m-%Y");
	//myGrid3.setDateFormat("%m-%d-%Y");
	//myGrid3.setDateFormat();
	myGrid3.setColumnIds("0,1,2,3,4,5");
	//myGrid3.enableValidation(true, true);		
	//myGrid3.setColValidators(["NotEmpty","NotEmpty","NotEmpty",,]);	
	myGrid3.setColSorting("str,date,str,int,,");
	myGrid3.enableMultiselect(false);	
	myGrid3.setSkin("dhx_skyblue");	
	myGrid3.init();
	myGrid3.enableSmartRendering(true);
	
//	Initiate referrals data processor.	
	myDataProcessor3 = new dataProcessor("connectorFRST2notes.php"); // use the connector file as a constructor parameter.		
	myDataProcessor3.init(myGrid3);
	myDataProcessor3.setUpdateMode("cell",true);
	myDataProcessor3.setDataColumns("true,true,true,true,true,true");
	
//	All about data binding and dhtmlxdatastore: 
//	http://docs.dhtmlx.com/doku.php?id=binding.
//	http://docs.dhtmlx.com/doku.php?id=dhtmlxdatastore:binding_components_to_dhtmlxdatastore
//	http://docs.dhtmlx.com/doku.php?id=dhtmlxdatastore:crud_operations_in_bound_components
//	http://docs.dhtmlx.com/doku.php?id=dhtmlxdatastore:step-by-step_example   <-- EXAMPLE
//	http://docs.dhtmlx.com/doku.php?id=dhtmlxdatastore:datastore_example_server-side   <-- BETTER EXAMPLE
//	http://forum.dhtmlx.com/viewtopic.php?f=19&t=24229 <-- How to capture ID after an add.
//	http://forum.dhtmlx.com/viewtopic.php?f=17&t=23096&p=74242&hilit=datastore+add+record#p74242 <-- How to add form data to datastore.

	contacts.attachEvent("onXLE", function(){
		contacts.sort("#LName#","asc");							// Sort data by last name upon load.
	});
}

function addDeferralRow() {	
	var ind1 = window.prompt('enter Assistance', '');
	if (ind1 === null || typeof ind1 == "undefined")
		return;
	var ind2 = window.prompt('enter Referrals', '');
	if (ind2 === null || typeof ind2 == "undefined")
		return;
	var ind3 = window.prompt('enter Contact Date', '');
	if (ind3 === null || typeof ind3 == "undefined")
		return;
	var ind4 = window.prompt('enter Followup Date', '');
	if (ind4 === null || typeof ind4 == "undefined")
		return;
	var ind5 = window.prompt('enter Cost', '');
	if (ind5 === null || typeof ind4 == "undefined")
		return;
	var ind6	= myGrid.getSelectedRowId();
	var myrefuid 	= myGrid2.uid();
	var ind7 	= myrefuid;
	myGrid2.addRow(myrefuid, [ind1,ind2,ind3,ind4,ind5,ind6,ind7], myGrid2.getRowsNum());
	myGrid2.selectRow(myGrid2.getRowIndex(myrefuid),false,false,true);
}				

function deleteDeferralRow() {
	var selId = myGrid2.getSelectedId();
	if (selId !== null)
		{	
		retType = confirm("Are you sure you want to delete this row?"); 
	
		if (retType == true) 
			{ 	
			myGrid2.deleteSelectedRows();
			//myGrid2.deleteRow(selId);
			}
		}	
	else
		{
		alert("Please first select a row to delete.");
		}
	}		

function addNoteRow() {	
	var ind1 = window.prompt('enter Officer Name/ID', '');
	if (ind1 === null || typeof ind1 == "undefined")
		return;
	var ind2 = window.prompt('enter Date/Time', '');
	if (ind2 === null || typeof ind2 == "undefined")
		return;
	var ind3 = window.prompt('enter Note', '');
	if (ind3 === null || typeof ind3 == "undefined")
		return;

	var ind4	= myGrid.getSelectedRowId();
	var mynoteuid 	= myGrid3.uid();
	var ind5 	= mynoteuid;
	myGrid3.addRow(mynoteuid, [ind1,ind2,ind3,ind4,ind5], myGrid3.getRowsNum());
	myGrid3.selectRow(myGrid3.getRowIndex(mynoteuid),false,false,true);
}				

function deleteNoteRow() {
	var selId = myGrid3.getSelectedId();
	if (selId !== null)
		{	
		retType = confirm("Are you sure you want to delete this row?"); 
	
		if (retType == true) 
			{ 	
			myGrid3.deleteSelectedRows();
			//myGrid2.deleteRow(selId);
			}
		}	
	else
		{
		alert("Please first select a row to delete.");
		}
	}
	
</script>

  </head>

	<body onLoad="doOnLoad()">
		<div class="header">
		    <a class="logo" href="http://intranet" title="City of Fontana Intranet"><img src="http://intranet/images/fontana_logo.jpg" height="79%" border="0"/></a> 
		    <div class="tittle-dhtmlx">City of Fontana&nbsp;&nbsp;-&nbsp;&nbsp;FRST Datastore test</div>
		</div>
		
		<div id="parentId" style="position: relative; top: 20px; left: 20px; width: 1225px; height: 725px; aborder: #B5CDE4 1px solid;"></div>
		<p>
		<div id="tabbuttons" class="marginl" style="position: relative; left: 620px;"> </div> 
		
   	</body>
    
</html>    

Extention .rar is an archive.
Adding a .zip file for you.
13.01.24.ZIP (821 KB)

Ok, i’ve done the demo based on your code. Now how can i reproduce the issue with a field “date of Birth”?

Hi, Darya, thank you for your reply.

The ‘DOB’ (date of birth) field is in a MS SQL Server 2005 table. It has a data type of ‘datetime’. The entire table scheme can be found in the following table CREATE statement:

USE [COF_Objects_Dev]
GO

/****** Object:  Table [dbo].[COF_datastoretest_full_tbl]    Script Date: 01/25/2013 08:34:16 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

SET ANSI_PADDING ON
GO

CREATE TABLE [dbo].[COF_datastoretest_full_tbl](
	[LName] [varchar](50) NULL,
	[FName] [varchar](50) NULL,
	[DOB] [datetime] NULL,
	[Moniker] [varchar](50) NULL,
	[Offense_1] [varchar](50) NULL,
	[Offense_2] [varchar](50) NULL,
	[Offense_3] [varchar](50) NULL,
	[Address_1] [varchar](50) NULL,
	[Address_2] [varchar](50) NULL,
	[Address_3] [varchar](50) NULL,
	[Phone_home] [varchar](10) NULL,
	[Phone_cell] [varchar](10) NULL,
	[Phone_other] [varchar](10) NULL,
	[ReleasedDate] [datetime] NULL,
	[DischargeDate] [datetime] NULL,
	[ProbationOfficer] [varchar](50) NULL,
	[ContactPhone] [varchar](10) NULL,
	[Race] [varchar](50) NULL,
	[Height] [varchar](50) NULL,
	[Weight] [varchar](50) NULL,
	[Eyes] [varchar](50) NULL,
	[Hair] [varchar](50) NULL,
	[CII] [varchar](50) NULL,
	[FBI] [varchar](50) NULL,
	[MNI] [varchar](50) NULL,
	[CDC] [varchar](50) NULL,
	[CDL] [varchar](50) NULL,
	[DLState] [varchar](50) NULL,
	[Gang_1] [varchar](50) NULL,
	[Gang_2] [varchar](50) NULL,
	[Gang_3] [varchar](50) NULL,
	[Tattoos] [varchar](200) NULL,
	[Employer_1_name] [varchar](50) NULL,
	[Employer_1_address] [varchar](100) NULL,
	[Employer_1_supv] [varchar](50) NULL,
	[Employer_1_phone] [varchar](10) NULL,
	[Employer_2_name] [varchar](50) NULL,
	[Employer_2_address] [varchar](100) NULL,
	[Employer_2_supv] [varchar](50) NULL,
	[Employer_2_phone] [varchar](10) NULL,
	[Employer_3_name] [varchar](50) NULL,
	[Employer_3_address] [varchar](100) NULL,
	[Employer_3_supv] [varchar](50) NULL,
	[Employer_3_phone] [varchar](10) NULL,
	[Contact_1_name] [varchar](50) NULL,
	[Contact_1_address] [varchar](100) NULL,
	[Contact_1_relation] [varchar](50) NULL,
	[Contact_1_phone] [varchar](10) NULL,
	[Contact_2_name] [varchar](50) NULL,
	[Contact_2_address] [varchar](100) NULL,
	[Contact_2_relation] [varchar](50) NULL,
	[Contact_2_phone] [varchar](10) NULL,
	[Contact_3_name] [varchar](50) NULL,
	[Contact_3_address] [varchar](100) NULL,
	[Contact_3_relation] [varchar](50) NULL,
	[Contact_3_phone] [varchar](10) NULL,
	[Comments] [varchar](max) NULL,
	[ClientID] [varchar](50) NULL,
	[ProbationStatus] [char](1) NULL,
	[ActivityStatus] [char](1) NULL
) ON [PRIMARY]

GO

SET ANSI_PADDING OFF
GO

The PHP connector code looks like this:

<?php

	require_once('./dhtmlxConnector_php_v15_120612/php/codebase/db_sqlsrv.php');
	//require_once('./dhtmlxConnector_php_v15_120612/php/codebase/grid_connector.php');
	require_once('./dhtmlxConnector_php_v15_120612/php/codebase/data_connector.php');	

	$serverName = "CH-SQL-6";
        $uid=file_get_contents("C:\inetpub\wwwroot_DEV\uid.txt");
        $pwd=file_get_contents("C:\inetpub\wwwroot_DEV\pwd.txt");

	$connectionInfo = array( "UID"=>$uid, "PWD"=>$pwd, "Database"=>"COF_Objects_Dev", "LoginTimeout"=>15); // <- SS authentication
	$res = sqlsrv_connect( $serverName, $connectionInfo); // <- SS authentication

	if($res)
	{
		//echo "Connection established.\n";
		$data = new DataConnector($res,"sqlsrv");
		$data->dynamic_loading(100);
		// See http://docs.dhtmlx.com/doku.php?id=dhtmlxconnector:loading_editing_data for allowable SQL statement syntax.
		// and http://docs.dhtmlx.com/doku.php?id=dhtmlxconnector:jsondataconnector.
		$data->render_sql("SELECT LName, FName, CONVERT(varchar, DOB, 101) AS DOB, Moniker, Offense_1, Offense_2, Offense_3, Address_1, Address_2, Address_3, Phone_home, Phone_cell, Phone_other, CONVERT(varchar, ReleasedDate, 101) AS ReleasedDate, CONVERT(varchar, DischargeDate, 101) AS DischargeDate, ProbationOfficer, ContactPhone, Race, Height, Weight, Eyes, Hair, CII, FBI,  MNI, CDC, CDL, DLState, Gang_1, Gang_2, Gang_3, Tattoos, Employer_1_name, Employer_1_address, Employer_1_supv, Employer_1_phone, Employer_2_name, Employer_2_address, Employer_2_supv, Employer_2_phone, Employer_3_name, Employer_3_address, Employer_3_supv, Employer_3_phone, Contact_1_name, Contact_1_address, Contact_1_relation, Contact_1_phone, Contact_2_name, Contact_2_address, Contact_2_relation, Contact_2_phone, Contact_3_name, Contact_3_address, Contact_3_relation, Contact_3_phone, Comments, ClientID, ProbationStatus, ActivityStatus FROM COF_datastoretest_full_tbl", "ClientID", "LName, FName, DOB, Moniker, Offense_1, Offense_2, Offense_3, Address_1, Address_2, Address_3, Phone_home, Phone_cell, Phone_other, ReleasedDate, DischargeDate, ProbationOfficer, ContactPhone, Race, Height, Weight, Eyes, Hair, CII, FBI,  MNI, CDC, CDL, DLState, Gang_1, Gang_2, Gang_3, Tattoos, Employer_1_name, Employer_1_address, Employer_1_supv, Employer_1_phone, Employer_2_name, Employer_2_address, Employer_2_supv, Employer_2_phone, Employer_3_name, Employer_3_address, Employer_3_supv, Employer_3_phone, Contact_1_name, Contact_1_address, Contact_1_relation, Contact_1_phone, Contact_2_name, Contact_2_address, Contact_2_relation, Contact_2_phone, Contact_3_name, Contact_3_address, Contact_3_relation, Contact_3_phone, Comments, ClientID, ProbationStatus, ActivityStatus");
		
		if($data)
		{	
			//echo "rendering table ...\n";
		}
		else
		{
			//echo "grid not loaded!\n";
		}	
	}
	else
	{
		//echo "Connection could not be established.\n";
		die( print_r( sqlsrv_errors(), true));
	}

I’ve tried the calendar control using both this SQL CONVERT of the field:

SELECT ... CONVERT(varchar, DOB, 101) AS DOB, ...

and without any conversion:

SELECT ... DOB, ...

but neither allow the calendar control to work.

I hope this helps you work toward a solution. I’m very anxious to be able to demonstrate the application I’m building with DHMTLX which would include the calendar control. Thank you again!

Can you please attach the snippet of xml , which is generated by above connector code ?

Hi, Stanislav,

Here is the XML snippet:

<data>
<item id="1357236440287" LName="Coyote" FName="Wiley" DOB="01/01/1959" Moniker="The Coyote" Offense_1="Hunting without a licence" Offense_2="Illegal use of explosives" Offense_3="Maxxing out Acme credit card" Address_1="123 Butte St" Address_2="Apt A" Address_3="Chiriaco Summit, CA 92201" Phone_home="2135551212" Phone_cell="1234567" Phone_other="8765432" ReleasedDate="01/01/2010" DischargeDate="01/01/2012" ProbationOfficer="1234" ContactPhone="123" Race="U" Height="507" Weight="100" Eyes="BRO" Hair="GRY" CII="a" FBI="b" MNI="c" CDC="d" CDL="e" DLState="CA" Gang_1="Sharks" Gang_2="Jets" Gang_3="Fairfax Bagels" Tattoos="Warner Bros logo; Roadrunner; 'Mom'" Employer_1_name="Walmart" Employer_1_address="123 Walmart Dr, Bentonville, AR 72712" Employer_1_supv="Dave the Walmartian" Employer_1_phone="8001234567" Employer_2_name="Warner Bros Studios" Employer_2_address="123 Warner Way, Burbank CA 90000" Employer_2_supv="Daffy Duck" Employer_2_phone="1234567" Employer_3_name="xxxxxyyyy" Employer_3_address="zzzzzrrrrr" Employer_3_supv="sssssss" Employer_3_phone="3333333" Contact_1_name="Yosemite Sam" Contact_1_address="123 Warner Ave, Burbank CA 90000" Contact_1_relation="Best friend" Contact_1_phone="9091112233" Contact_2_name="" Contact_2_address="" Contact_2_relation="" Contact_2_phone="" Contact_3_name="" Contact_3_address="" Contact_3_relation="" Contact_3_phone="" Comments="Client sez roadrunners are tasty." ClientID="1357236440287" ProbationStatus="N" ActivityStatus="Y"/>
</data>

I hope this helps you find my problem. Thank you again!

Check the PM, it will contain the demo with same setup and data xml - and it works correctly

Hello!
I am using a Calendar and having a similar “invalid date” response! Please help!
I have a form-connected to a grid, and when I select the grid-row, the form populates with the grid-rows’ data. One of the columns from the grid contains date time info.

The form-part that contains the datetime info displays “invalid date”.
What’s up with that?!

Thanks
_Eric-

I just want to say that the invalid-date that I was receiving was because in the php code I was writing, I unintentionally excluded the SECONDS that are included in my date-time-stamps.

%s was all I needed!

ok

I realized that my date-time-stamp contained seconds, where my %y-%m was MISSING the %s for seconds. I put the seconds in the dhtmlx and now it works!
Syntax.

Hello!
I fixed that problem. I missed the %s format, forgetting seconds from the server-datetime stamps.

I have another problem.
The date/Time is not saving to the DB.
Im using calendars for ‘start_time’ and ‘end_time’, in a form, and the timestamps save as 0000:00:00 0000:00:00 to the DB after dates/times are selected in the Form.
I even have logic that calculates time-spent, and that function works, but when I save to the DB, the times CHANGE to 0.
What’s going on?

:frowning:

page.php

<?php Time Processing
STATUS - Page Loaded

Time Query Panel

?

Help please!
Thanks :slight_smile:
-Eric-

Also, here’s the error I get…

I can’t get my form calendars’ input value…
I’ve tried…

{type: “calendar”, inputWidth: “auto”, name: “time_start”, dateFormat: “%Y-%m-%d %H:%i:%s”, serverDateFormat: “%Y-%m-%d %H:%i:%s”, label: “Start Date / Time”},

//RETURNS is[object HTMLInputElement]
//timeStartVar = myForm.getInput(“time_start”);

		//Returns is[object Object]
		//timeStartVar = myForm.getCalendar("time_start");
		
		//RETURNS isnull
		//timeStartVar = myForm.getItemValue("time_start");
		
		//RETURNS is[object Object]
		//timeStartVar = myForm.getFormData("time_start");
		
		//RETURNS isStart Date / Time.
		//timeStartVar = myForm.getItemLabel("time_start");
		
		//Returns is not a function
		//timeStartVar = myForm.getDate("time_start");

:frowning:
Please help if someone can :frowning:

I also do not have the PRO version.
The calendar-in-the-form is in the free version, hopefully I can ge ta hold of the date value in the free version :slight_smile:
Thanks!
-Eric-

Hi

Could you please provide us complete demo including all correspondnig js/css files?
Please also add information regarding current and expected behaviour.

Here is a small guide how to make a complete demo:
docs.dhtmlx.com/tutorials__auxil … pport.html

If you’re using PRO Edition please send your demo to support@dhtmlx.com