Do not interfere of Bootstrap css in jQuery UI TimePicker

Question

I'm trying to use the jQuery UI Timepicker but to enter with the bootstrap it this unconfiguring the css jQuery UI TimePicker.

Anyone know how to solve this problem because I need the bootstrap, but it can not interfere with css TimePicker.

Follows the code in Jsfiddle

The bootstrap used:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

Answer 1

Can't you just change the class name of the timepicker? Change the class timepicker in timepicker-test

.ui-widget { font-size: 12px; }

/*
 * Timepicker stylesheet
 * Highly inspired from datepicker
 * FG - Nov 2010 - Web3R 
 *
 * version 0.0.3 : Fixed some settings, more dynamic
 * version 0.0.4 : Removed width:100% on tables
 * version 0.1.1 : set width 0 on tables to fix an ie6 bug
 */

.ui-timepicker-test-inline { display: inline; }

#ui-timepicker-test-div { padding: 0.2em; background-color: #fff; }
.ui-timepicker-test-table { display: inline-table; width: 0; }
.ui-timepicker-test-table table { margin:0.15em 0 0 0; border-collapse: collapse; }

.ui-timepicker-test-hours, .ui-timepicker-test-minutes { padding: 0.2em;  }

.ui-timepicker-test-table .ui-timepicker-test-title { line-height: 1.8em; text-align: center; }
.ui-timepicker-test-table td { padding: 0.1em; width: 2.2em; }
.ui-timepicker-test-table th.periods { padding: 0.1em; width: 2.2em; }

/* span for disabled cells */
.ui-timepicker-test-table td span {
    display:block;
    padding:0.2em 0.3em 0.2em 0.5em;
    width: 1.2em;

    text-align:right;
    text-decoration:none;
}
/* anchors for clickable cells */
.ui-timepicker-test-table td a {
    display:block;
    padding:0.2em 0.3em 0.2em 0.5em;
    width: 1.2em;
    cursor: pointer;
    text-align:right;
    text-decoration:none;
}


/* buttons and button pane styling */
.ui-timepicker-test .ui-timepicker-test-buttonpane {
    background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0;
}
.ui-timepicker-test .ui-timepicker-test-buttonpane button { margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
/* The close button */
.ui-timepicker-test .ui-timepicker-test-close { float: right }

/* the now button */
.ui-timepicker-test .ui-timepicker-test-now { float: left; }

/* the deselect button */
.ui-timepicker-test .ui-timepicker-test-deselect { float: left; }


/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
.ui-timepicker-test-cover {
    display: none; /*sorry for IE5*/
    display/**/: block; /*sorry for IE5*/
    position: absolute; /*must have*/
    z-index: -1; /*must have*/
    filter: mask(); /*must have*/
    top: -4px; /*must have*/
    left: -4px; /*must have*/
    width: 200px; /*must have*/
    height: 200px; /*must have*/
}