If I prepopulate my HTML control as follows:
@Html.TextBox(string.Empty, Model.Value.ToString("h:mm tt"), new { @class = "form-control timecontrol", @type = "time" })
and then initialize my igDateEditor as follows:
$('.timecontrol').igDateEditor({ dateInputFormat: "h:mm tt", dateDisplayFormat: "h:mm tt", width: "100%", allowNullValue: true, buttonType: "spin" });
When I select the control to edit the value the editor goes blank and I lose the value set via my @Html.TextBox call.
If I change my MVC text box call to the following it works but obviously flashes the full date value for a second first:
@Html.TextBox(string.Empty, Model.Value.ToString(), new { @class = "form-control timecontrol", @type = "time" })
Hello Dr Tone,
Thank you for using our community.
Let me firs answer your first question. When you use string value for the “value” option, the editor uses the JavaScript constructor to create a date object out of it. The format that you use is not recognized by JavaScript as a valid way to set a value ant that is why your attempt to set a value this way fails. What I mean is if the time you set is like this “12:20 AM”, the JavaScript constructor will look like this new Date("12:20 AM") and this returns “Invalid Date”.
What I can suggest you to do is use our MVC wrappers. That way you will be able to set the date directly to the editor and the date value won’t flash. The following code demonstrates how to use our MVC wrapper for igDateEditor:
@(Html.Infragistics().DateEditor()
.DateInputFormat("h:mm tt")
.DateDisplayFormat("h:mm tt")
.AllowNullValue(true)
.ButtonType(TextEditorButtonType.Spin)
.Value(Model)
.Render())
If you have any other questions, let me know.
Best Regards, Marina Stoyanova, Software Developer, Infragistics, Inc.
I tried the following and I just get some broken javascript. I should note I'm doing this in an EditorTemplate if that changes anything.
Error: '$' is undefined
@(Html.Infragistics().DateEditor().DateInputFormat("h:mm tt").DateDisplayFormat("h:mm tt").AllowNullValue(true).ButtonType(TextEditorButtonType.Spin).Value(Model).HtmlAttributes(new Dictionary<string, object>() {{"class", "form-control"}}).Render())
The reason you notice a different behavior in the editors is that from 15.2 version of out ignite ui controls, the editors are brand new, based on different architecture. In our online documentation you can find more information about that change as well as migration topics for all of the editors:
http://www.igniteui.com/help/igeditors-landingpage
The error that you see means that you are missing jQuery references. Also if you haven’t added the Infragistics references, you will need them too.
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
If you need further assistance, let me know.
I'm not missing a jQuery reference. It's handled in bundling and rendered in my _Layout.cshtml file
Hello,
Could you please send me your sample as attached file, so I can investigated it and provide you a better support.
Regards,
Marina Stoyanova
Software Developer,
Infragistics, Inc.