Last active
September 29, 2016 07:02
-
-
Save xenod/420473fd7315d19f6015f3dd1e8072f3 to your computer and use it in GitHub Desktop.
DateTimePicker: basic usage
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> | |
${todayJsonConverter | date} | |
</ak-template> | |
</ak-col> | |
<ak-col k-title="TodayDate" k-field="todayDateConverter" k-format="{0:yyyy-MM-dd HH:mm:ss}"></ak-col> | |
<ak-col k-title="sträng" k-field="stringTest"></ak-col> | |
</ak-grid> | |
<button type="button" click.delegate="logGridRows()">alert grid rows array</button> | |
</div> | |
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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: 'string', from: 'todayJson'}, | |
todayDateConverter: { type: 'date', from: 'todayDate'}, | |
stringTest: { type: 'string' } | |
} | |
} | |
} | |
}; | |
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, | |
stringTest: 'hejhej', | |
}]; | |
} | |
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({}); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export class DateValueConverter { | |
toView(dateString) { | |
var date = new Date(dateString); | |
return date; | |
} | |
fromView(date) | |
{ | |
return JSON.stringify(date); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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()); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment