1. Add an input field The input field will serve you as a trigger for displaying the datepicker and will retrieve the date selected by your prospect.
2. Add these 2 custom attributes Data-Toggle = date pickerAutocomplete = off
3. Add this custom code to <head>your page tag <link rel="stylesheet" href="https://fengyuanchen.github.io/datepicker/css/datepicker.css">
<>
4. Add these code snippets before <body> <script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script> <script>
$(document).ready(function () {
$('[data-toggle="datepicker"]').datepicker({
format: 'mm-dd-yyyy'
});
// Available date placeholders:
// Year: yyyy
// Month: mm
// Day: dd
if (window.innerWidth < 768) {
$('[data-toggle="datepicker"]').attr('readonly', 'readonly')
}
});
</script> <style>
/* You can apply your own color!
--main-light-color is the light grey,
--main-dark-color is the text
--main-active-color is the highlight
you can just add like red, or blue or any helx you like! */
:root {
--main-light-color: #f3f5fb;
--main-dark-color: #321f59;
--main-active-color: #642eff;
}
.datepicker-dropdown {
border-radius: 8px !important;
border: 0 !important;
-webkit-box-shadow: 0px 48px 88px rgba(23, 9, 54, 0.08);
box-shadow: 0px 48px 88px rgba(23, 9, 54, 0.08);
box-sizing: border-box;
}
.datepicker-panel>ul[data-view="week"]>li {
background-color: var(--main-light-color);
color: var(--main-dark-color);
font-weight: bold;
text-transform: uppercase;
margin: 0;
height: initial;
padding-top: 3px;
margin-bottom: 4px;
}
.datepicker-panel>ul[data-view="week"]>li:hover {
background-color: var(--main-light-color);
color: var(--main-dark-color);
border-radius: 0px;
}
.datepicker-panel>ul[data-view="week"] li:first-child {
border-radius: 20px 0 0 20px;
}
.datepicker-panel>ul[data-view="week"] li:last-child {
border-radius: 0 20px 20px 0;
}
.datepicker-top-left::before,
.datepicker-top-left::after {
display: none;
}
.datepicker-panel>ul>li.picked,
.datepicker-panel>ul>li.highlighted,
.datepicker-panel>ul>li.picked:hover {
color: var(--main-active-color);
background: var(--main-light-color);
border-radius: 8px;
font-style: normal;
font-weight: 500;
font-size: 14px;
}
li[data-view="month current"],
li[data-view="year current"] {
text-align: left;
color: var(--main-dark-color);
font-style: normal;
font-weight: 500;
font-size: 14px;
/* line-height: 24px; */
padding-left: 15px;
border-radius: 10px;
}
.datepicker-panel>ul>li:hover {
background: var(--main-light-color);
border-radius: 10px;
}
li[data-view="month current"],
li[data-view="year current"],
li[data-view="years current"] {
margin-bottom: 4px !important;
}
@media screen and (min-width: 768px) {
.datepicker-dropdown {
width: 364px;
padding: 12px;
}
.datepicker-panel>ul>li {
width: 48px;
height: 48px;
padding-top: 10px;
}
li[data-view="month next"],
li[data-view="year next"],
li[data-view="years next"] {
position: absolute;
right: 18px
}
li[data-view="month prev"],
li[data-view="year prev"],
li[data-view="years prev"] {
position: absolute;
right: 66px
}
ul[data-view="months"] li,
ul[data-view="years"] li {
padding-top: 0px;
width: 57px !important;
}
}
@media screen and (max-width: 768px) {
.datepicker-panel {
transform: scale(0.97);
}
}
</style>
5. All that's left to do is add style You can easily update the colors on your datepicker using the first lines of style.
--main-light-color: #f3f5fb ;#321f59 ;#642eff ;
If you are comfortable with CSS, you can even customize the rendering of your datepicker in more detail (width, height, font...).
And if you are not super comfortable, copy/paste the css (the 3rd piece of code above, the one between the tags<style>) and ask ChatGTP to apply the style you want!
Bon à savoir
Vous pouvez modifier le format de la date simplement en modifiant mm-dd-yyyy par dd-mm-yyyy pour l'adapter au format français
6. Publish and test
7. Change the format to get a datepicker in French format (fr-FR) Use this <script>in the <body>of your page in place of the code in point 4.
<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script>
<script>
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('jquery')) :
typeof define === 'function' && define.amd ? define(['jquery'], factory) :
(factory(global.jQuery));
}(this, (function ($) {
'use strict';
$.fn.datepicker.languages['fr-FR'] = {
format: 'dd/mm/yyyy',
days: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
daysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
daysMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
weekStart: 1,
months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
monthsShort: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Jun', 'Jui', 'Aoû', 'Sep', 'Oct', 'Nov', 'Dec'] };
})));
</script>
<script>
$(document).ready(function () {
$('[data-toggle="datepicker"]').datepicker({
language: 'fr-FR'
});
if (window.innerWidth < 768) {
$('[data-toggle="datepicker"]').attr('readonly', 'readonly');
}
});
</script>
If you want to know more about the component, I share The doc right here . Enough to change the format, the display, and add some features that you may find interesting.
