Pass DateTime to Controller

Question

I want to pass DateTime that was selected in datetimepicker in controller.

@{
ViewBag.Title = "Index";
}

<h2>Index</h2>

<script src="~/Scripts/jquery-2.2.0.min.js"></script>
<script src="~/Scripts/moment.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />

<div class="container">
<div class="row">
    <div class='col-sm-6'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker1'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker1').datetimepicker();
        });
    </script>
</div>
</div>

Controller:

public class HomeController : Controller
{
    //
    // GET: /Home/

    public ActionResult Index()
    {
        return View();
    }

    public ActionResult GetData(DateTime dateTime)
    {
        return View();
    }
}

What is the best way to do this? Use Ajax? How to do it correct?

 $.ajax({
    url: "/Home/GetData",
    type: "POST",
    dataType: "json",
    data: JSON.stringify(????),
    contentType: "application/json; charset=utf-8",
    success: function (result) { }, 
    failure: function (r, e, s) { alert(e); } 
 });

Maybe it will be better to send datetime in controller when span is closing. — A191919, Feb 17 '16 at 21:32

Vixed · Accepted Answer · 2016-02-17T23:50:41.580

I don't like the way you put all this JS and CSS on the page.. anyway this should works.

@{
ViewBag.Title = "Index";
}

<h2>Index</h2>

<script src="~/Scripts/jquery-2.2.0.min.js"></script>
<script src="~/Scripts/moment.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $('#datetimepicker1').datetimepicker({useCurrent: false});
            $('#datetimepicker1').on("dp.change",function(e){
                $.ajax({
                    url: "/Home/GetData",
                    type: "POST",
                    data: {nameOfVar: $('#datetimepicker1').data('DateTimePicker').date().format('YYYY-MM-DD HH:mm')},
                    contentType: "application/json",
                    success: function(result){ alert('Done') }, 
                    error: function(r,e,s){ alert(e) } 
                });
            });
        </script>
    </div>
</div>

I get "Failed to load resource: the server responded with a status of 500 (Internal Server Error)". — A191919, Feb 17 '16 at 22:49
public ActionResult GetData(string dateTime) get's null. I expect on DateTime or something that can describe date. — A191919, Feb 17 '16 at 22:57
**...data('DateTimePicker').date()** returns an object. I saw it on the console right now, please, try using: `data: {yourVarName: JSON.stringify($('#datetimepicker1').data('DateTimePicker').date())},` — Vixed, Feb 17 '16 at 23:03
Yes! It work's! But Controller get's object how can i get datetime from object? — A191919, Feb 17 '16 at 23:32

score 0 · Answer 2 · edited May 23 '17 at 12:07

You can basically listen for the change event on the input field and send the value of that. You don't really need to stringify it as it is simple value you are sending.

$(function(){

  $("#datetimepicker1").change(function(){
     var v = $(this).val();
     if(v.length>0)
     {
          var url = "@Url.Action("GetData","Home")" +"? dateTime="+v;
          $.get(url, function(re) {
              //do something with the re
              console.log(re);
          });
     }

  });


});

I used the Url.Action method to generate the correct relative url to the action method. This code will work if your js code is inside a razor view. If your code is inside an external js file, Use the method explained in this post.

score 0 · Answer 3 · answered Apr 07 '18 at 14:51

0

I only did this and it works for me

$('.date').datepicker({ dateFormat: "YYYY-MM-DD HH:mm" });

answered Apr 07 '18 at 14:51

Hector Lara

182
1
10

Pass DateTime to Controller

3 Answers3