locked
Datepicker for Bootstrap 3 themes RRS feed

  • Question

  • User-2136750558 posted

    Does anyone know where to find themes for the datepicker for Bootstrap 3?  The default theme is white and I would like to use a different theme on my web page.  If there aren't any themes available online, does anyone know how to change the css for the datepicker's header? 

    Friday, March 30, 2018 8:51 PM

Answers

  • User-832373396 posted

     Hi MyagiCodes,

    Please change it at this line which with the highlight

    1 download from https://eonasdan.github.io/bootstrap-datetimepicker/Installing/ 

    Here is the full code of bootstrap-datetimepicker-standalone.css file, and we could see background-color: #fff; the default color is white

    /*!
     * Datetimepicker for Bootstrap 3
     * version : 4.17.37
     * https://github.com/Eonasdan/bootstrap-datetimepicker/
     */
    @font-face {
        font-family: 'Glyphicons Halflings';
        src: url('../fonts/glyphicons-halflings-regular.eot');
        src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
    }
    
    .glyphicon {
        ;
        top: 1px;
        display: inline-block;
        font-family: 'Glyphicons Halflings';
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    .glyphicon-time:before {
        content: "\e023";
    }
    
    .glyphicon-chevron-left:before {
        content: "\e079";
    }
    
    .glyphicon-chevron-right:before {
        content: "\e080";
    }
    
    .glyphicon-chevron-up:before {
        content: "\e113";
    }
    
    .glyphicon-chevron-down:before {
        content: "\e114";
    }
    
    .glyphicon-calendar:before {
        content: "\e109";
    }
    
    .btn {
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: normal;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
    }
    
    .collapse {
        display: none;
    }
    
        .collapse.in {
            display: block;
        }
    
    .dropdown-menu {
        ;
        left: 0;
        z-index: 1000;
        display: none;
        float: left;
        min-width: 160px;
        padding: 5px 0;
        margin: 2px 0 0;
        font-size: 14px;
        text-align: left;
        list-style: none;
        background-color: #fff;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        border: 1px solid #ccc;
        border: 1px solid rgba(0, 0, 0, .15);
        border-radius: 4px;
        -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
        box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    }
    
    .list-unstyled {
        padding-left: 0;
        list-style: none;
    }

    So we could change it by ourselves to the color and next, add the bootstrap-datetimepicker-standalone.css reference under the bootstrap-datetimepicker.css 

    With Regards, Angelina Jolie

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 2, 2018 9:45 AM