issues with getting floating label to work

[gasda]

The code im using is

                           <div class="e-float-input">
                                    @(Html.EJS().DateTimePicker("IncidentDate")
                                          .Value(Model.IncidentDate)
                                          .Render())
                                    @Html.LabelFor(model => model.IncidentDate, new { @for = "IncidentDate", @class = "e-float-text" })
                                    @Html.ValidationMessageFor(model => model.IncidentDate, "", new { @class = "text-muted text-danger small" })
                                </div>

On page load, when a value is set, the floating label is floating and then resets as if theres no value. After that it does not float at all.

The html code the code above generates is

<div class="col-12 col-lg-3">
                                <div class="e-float-input">
                                    <span class="e-input-group e-control-wrapper e-datetime-wrapper" style="width: 100%;"><input id="IncidentDate" class="e-control e-datetimepicker e-input e-keyboard" name="IncidentDate" aria-live="assertive" aria-atomic="true" aria-haspopup="true" aria-activedescendant="null" aria-owns="IncidentDate_options" aria-expanded="false" role="combobox" autocomplete="off" aria-invalid="false"><span class="e-input-group-icon e-date-icon e-icons" aria-label="select"></span><span class="e-input-group-icon e-time-icon e-icons"></span></span>
                                    <label class="e-float-text" for="IncidentDate">IncidentDate</label>
                                    <span class="field-validation-valid text-muted text-danger small" data-valmsg-for="IncidentDate" data-valmsg-replace="true"></span>
                                </div>
                            </div>

Can you help me get floating label working

You can see an example here

http://jsplayground.syncfusion.com/r0p4mjvy

[gasda]

A more simple example, based on https://aspnetmvc.syncfusion.com/TextBoxes/DefaultFunctionalities#/material

using the code below has a functional floating label

<div class="e-float-input"> <input type="text" required="" id="tt"> <span class="e-float-line"></span> <label class="e-float-text" for="tt">First Name</label> </div>

but if i add a datepicker, the floating label no longer works

            var datetimepicker = new ej.calendars.DateTimePicker();
            datetimepicker.appendTo('#tt');

[Prem Kumar Madhan Raj]

Hi Gasda, 

Sorry for the incovinience. 

Since float label type property support has not been included in ASP.NET Core and MVC platforms, DateTimePicker component label will not be floated on selecting a value. This support will be included in our Volume 2 Beta release which is expected to be rolled out by mid of May 2^nd week 2018. We appreciate your patience until then. 

Regards, 

Prem Kumar M  

[gasda]

Thanks for the response, another question. will the may 2 release include MVC Extensions for creating inputs based on model? using the example above, instead of

@(Html.EJS().DateTimePicker("IncidentDate")
                                          .Value(Model.IncidentDate)
                                          .Render())

we can use

@(Html.EJS().DateTimePickerFor(m => m.IncidentDate).Render())

ej1 already has this, im hoping ej2 gets it soon

[Prem Kumar Madhan Raj]

Gi Gasda, 

 

Sorry for the inconvinience. 

 

FOR controls support for EJ2 components in ASP.NET Core and MVC platforms will be included only in our Volume 2 main release which is expected to be rolled out by 3^rd week of May 2018. Please be patience until then. 

 

Regards, 

 

Prem Kumar M 

[gasda]

has his been released yet?

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Gasda, 

 

Sorry for the inconvenience. 

 

We are currently in the testing phase of the stability of our release and it will be rolled out by next week.  We will let you know when the release is out. You may also check our website periodically to know about our release schedule. 

 

Regards, 

 

Shameer Ali Baig S.