JSClandar - Data Pickers - Examples JM

A placer dans le head :

<head>
<meta charset="utf-8">
<title>Minimal jsCalendar Demo</title>

<!-- jsCalendar v1.4.5 -->

<!-- Core Minified -->
<script src="https://cdn.jsdelivr.net/gh/GramThanos/jsCalendar@v1.4.5/source/jsCalendar.min.js" integrity="sha384-F3Wc9EgweCL3C58eDn9902kdEH6bTDL9iW2JgwQxJYUIeudwhm4Wu9JhTkKJUtIJ" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GramThanos/jsCalendar@v1.4.5/source/jsCalendar.min.css" integrity="sha384-CTBW6RKuDwU/TWFl2qLavDqLuZtBzcGxBXY8WvQ0lShXglO/DsUvGkXza+6QTxs0" crossorigin="anonymous">
<!-- Core Normal -->
<!--
<script src="https://cdn.jsdelivr.net/gh/GramThanos/jsCalendar@v1.4.5/source/jsCalendar.js" integrity="sha384-9U5mx0TwE3KynzfE2673H8cGnEKbBh/hEW/MPkdR9C8qU0lyKvFxZdo9E/5vpcTk" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GramThanos/jsCalendar@v1.4.5/source/jsCalendar.css" integrity="sha384-1eG5+BK6CGsH/Pv3yC+0Q17dhDvZTewIMAyQtzOe6Sdf3Y2mAAbIJUonVtuF0aBS" crossorigin="anonymous">
-->

<!-- Optional Languages -->
<script src="https://cdn.jsdelivr.net/gh/GramThanos/jsCalendar@v1.4.5/source/jsCalendar.lang.fr.js" integrity="sha384-KwbbcoiATTslp59b+0njB+Kee4zLz3uQQnfXpDO8R/0c74NRyIZtNNGSf23bb5sX" crossorigin="anonymous"></script>

<!-- Optional Themes -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GramThanos/jsCalendar@v1.4.5/themes/jsCalendar.clean.min.css" integrity="sha384-+Q5KnhF5PDyAjoLJ73El+kWpIqwE45/tnCDNQUCoI6aC0I5NB3PjSNsJh7DNlSNl" crossorigin="anonymous">
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GramThanos/jsCalendar@v1.4.5/themes/jsCalendar.clean.css" integrity="sha384-iu6Xy6xFoxfjWh3PAdkR3OnAUOSAqV+DzTV68jUTHcp+ChMcGcP/AHAQVffSk3ZH" crossorigin="anonymous">-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GramThanos/jsCalendar@v1.4.5/themes/jsCalendar.darkseries.min.css" integrity="sha384-/Q810KfMjn0yvx2vItxJAmnH8Iv7/hrv7uy2ayVeB2ZEtA0KbEeMYWXWKrjPspw2" crossorigin="anonymous">
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GramThanos/jsCalendar@v1.4.5/themes/jsCalendar.darkseries.css" integrity="sha384-pAl+cSXMJQfKRFQVA9kUU7CND001EQJRr/wg+E9b98uvyPhluvZ9hMOdkv2OFfr1" crossorigin="anonymous">-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GramThanos/jsCalendar@v1.4.5/themes/jsCalendar.micro.min.css" integrity="sha384-3gCaZq7eDuL3x8LF+0UCFizRVc+c26pzZLa2YGmnLdg6w0eqcpNtND/YjdZeTHdr" crossorigin="anonymous">
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GramThanos/jsCalendar@v1.4.5/themes/jsCalendar.micro.css" integrity="sha384-uA5g8zJY+Xx+zuLq7rlcHqcqz7JDu/b/GV5pcvmapGNf6MG+1AeY75pQOQZ+LjB6" crossorigin="anonymous">-->

<!-- Optional Extensions -->
<script src="https://cdn.jsdelivr.net/gh/GramThanos/jsCalendar@v1.4.5/extensions/jsCalendar.datepicker.min.js" integrity="sha384-wtfZsrKmrTZWlxIwe+M5+4+N86yssnwnp+roPrrn2iZmZpYwiLuwjyiK7gPHiXaL" crossorigin="anonymous"></script>
<!--<script src="https://cdn.jsdelivr.net/gh/GramThanos/jsCalendar@v1.4.5/extensions/jsCalendar.datepicker.js" integrity="sha384-5OolMXEGgjxv0NWEN5CR+spNSn8lbAxaftqcI5b9FenGumJRH6YyLElB5UEknI5u" crossorigin="anonymous"></script>-->
</head>
 

Exemple 1  data-class= classic-theme micro-theme

<body>
<div id="wrapper">

<input type="text"
name="test-1"
data-first-day-of-the-week="2"
data-language="fr"
data-month-format="##/YYYY"
data-class="classic-theme micro-theme"
data-zero-fill="true"
data-navigator="true"
data-min="01/11/2023"
data-date="now"
data-day-format="DD"
data-navigator-position="left"
data-datepicker />

</div>

 

 Exemple 2 data-class=auto-jsCalendar 

<body>
<div id="wrapper">

<input type="text"
name="test-2"
data-first-day-of-the-week="2"
data-language="fr"
data-month-format="MONTH YYYY"
data-class="auto-jsCalendar"
data-zero-fill="true"
data-navigator="true"
data-min="01/11/2023"
data-date="now"
data-day-format="DDD"
data-navigator-position="left"
data-datepicker />

</div>
 
Exemple 3 : data-class=classic-theme

<body>
<div id="wrapper">

<input type="text"
name="test-3"
data-first-day-of-the-week="2"
data-language="fr"
data-month-format="MONTH YYYY"
data-class="classic-theme"
data-zero-fill="true"
data-navigator="true"
data-min="01/11/2023"
data-date="now"
data-day-format="DDD"
data-navigator-position="left"
data-datepicker />

</div>

  


 

 

 

 

 


 

##/YYYY

data-class="auto-jsCalendar"

// Date picker optionsr> target : '#example-5', // Target input to insert the datepicker
format : 'DAY, D MONTH YYYY', // Date format for the input value
offsetTop : 5, // Datepicker render top-offset
offsetLeft : -1, // Datepicker render left-offset
close_keycodes : [13], // Close only with ENTER
class : 'classic-theme micro-theme', // Set jsCalendar micro classic theme
yearsLine : true, // Add a line with year on the calendar

// Additional jsCalendar's option
zeroFill : true, // Add zero before date numbers
monthFormat : '##/YYYY' // Display month number and year on month