Seting and getting dates from dhtmlxCalendar in a Form

Suite and Optimus Suite 5
#1

I am a newbie in using dhtmlxCalendar and dhtmlx controls.

I have tried to locate in the samples and forum the information about how to set/get the date to a dhtmlxCalendar when used in a Form.
Even though I can assign the initial date to the calendar I can’t set the date to today and the following example is not working.

Obviously I am missing the key point for that, bur are there any suggestions?

Thanks in advance

<link rel="stylesheet" type="text/css" href="codebase/fonts/roboto.css"/>
<link rel="stylesheet" type="text/css" href="codebase/dhtmlx.css"/>
<script src="codebase/dhtmlx.js"></script>

<script>
    var myForm, formData;
function doOnLoad() {
        formData = [
	{type: "settings", position: "label-left", labelWidth: "auto", inputWidth: 120},
            {type: "block", width: "auto", list: [
                {type: "label", label: "Period", list:[    
                    {type: "calendar", dateFormat: "%d-%m-%Y", label: "From :", name: "calFrom", enableTime: false, calendarPosition: "right", value:"01-01-2017" },
                    {type: "calendar", dateFormat: "%d-%m-%Y", label: "To   :", name: "calTo", enableTime: false, calendarPosition: "right" , value: "01-01-2017"}
                ]}
            ]}
        ];
        myForm = new dhtmlXForm("myForm", formData);
}  //function doOnLoad()

    var dateFrom = new Date();
    var dateTo = new Date();
    var cal1 = myForm.setItemValue("calTo",dateTo);

</script>
#2

Working a little bit more on the samples I make it working finally.
But there is the next question about accessing controls in the form.
When the calendar value is set :
…myForm.setItemValue(“myCalendar”, myDate);
in the initailization function (line 24 in the following code) the calendar is updated to the current date while when it is set in the (line 32) the displayed calendar value is empty!

<link rel="stylesheet" type="text/css" href="codebase/fonts/roboto.css"/>
<link rel="stylesheet" type="text/css" href="codebase/dhtmlx.css"/>
<script src="codebase/dhtmlx.js" type="text/javascript"></script>

<script>
    var formData, myForm;
    var myDate = new Date();        
function myInit() {
        formData = [
	{type: "settings", position: "label-left", labelWidth: "auto", inputWidth: 120},
            {type: "block", width: "auto", list: [
                {type: "label", label: "Date", list:[    
                    {type: "calendar", dateFormat: "%d-%m-%Y", label: "To   :", name: "myCalendar", enableTime: false, calendarPosition: "right"  }
                ]}
            ]}
        ];

        myForm = new dhtmlXForm("myForm", formData);

        //myForm.setItemValue("myCalendar", myDate);
}  //function myInit()
</script>
#3

Please, try to get the calendar object:
var dhxCalendar = myForm.getCalendar(“myCalendar”);
and use the dhxCalendar api to change the date:
dhxCalendar .setDate(myDate);