ASP.Net JQuery UI pass selected date to Model

Question

I am working with a JQuery UI DatePicker, and want the user to click an available date, when the date is clicked an event to be triggered and pass the date to a model, so my controller can get information back from the database.

my view looks like this right now, but I do not know what I need to do from here.

@model WebSite.DataModel.Booking

<script>
$(function () {
    $("#datepicker").datepicker({ dateFormat: "dd-mm-yy" }).val();
});

@using (Html.BeginForm())
{
<div class="editor-field left" id="datepicker">
    @Html.HiddenFor(model => model.SessionDate)
    @Html.ValidationMessageFor(model => model.SessionDate)
</div>


    <div class="col-md-10">
        <input type="submit" value="Search Available Slots" class="btn btn-default left" />
    </div>
}

I have had a look around on the net, but cant find anything that would trigger an event to pass the value from the @Html.HiddenFor based on the datepicker click event.

Any and all help very much appreciated.

Thanks

Here is a great answer: http://stackoverflow.com/a/7562489/1888402 — ZeroBased_IX, Aug 26 '15 at 19:09
would doing something like this work ` @Html.HiddenFor(model => model.SessionDate == Convert.ToDateTime("datepicker"))` — Simon Price, Aug 26 '15 at 19:35
`HiddenFor` creates a hidden input type. how can a user click on it ? i guess it is `TextBoxFor`. and have you tried the excat code you gave ? — J Santosh, Aug 27 '15 at 02:33

score 0 · Accepted Answer · answered Aug 26 '15 at 23:40

my solution may help you.

first thing: in your javascript .val() is not required as below.

$("#datepicker").datepicker({ dateFormat: "dd-mm-yy" });

But, you need to bind a function to onSelect event of datepicker. I am writing here anonymous function as you can replace with your own function.

$("#datepicker").datepicker({ 
    dateFormat: "dd-mm-yy",
    onSelect: function () {
        //alert($("#datepicker").val());

        //for the below line, please check  
        //the rendered control's id and use the same.
        $("#WebSite.DataModel.Booking.SessionDate").val($("#datepicker").val());
    }
});

You got the value in to your hidden field. Now it is up to you to post the form or make ajax request by dynamically forming data and passing to action.

Let me know if you need any more information.

If it works for you, mark it as answer :)

ASP.Net JQuery UI pass selected date to Model

1 Answers1