Nicolas33400 free asked 6 years ago

Hi, I really don't like the design of the time picker and the datepicker doesn't work on ipad. I tried to update the css to swtich it to the original design ( but i can't make it work properly. Is there is a way to use the original design ? Thank's for helping.

Kamil Paciepnik free answered 6 years ago

Try this code. But remember to paste the corresponding directories css files:
<!doctype html>

    <meta charset="utf-8">

    <meta name="author" content="Amsul -">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">


    <link rel="stylesheet" href="../../lib/themes/default.css">
    <link rel="stylesheet" href="../../lib/themes/default.time.css">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="">

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Material Design Bootstrap -->
    <link href="css/mdb.css" rel="stylesheet">

    <!-- Your custom styles (optional) -->
    <link href="css/style.css" rel="stylesheet">

<!--[if lt IE 9]>
    <style type="text/css">
        .holder {
            position: relative;
            z-index: 10000;
        .datepicker {
            display: block;


    <section class="section">

                <h3><label for="input_01">Pick a time. Go ahead...</label></h3>
                    <!-- valuee="2:30 AM"
                    data-value="0:00" -->



    <script src="../jquery.1.9.1.js"></script>
    <script src="../../lib/picker.js"></script>
    <script src="../../lib/picker.time.js"></script>
    <script src="../../lib/legacy.js"></script>

    <script type="text/javascript">

        var $input = $( '.datepicker' ).pickatime({
        var picker = $input.pickatime('picker')



Nicolas33400 free answered 6 years ago

Finally the date picker works with the default.css, not with the classic. Anyway, i Tried to do the same thing with the timepicker but i'am facing another problem. What do i need to change to get the same visual as the classic ou default pickadate visual please ? Thank you again. Regards

Nicolas33400 free answered 6 years ago

Hi Kamil, I've done what you suggested but now when i click into the input box i see a little empty box as you can see : Empty picker Thanks for helping

Kamil Paciepnik free answered 6 years ago

Hi Nicolas33400, If you have styles like in the given link, follow to my instructions: 1. Add file default.css, and default.time.css to a folder CSS in MDB. 2. In index.html under the ruler:
<!-- Your custom styles (optional) -->
    <link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="css/default.css">

<link rel="stylesheet" href="css/">

<link rel="stylesheet" href="css/default.time.css">
3. In file css/style.css add:
.picker__day-display {
    display: none;
.picker__weekday-display {
    display: none;
.picker__date-display {
    background-color: #fff; 
    color: #000 !important;
.picker__year-display {
    color: #000;
.picker__select--month, .picker__select--year {
    padding: 0 !important;
If you still have a problem with implementation, write to me. Regards

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.


Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No