JSFiddle - React, Tailwind, and code Playground
by KendoDev
HTML
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.silver.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
<div class="demo-section k-content">
<h4>Remind me on</h4>
<input id="datetimepicker" style="width: 100%;" />
</div>
<textarea id="editor"></textarea>
JavaScript
// create DateTimePicker from input HTML element
$("#datetimepicker").kendoDateTimePicker({
value:new Date()
});
$("#editor").kendoEditor({
tools: [
"insertImage",
"insertFile"
],
imageBrowser: {
messages: {
dropFilesHere: "Drop files here"
},
transport: {
// read: "http://demos.telerik.com/kendo-ui/service/ImageBrowser/Read",
read: {
url: function(params) {
// build url
var datetimepicker = $("#datetimepicker").data("kendoDateTimePicker");
alert(datetimepicker.value());
var time = datetimepicker.value();
debugger;
return "http://demos.telerik.com/kendo-ui/service/ImageBrowser/Read?t=" + time.toString();
}
},
destroy: {
url: "http://demos.telerik.com/kendo-ui/service/ImageBrowser/Destroy",
type: "POST"
},
create: {
url: "http://demos.telerik.com/kendo-ui/service/ImageBrowser/Create",
type: "POST"
},
//thumbnailUrl: "http://demos.telerik.com/kendo-ui/service/ImageBrowser/Thumbnail",
thumbnailUrl: function(path, file) {
debugger;
return "/thumbnail?path=" + path + file;
},
uploadUrl: "http://demos.telerik.com/kendo-ui/service/ImageBrowser/Upload",
imageUrl: "/kendo-ui/service/ImageBrowser/Image?path={0}"
...