This is a migrated thread and some comments may be shown as answers.

I am having problem sending datetime to my controller

2 Answers 73 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Majid
Top achievements
Rank 1
Majid asked on 09 Apr 2018, 06:03 PM

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>

 

2 Answers, 1 is accepted

Sort by
0
Majid
Top achievements
Rank 1
answered on 09 Apr 2018, 06:04 PM

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);
        }
        




    }

0
Stefan
Telerik team
answered on 11 Apr 2018, 06:28 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Date/Time Pickers
Asked by
Majid
Top achievements
Rank 1
Answers by
Majid
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or