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
– A191919, Commented Feb 17, 2016 at 21:32

Vixed · Accepted Answer · 2016-02-17 23:50:41Z

4

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>

edited Feb 17, 2016 at 23:50

answered Feb 17, 2016 at 22:31

Vixed

3,4996 gold badges40 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

A191919 Over a year ago

I get "Failed to load resource: the server responded with a status of 500 (Internal Server Error)".

Vixed Over a year ago

which kind of var do you expect? sure json?

A191919 Over a year ago

public ActionResult GetData(string dateTime) get's null. I expect on DateTime or something that can describe date.

Vixed Over a year ago

...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())},

A191919 Over a year ago

Yes! It work's! But Controller get's object how can i get datetime from object?

Community · Accepted Answer · 2017-05-23 12:07:34Z

0

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.

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Feb 17, 2016 at 21:58

Shyju

220k106 gold badges421 silver badges499 bronze badges

Comments

Hector Lara · Accepted Answer · 2018-04-07 14:51:30Z

0

I only did this and it works for me

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

answered Apr 7, 2018 at 14:51

Hector Lara

1822 silver badges10 bronze badges

Collectives™ on Stack Overflow

Pass DateTime to Controller

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related