or
<body> @Html.Kendo().Calendar().Name("calendarstart").Value(DateTime.Now) <button id="save">Set date</button> <script> $(document).ready(function () { $("#save").click(function () { var startDate = $("#calendarstart").data("kendoCalendar"); $.post("/Home/Index", { StartDate: startDate.value() }); }); }); </script></body>
The issue i see is that their is no tight binding like what you have on MVC view model binding.
Jay<body> @using (Html.BeginForm("Index", "Home", FormMethod.Post)) { @Html.HiddenFor(m => m.StartDate) @(Html.Kendo().Calendar() .Name("calendarStart") .Value(DateTime.Now) ) @Html.HiddenFor(m => m.EndDate) @(Html.Kendo().Calendar() .Name("calendarEnd") .Value(DateTime.Now) ) <button name="button" value="save">Save Date</button> } <script> $(document).ready(function () { var calendarStart = $("#calendarStart").data("kendoCalendar"); $("#StartDate").val((moment(calendarStart.value()).format("YYYY-MM-DD"))); calendarStart.bind("change", function (e) { $("#StartDate").val((moment(this.value())).format("YYYY-MM-DD")); }); var calendarEnd = $("#calendarStart").data("kendoCalendar"); $("#EndDate").val((moment(calendarEnd.value()).format("YYYY-MM-DD"))); calendarEnd.bind("change", function (e) { $("#EndDate").val((moment(this.value())).format("YYYY-MM-DD")); }); }); </script></body>@(Html.Kendo().Window() .Name("LoadingWindow") .Visible(false) .Title("Loading...") .Modal(true) .Height(150) .Width(300) .Actions(a => a.Clear()) .Content(@<text> <div id="loading-details">Loading Data. Please wait. <div id="divLoaderGif"> <img src="@Url.Content("~/Content/themes/ajax-loader.gif")" alt="Loading... Please wait..." /> </div> </div> </text>))