Is it possible to use datepicker functionality only with bootstrap layout?

[JamesD]

When I use datepicker widget with bootstrap the styling is "double applied" as seen in the screenshot.
Is there an easy way to skip kendoui styling and just use the functionality?

Snippet <input type="month" class="form-control input-sm" id="Month" name="month"  />
<script>
$("#Month").kendoDatePicker({ depth: "year", start: "year" });
</script>

Thanks.

 R

[Petur Subev]

Hello Raido,

I do not see any screenshot attached, could you check if you missed to upload it?

The following demo demonstrates an integration with the Boostrap CSS framework and the DatePicker seems to be looking fine.

http://demos.kendoui.com/bootstrap/

Can you demonstrate your case with an JsBin example so we can investigate further?

Kind Regards,
Petur Subev
Telerik

[JamesD]

Sorry for the missing screenshot, Petur
Please take a look here:
http://jsbin.com/uzacoCUX/5/edit

The demo works great indeed, but omits the "form-control" class from the input - so the with doesn't resize with window.
When using it, the double-styling appears.

 R

[Alex Gyoshev]

Hello Raido,

The resizing with the window can be achieved by adding a "width: 100%" to the widget, instead of using the form-control class. In fact, this is how the bootstrap demo works (and it resizes elements with the container). Here is the relevant style:

.form-group .k-widget {
    width: 100%;
}

Regards,
Alex Gyoshev
Telerik

[JamesD]

Hello again

Thank you for the reply. Indeed, a nice solution can be worked out combining the styles.
In case I need to restyle my forms the rework needs to be done on this combination too (to conform with other controls).
So, please let me once come back to the original question. Is it possible to switch off kendoui styling (let e.g. bootstrap do it) and just use the functionality?

 R.

[Alex Gyoshev]

Hello Raido,

You cannot disable the Kendo UI styling without disabling the complete theme and recreating half of it in order to get the icons and colors going.

Regards,
Alex Gyoshev
Telerik

[Cory]

Unfortunately, this integration with Bootstrap still feels incomplete. If the input includes the form-control class, the datepicker appears inside the input as the JSBin shows. The full width issue was addressed, but the styling is still broken if the form-control class is used. There are other Bootstrap classes that expect input elements will have the form-control applied (e.g. form-group-sm, input-sm), so providing a demo that omits the form-control class is incomplete.

Any additional thoughts on using Bootstrap's form-control class with the datepicker?

[Cory]

Actually, it looks like the overlapping  datepicker appears as a result of the form-control class from the original input being applied to the widget span.

<span class="k-widget k-datepicker k-header form-control" style="">

Removing the form-control from the span corrects the appearance of the datepicker. Is there any way to indicate on a per-widget basis whether to apply the classes from the original element? I'm just concerned any solution at this point will be a big hack.

[Alex Gyoshev]

Hello Cory,

The DatePicker does not support this functionality. If you need the form-control class removed, you can do so via JavaScript after the widget is initialized -- jsBin.

Regards,
Alex Gyoshev
Telerik