DateTimePicker: basic usage

app.html

<template>

    <div id="example">
        <div class="demo-section k-content">
            <h4>Json from server: ${todayJsonCopy}</h4>
            <input id="manufacturingStartDatePicker" style="width: 100%"
                                       ak-datetimepicker="k-value.two-way:todayJson;
                                       
                                    k-format.bind:'yyyy-MM-dd HH:mm:ss';"
                                    k-on-change.delegate="onChange()";/>
                                
              <h4>Date constructed from json: ${todayDate}</h4>
            <input id="manufacturingStartDatePicker" style="width: 100%"
                                       ak-datetimepicker="k-value.two-way:todayDate;
                                       
                                    k-format.bind:'yyyy-MM-dd HH:mm:ss';"/>
            <div>Json to server constructed from date: ${jsonToServer}</div>                        
                <br/>
                
                Grid without format (dataSource1)
           <ak-grid k-data-source.bind="dataSource1" k-sortable.bind="true">
              <ak-col k-title="TodayJson" k-field="todayJson"></ak-col>
              <ak-col k-title="TodayDate" k-field="todayDate"></ak-col>
          </ak-grid>
          <br/>
          
          Grid with format (dataSource2)
                     <ak-grid k-data-source.bind="dataSource2" k-sortable.bind="true">
              <ak-col k-title="TodayJson" k-field="todayJson" k-format="{0:yyyy-MM-dd HH:mm:ss}"></ak-col>
              <ak-col k-title="TodayDate" k-field="todayDate" k-format="{0:yyyy-MM-dd HH:mm:ss}"></ak-col>
          </ak-grid>
          
                <br/>
          Grid with converter on json (dataSource3)
                     <ak-grid k-data-source.bind="dataSource3" k-sortable.bind="true" k-editable="incell">
              <ak-col k-title="TodayJson">
                <ak-template>
                  <input id="manufacturingStartDatePicker" style="width: 100%"
                                       ak-datetimepicker="k-value.two-way:todayDateConverter;
                                       
                                    k-format.bind:'yyyy-MM-dd HH:mm:ss';"/>
                </ak-template>
              </ak-col>
              <ak-col k-title="TodayDate" k-field="todayDateConverter" k-format="{0:yyyy-MM-dd HH:mm:ss}"></ak-col>
              
              
          </ak-grid>
          
          <button type="button" click.delegate="logGridRows()">alert grid rows array</button>
        </div>
</template> 

app.js

export class BasicUsage {
  todayDate;
  todayJson = '2016-09-08T15:22:20.4962804';

  gridRows1;
  gridRows2;
  gridRows3;
  
  dataSource1 = {
            transport: {
                read: (options) => {
                    options.success(this.gridRows1);
                }
            },
            schema: {
                model: {
                    
                    fields: {
                        todayJson: { type: 'date'},
                        todayDate: { type: 'date'},
                      
                    }
                }
            }
        };
        
          dataSource2 = {
            transport: {
                read: (options) => {
                    options.success(this.gridRows2);
                }
            },
            schema: {
                model: {
                    
                    fields: {
                        todayJson: { type: 'date'},
                        todayDate: { type: 'date'},
                      
                    }
                }
            }
        };
        
          dataSource3 = {
            transport: {
                read: (options) => {
                    options.success(this.gridRows3);
                }
            }, 
            schema: {
                model: {
                    
                    fields: {
                        todayJsonConverter: { type: 'date', from: 'todayJson', editable:true},
                        todayDateConverter: { type: 'date', from: 'todayDate'},
                      
                    }
                }
            }
        };
  
  constructor() {
    this.todayJsonCopy = this.todayJson;
    this.todayDate = new Date(this.todayJson);
    this.jsonToServer = JSON.stringify(this.todayDate); 
    
    this.gridRows1 = [{
      todayJson: this.todayJson,
      todayDate: this.todayDate
    }];
    
    this.gridRows2 = [{
      todayJson: this.todayJson,
      todayDate: this.todayDate
    }];
    
    this.gridRows3 = [{
      todayJson: this.todayJson,
      todayDate: this.todayDate
    }];
  }
  
  onChange() {
     this.todayDate = new Date(this.todayJson);
      this.jsonToServer = JSON.stringify(this.todayDate);
  }
 
 logGridRows() {
   console.log(this.gridRows3);
   console.log(this.dataSource3.at(0));
 }
 
   
  dateTimeEditor(container, options) {
        $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
            .appendTo(container)
            .kendoDateTimePicker({});
    }
 
 
  
  
}

date-value-converter.js

export class DateValueConverter {
  toView(dateString) {
    var date = new Date(dateString);

      return date;
  }
}

index.html

<!doctype html>
<html>
  <head>
    <title>Aurelia KendoUI bridge</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css">
    <script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
    <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.5/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

main.js

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-kendoui-bridge', kendo => kendo.pro());

 let globalResources = [
        './date-value-converter'
    ];

    aurelia.use.globalResources(globalResources);


  aurelia.start().then(a => a.setRoot());

}