This is a migrated thread and some comments may be shown as answers.

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

8 Answers 213 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
JamesD
Top achievements
Rank 1
JamesD asked on 12 Dec 2013, 12:39 PM
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

8 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 14 Dec 2013, 09:53 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
JamesD
Top achievements
Rank 1
answered on 16 Dec 2013, 09:45 AM
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
0
Alex Gyoshev
Telerik team
answered on 18 Dec 2013, 09:13 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
JamesD
Top achievements
Rank 1
answered on 28 Jan 2014, 10:49 AM
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.
0
Alex Gyoshev
Telerik team
answered on 28 Jan 2014, 11:24 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Cory
Top achievements
Rank 1
answered on 12 Oct 2014, 10:42 PM
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?
0
Cory
Top achievements
Rank 1
answered on 12 Oct 2014, 11:27 PM
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.
0
Alex Gyoshev
Telerik team
answered on 13 Oct 2014, 09:38 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Date/Time Pickers
Asked by
JamesD
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
JamesD
Top achievements
Rank 1
Alex Gyoshev
Telerik team
Cory
Top achievements
Rank 1
Share this question
or