I am having problem sending datetime to my controller

[Majid]

I am really fresh to kendo and MVC.

This is my Index.cshtml file. I am trying to send new startDate and endDate to my controller . but looks like I am doing something wrong. 

I am trying to figure out how to post the change from datetimepicker towards my controller. 

 

@using Kendo.Mvc.UI
@{
    ViewBag.Title = "New Measurement Period";
}


<h1> New Measurement Period</h1>
<div>
    <label for="start">Start Date:</label>
    @(Html.Kendo().DateTimePicker()
                             .Name("startDate")
                             .Value(DateTime.Now)
                             .HtmlAttributes(new { style = "width: 100%", title = "datetimepicker" })
                             .DateInput()
    )
    <label for="end">End Date:</label>
    @(Html.Kendo().DateTimePicker()
                                .Name("endDate")
                                .Value(DateTime.Now)
                                .HtmlAttributes(new { style = "width: 100%", title = "datetimepicker" })
                                .DateInput()

    )
    @(Html.Kendo().Button()
                               .Name("primaryTextButton")
                               .HtmlAttributes(new { type = "button"})
                                                          .Content("Submit"))


   
     <script>
                $(document).ready(function () {
                    // create DateTimePicker from input HTML element
                    $("#datetimepicker").kendoDateTimePicker({
                        value: new Date(),
                        dateInput: true
                    });
                });

    </script>
</div>

 

[Majid]

this is my controller 

 

namespace .Features.Tenant.NewMeasurementPeriod
{
    public class NewMeasurementPeriodController : Controller
    {

        [Authorize]
        public IActionResult Index()
        {
            NewMeasurementPeriodViewModel model = new NewMeasurementPeriodViewModel
            {

                startDate = new DateTime(DateTime.Now.Year),
                endDate = new DateTime(DateTime.Now.Year)
            };

            return View(model);
        }
        [HttpPost]
        public IActionResult Index(DateTime startDate, DateTime endDate)
        {

            NewMeasurementPeriodViewModel model = new NewMeasurementPeriodViewModel
            {

                startDate = startDate,
                endDate = endDate
            };
            return View(model);
        }
        




    }

[Stefan]

Hello, Majid,

The desired result can be made on the change event of the of the DatePicker. It will require getting the widget value and making an Ajax request with that value to the Controller action:

https://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker/events/change

<script>
    function onChange() {
        var date = this.value();

        $.ajax({
            type: "POST",
            url: "Home/MyActionResult",
            data: date,
            success: function () {
                alert('success');
            }
        });
    }
</script>

public ActionResult MyActionResult(string date)
{
    return View();
}

I hope this is helpful.

Regards,
Stefan
Progress Telerik