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

9 posts, 0 answers
  1. JamesD
    JamesD avatar
    23 posts
    Member since:
    Nov 2005

    Posted 12 Dec 2013 Link to this post

    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

  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 14 Dec 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. JamesD
    JamesD avatar
    23 posts
    Member since:
    Nov 2005

    Posted 16 Dec 2013 Link to this post

    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
  5. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 18 Dec 2013 Link to this post

    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!
  6. JamesD
    JamesD avatar
    23 posts
    Member since:
    Nov 2005

    Posted 28 Jan 2014 Link to this post

    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.
  7. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 28 Jan 2014 Link to this post

    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!
  8. Cory
    Cory avatar
    11 posts
    Member since:
    Jun 2014

    Posted 12 Oct 2014 Link to this post

    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?
  9. Cory
    Cory avatar
    11 posts
    Member since:
    Jun 2014

    Posted 12 Oct 2014 Link to this post

    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.
  10. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 13 Oct 2014 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready