Datepicker : Change CSS

Topic: Datepicker : Change CSS

Nicolas33400 free asked 7 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 (http://amsul.ca/pickadate.js/) but i can't make it work properly. Is there is a way to use the original design ? Thank's for helping.

Add comment

Kamil Paciepnik free answered 7 years ago

0 0 Best answer

Try this code. But remember to paste the corresponding directories css files:

<title>Pickadate.js</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">

<link href="css/bootstrap.min.css" rel="stylesheet">

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

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

<body>

<form>
            <fieldset>
                <h3><label for="input_01">Pick a time. Go ahead...</label></h3>
                <input
                    id="input_from"
                    class="datepicker"
                    type="time"
                    name="time"
                    autofocuss>
                    
            </fieldset>
        </form>

</section>

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

</script>

</body></code></pre>

Please insert min. 20 characters.

Try this code. But remember to paste the corresponding directories css files:

<!doctype html>

    <meta charset="utf-8">

    <meta name="author" content="Amsul - http://amsul.ca">
    <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">

    <title>Pickadate.js</title>

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

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">

    <!-- 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]>
    <script>document.createElement('section')</script>
    <style type="text/css">
        .holder {
            position: relative;
            z-index: 10000;
        }
        .datepicker {
            display: block;
        }
    </style>
<![endif]-->

<body>

    <section class="section">

        <form>
            <fieldset>
                <h3><label for="input_01">Pick a time. Go ahead...</label></h3>
                <input
                    id="input_from"
                    class="datepicker"
                    type="time"
                    name="time"
                    autofocuss>
                    <!-- valuee="2:30 AM"
                    data-value="0:00" -->
            </fieldset>
        </form>

        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    </section>

    <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')
        picker.open()

    </script>

</body>

Add comment

Nicolas33400 free answered 7 years ago

0 0 Best answer

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

Add comment

Nicolas33400 free answered 7 years ago

0 0 Best answer

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

http://www.hostingpics.net/viewer.php?id=182150Capture.jpg Thanks for helping

Add comment

Kamil Paciepnik free answered 7 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi Nicolas33400, If you have styles like in the given link, follow to my instructions: 1. Add file default.css, default.date.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">

add:

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

<link rel="stylesheet" href="css/default.date.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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Specification of the issue

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

Nicolas33400

10Support score
1Questions 2Answers 0Snippets