AppendIcon going to NextLine

[nat2k5us]

I am trying to use the Time Picker from http://eonasdan.github.io/bootstrap-datetimepicker/ with BMVC

<div class="input-append date" id="datetimepickerend">
    @f.ControlGroup().TextBoxFor(model => model.SchedulePeriod.ActiveEndTimeText).AppendIcon("glyphicon glyphicon-time").Class("form-control").Label().Class("col-sm-2 control-label") <br />
</div>

  $("#datetimepickerend").datetimepicker({
                        format: 'hh:mm',
                        pickDate: false,
                        pick12HourFormat: true,
                        pickSeconds: false
                    });

But the time icon ends up going to the next line.

I know this may not be a BMVC issue but wanted know if there a TimePicker anyone used with BMVC.

[DmitryEfimenko]

You should really take a look at this page - specifically the part where they are talking about code.

BMVC usually takes care of adding classes like form-control and control-label, so you probably should not be doing that in your code. I'm not sure if that would fix your problem, but give this a shot. If this does not fix the problem, please post html markup that is being rendered for you.

[nat2k5us]

When I remove the Class form-control and control-label from the bootstrap like below

<div id="datetimepickerend">
    @f.ControlGroup().TextBoxFor(model => model.SchedulePeriod.ActiveEndTimeText).AppendIcon("glyphicon glyphicon-time")
</div>

The form alignments and layout is not correct.

The rendered HTML for the above

<div class=" control-group">
   <label class="control-label" for="SchedulePeriod_ActiveEndTimeText">Active End Time<span class="required" style="visibility: hidden;">*</span> </label>
   <div class="controls">
      <div class="input-append date"><input name="SchedulePeriod.ActiveEndTimeText" id="SchedulePeriod_ActiveEndTimeText" type="text" value="10:00"><span class="add-on"><i class="glyphicon glyphicon-time icon-time"></i></span></div>
      <span class="help-inline"><span class="field-validation-valid help-inline" data-valmsg-replace="true" data-valmsg-for="SchedulePeriod.ActiveEndTimeText"></span></span>
   </div>
</div>

[DmitryEfimenko]

and you have your form of type horizontal? Please show definition of variable @f

[nat2k5us]

See Below: Edit.cshtml

@model WebClient.ViewModels.ScheduledMessageItemViewModel
   @using (var f = Html.Bootstrap().Begin(new Form().Type(FormType.Horizontal)))
        {
            @Html.AntiForgeryToken()
            @Html.Partial("_CreateOrEdit", Model)
        }

_CreateOrEdit.cshtml (partial view)

@model WebClient.ViewModels.ScheduledMessageItemViewModel
@{
    if (this.Model == null)
    {
        @:<div class="alert alert-error">Record Not Found!</div>
        return;
    }
    var f = Html.Bootstrap().Misc().GetFormBuilderFromViewData();
}

<div class="input-append date" id="datetimepicker" >
    @f.ControlGroup().TextBoxFor(model => model.SchedulePeriod.ActiveStartTimeText).AppendIcon("glyphicon glyphicon-time").Class("form-control").Label().Class("col-sm-2 control-label") <br />
</div>
<div id="datetimepickerend">
    @f.ControlGroup().TextBoxFor(model => model.SchedulePeriod.ActiveEndTimeText).AppendIcon("glyphicon glyphicon-time")
</div>
 @Html.Partial("_SubmitCancelButtonPartial")

[DmitryEfimenko]

All right, it seems you are mixing rules for Bootstrap v2.3.2 and v3. Class form-control is used in v3. However, syntax @f.ControlGroup() is used in v2.3.2 of BMVC. So which Bootstrap are you targeting?

Also, try to append icon without using the datetime plugin. Make that work first.

[nat2k5us]

I am using v3 of bootstrapper and BMVC 2

[DmitryEfimenko]

Well, there is your problem. For v3 of Bootstrap you need BMVC 3. Read installation info

[nat2k5us]

And BMVC3 is paid version right? We would like to get a trail version,verify it resolves and then purchase it (how much is the paid version?)

[DmitryEfimenko]

This is correct, BMVC 3 is a paid version. You may download a Trial version from this page. Information about pricing is there as well.

[nat2k5us]

Tried it with the Trail version and got the same effect. What would be nice is if you can add support for this TimePicker like you have done for the Eyecon datepicker like below.

@f.ControlGroup().TextBoxFor(model => model.SchedulePeriod.StartDate).DatePicker(new DatePicker().Format("mm-dd-yyyy"))

Thanks.

[DmitryEfimenko]

Have you tried using BMVC without datepicker? Does it give you same result in that case? Did you switch in web.config to use Bootstrap 3?

[nat2k5us]

Yes, I did. This is what it looks like

  @f.FormGroup().TextBoxFor(model => model.SchedulePeriod.ActiveStartTimeText).Id("datetimepickerstart").AppendIcon("glyphicon glyphicon-time")

This is the rendered HTML

<div class=" form-group">
   <label class="control-label col-lg-2" for="SchedulePeriod_ActiveStartTimeText">Active Start Time<span class="required" style="visibility:hidden;">*</span> </label>
   <div class="col-lg-10">
      <div class="input-group"><input class="form-control" id="datetimepickerstart" name="SchedulePeriod.ActiveStartTimeText" value="08:00" type="text"><span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span></div>
      <span class="field-validation-valid help-inline" data-valmsg-for="SchedulePeriod.ActiveStartTimeText" data-valmsg-replace="true"></span>
   </div>
</div>

[nat2k5us]

Have you tried using BMVC without datepicker? Does it give you same result in that case?

Yes, without the date picker the ICON goes to the far right like in the above picture.

[DmitryEfimenko]

Please create a sample project that shows the issue, zip it up and send it to my email address (found at the end of this page)

[nat2k5us]

I got the timepicker to showup right without the appendicon in bmvc2 and going to settle for that for now. proect sent

[DmitryEfimenko]

ok, in the project that you sent to me use this:

@Html.Bootstrap().FormGroup().TextBoxFor(m => m.StartTime).AppendIcon("glyphicon glyphicon-time", new { @id = "datetimepickerstart" })

[nat2k5us]

In the Sample proect with the above code The TimePicker does not update the Time when you click on the UP/Down or AM/PM.

[DmitryEfimenko]

all right, so it looks like either a new overload will need to be created, which will take object of html attributes for the container or you'll have to write this one manually. introducing new overload will mean 3 parameters that'll have to be passed to the method .AppendIcon(), which is not very pretty. Would still like this method to be created or will you go manual way?

[nat2k5us]

At this point I am fine with the manaul - which I will have to keep the back burner (this one too way too much time) For now it work when clicked in the text box - and I am not displaying the icon as a compromise. Ideally would like it to work like the eyecon datepicker.