mvc datetime picker setting value from jquery does not bind to model

Question

I have date-time picker that is bound to a datetime property on my view-model. when I select the date from date-time picker and I post back, it binds the value to the model, but when I try to set the value through jequery, the value is always null.

my model is:

 public class viewmodel
{
    [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
    public datetime DDate { get; set; }

}

and the view code is

<div class="col-md-3">
@Html.TextBoxFor(m => m.DDate, new {@class = "form-control datepicker" })
@Html.ValidationMessageFor(model => model.DDate, "", new { @class = "text-danger" })</div>

javascript code is

$("#DDate").datepicker({ dateFormat: 'dd/mm/yy' });

so when I click an option button it sets the date of the datetime picker

$(':input[id="rbVatVoluntary"]').click(function () {

    var thDate = $("#DDate");
    thDate.attr("disabled", 'disabled');
    thDate.datepicker('setDate', new Date());});

When I check the console in the browser, I see that the value is set correctly but when I post the form and check the model property, it is null.

I appreciate any help on this

You have disabled the control - disabled controls do not post back a value — user3559349
– user3559349, Commented Sep 15, 2017 at 9:19
thDate.attr("disabled", 'disabled'); not submit value during POST - use thDate.attr("readonly", 'readonly'); instead. — Tetsuya Yamamoto
– Tetsuya Yamamoto, Commented Sep 15, 2017 at 9:20
Your TextBoxFor is binded on DDate whereas your model property name is Date ... Is this a typo ? — AlexB
– AlexB, Commented Sep 15, 2017 at 9:27
@TetsuyaYamamoto it worked, thank you very much. I've struggled with this allot. — rahebirizah
– rahebirizah, Commented Sep 15, 2017 at 9:35

Tetsuya Yamamoto · Accepted Answer · 2017-09-15 09:35:44Z

disabled HTML attribute prevents the input value to be submitted during POST request (treated as null value), as given by this explanation:

Disabled elements are usually drawn with grayed-out text. If the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. In the case of form elements, it will not be submitted.

If you want to retain the value to be submitted during POST but prevents user to change its content, use HTML readonly attribute instead:

$(':input[id="rbVatVoluntary"]').click(function () {
    var thDate = $("#Date");
    thDate.attr("readonly", "readonly");
    thDate.datepicker('setDate', new Date());
});

Also you need to match the property name to assigned one in helper method:

@Html.TextBoxFor(m => m.Date, new { @class = "form-control datepicker" })

Collectives™ on Stack Overflow

mvc datetime picker setting value from jquery does not bind to model

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related