Wrong jqxDateTimeInput binding to MVC server

[mixcoderParticipant]

Hi I use VS2017 ASP.NET MVC 5 and I have now used many many hours trying to get binding for jqxDateTimeInput to work. When I run my solution it works fine to assign the birthday from the SQL/server database into the jqxDateTimeInput. However when I then afterwards update the birthday and press the submit button to post, then the server won’t update the database and it just returns the same initial date as it was before I changed it :(. You can see my script file in the bottom.

The default MVC datepicker from bootstrap works fine but unfortunately it isn’t displayed right in firefox browser. Textfields/dropdowns also works fine updating the SQL correct.

I think a part of the problem has to do with the missing “name” tag of the jqxDateTimeInput. When I debug in chrome I see the following code for the jqxDateTimeInput and there is not a “name” tag. As you see below here the id is “inputbirthday”.

<input style=”border: none; padding: 4px 3px; width: 256px; left: 0px; top: 0px; text-align: left;”
class=”jqx-position-absolute jqx-reset jqx-clear jqx-input-content jqx-widget-content jqx-rc-all”
id=”inputbirthday” autocomplete=”off” type=”textarea” placeholder=””>

If I try the same with the bootstrap datepicker I get the following in chrome debugger:

<input class=”form-control text-box single-line” data-val=”true” data-val-date=”” data-val-required=”” id=”birthday” name=”birthday” type=”date” value=”2012-10-05″>

As you see in the bootstrap sample both the “name” and “id” tags have the value “birthday”.

I think my problem can be solved if I someway can make the jqxDateTimeInput to have the “name” tage with a value “birthday”. Then MVC perhaps find out to pass the date value back to the server.

Can someone help ?

Thanks

The file Edit.cshtml contains the following code:

@using (Html.BeginForm())
{
@section scripts {
$(document).ready(function () {
$(“.myJqxDateTime”).jqxDateTimeInput({ formatString: “yyyy-MM-dd”, width: ‘300px’, height: ’25px’ });
});
}
}

<div class=”form-group”>
@Html.EditorFor(model => model.birthday, “{0:yyyy-MM-dd}”, new { htmlAttributes = new { @class = “.myJqxDateTime” } })
</div>

<input type=”submit” value=”Save” class=”btn btn-default” />

[Peter StoevKeymaster]

Hi mixcoder,

Put a “name” attribute” of jqxDateTimeInput as well. It works that way in our .NET and PHP demos.

[mixcoderParticipant]

Hello I just tried without luck to insert the “name” attribute. Chrome debug output:

<input style=”border: none; padding: 4px 3px; width: 256px; left: 0px; top: 0px; text-align: left;”
class=”jqx-position-absolute jqx-reset jqx-clear jqx-input-content jqx-widget-content jqx-rc-all”
id=”inputbirthday” name=”birthday” autocomplete=”off” type=”textarea” placeholder=””>

I also without luck tried to insert attribute id=”birthday” but it is automatically changed to id=”inputbirthday”.

I have no error in clientside and backend as well. Still just get the original date back in my controller.

Perhaps it is important that both “id” and the “name” tags have the value “birthday”. That’s the way it is for bootstrap datepicker. But appearently I can’t assign the id.

Any ideas?

Changed file Edit.cshtml contains the following code:

@using (Html.BeginForm())
{
@section scripts {
$(document).ready(function () {
$(“.myJqxDateTime”).jqxDateTimeInput({ formatString: “yyyy-MM-dd”, width: ‘300px’, height: ’25px’ });
});
}
}

<div class=”form-group”>
@Html.EditorFor(model => model.birthday, “{0:yyyy-MM-dd}”, new { htmlAttributes = new { @class = “.myJqxDateTime”, @name = “birthday” } })
</div>

<input type=”submit” value=”Save” class=”btn btn-default” />

[Peter StoevKeymaster]

Hi mixcoder,

To use jqxDateTimeInput here, you should put a DIV tag with “name” attribute. HTML.EditorFor is not something that will work or is expected to. jqxDateTimeInput is not a regular Input. I suggest you to take a look at the Registration Form ASP .NET MVC sample here: http://www.jqwidgets.com/jquery-widgets-demo/demos/aspnetmvc/index.htm

Regards,
Peter

[mixcoderParticipant]

Hi thanks for helping me in the right direction :). It was a tough one to solve but I end up with at solution using DIV as you said.

I send back the date to the server using the dateformat ‘dd-MM-yyyy 00:00:00’. This works fine and I guess that i works as long the host windowsserver stay with the same regional settings.

New source:

@using (Html.BeginForm())
{
@section scripts {
$(document).ready(function () {
$(“#jqbirthday”).jqxDateTimeInput({ width: ‘300px’, height: ’25px’, value: new Date(@Html.Raw(Model.birthday.Year), @Html.Raw(Model.birthday.Month – 1), @Html.Raw(Model.birthday.Day)), formatString: “dd/MM-yyyy” });
});
function ThisSubmit()
{
document.getElementById(‘birthday’).setAttribute(“value”, $.jqx.dataFormat.formatdate(new Date($(‘#jqbirthday’).jqxDateTimeInput(‘getDate’)), ‘dd-MM-yyyy 00:00:00’));
}
}
}

@Html.HiddenFor(model => model.birthday)
<div id=”jqbirthday” ></div>

<input type=”submit” value=”Save” class=”btn btn-default” onclick=”ThisSubmit()” />

[Author]

Posts