JSFiddle - React, Tailwind, and code Playground
HTML
<div id="ddd"></div>
<div class="button">get date</div>
CSS
/* Default styling for jQuery Datepicker v4.1.0. */
.datepick {
background-color: #fff;
color: #000;
border: 1px solid #444;
border-radius: 0.25em;
-moz-border-radius: 0.25em;
-webkit-border-radius: 0.25em;
font-family: Arial, Helvetica, Sans-serif;
font-size: 90%;
}
.datepick-rtl {
direction: rtl;
}
.datepick-popup {
z-index: 1000;
}
.datepick-disable {
position: absolute;
z-index: 100;
background-color: white;
opacity: 0.5;
filter: alpha(opacity=50);
}
.datepick a {
color: #fff;
text-decoration: none;
}
.datepick a.datepick-disabled {
color: #888;
cursor: auto;
}
.datepick button {
margin: 0.25em;
padding: 0.125em 0em;
background-color: #fcc;
border: none;
border-radius: 0.25em;
-moz-border-radius: 0.25em;
-webkit-border-radius: 0.25em;
font-weight: bold;
}
.datepick-nav, .datepick-ctrl {
float: left;
width: 100%;
background-color: #000;
color: #fff;
font-size: 90%;
font-weight: bold;
}
.datepick-ctrl {
background-color: #600;
}
.datepick-cmd {
width: 30%;
}
.datepick-cmd:hover {
background-color: #777;
}
.datepick-ctrl .datepick-cmd:hover {
background-color: #f08080;
}
.datepick-cmd-prevJump, .datepick-cmd-nextJump {
width: 8%;
}
a.datepick-cmd {
height: 1.5em;
}
button.datepick-cmd {
text-align: center;
}
.datepick-cmd-prev, .datepick-cmd-prevJump, .datepick-cmd-clear {
float: left;
padding-left: 2%;
}
.datepick-cmd-current, .datepick-cmd-today {
float: left;
width: 35%;
text-align: center;
}
.datepick-cmd-next, .datepick-cmd-nextJump, .datepick-cmd-close {
float: right;
padding-right: 2%;
text-align: right;
}
.datepick-rtl .datepick-cmd-prev, .datepick-rtl .datepick-cmd-prevJump, .datepick-rtl .datepick-cmd-clear {
float: right;
padding-left: 0%;
padding-right: 2%;
text-align: right;
}
.datepick-rtl .datepick-cmd-current, .datepick-rtl...
JavaScript
/* http://keith-wood.name/datepick.html
Date picker for jQuery v4.1.0.
Written by Keith Wood (kbwood{at}iinet.com.au) February 2010.
Dual licensed under the GPL (http://dev.jquery.com/browser/trunk/jquery/GPL-LICENSE.txt) and
MIT (http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt) licenses.
Please attribute the author if you use it. */
(function ($) { // Hide scope, no $ conflict
/* Datepicker manager. */
function Datepicker() {
this._defaults = {
pickerClass: '', // CSS class to add to this instance of the datepicker
showOnFocus: true, // True for popup on focus, false for not
showTrigger: null, // Element to be cloned for a trigger, null for none
showAnim: 'show', // Name of jQuery animation for popup, '' for no animation
showOptions: {}, // Options for enhanced animations
showSpeed: 'normal', // Duration of display/closure
popupContainer: null, // The element to which a popup calendar is added, null for body
alignment: 'bottom', // Alignment of popup - with nominated corner of input:
// 'top' or 'bottom' aligns depending on language direction,
// 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'
fixedWeeks: false, // True to always show 6 weeks, false to only show as many as are needed
firstDay: 0, // First day of the week, 0 = Sunday, 1 = Monday, ...
calculateWeek: this.iso8601Week, // Calculate week of the year from a date, null for ISO8601
monthsToShow: 1, // How many months to show, cols or [rows, cols]
monthsOffset: 0, // How many months to offset the primary month by;
// may be a function that takes the date and returns the offset
monthsToStep: 1, // How many months to move when prev/next clicked
monthsToJump: 12, // How many months to move when large prev/next clicked
useMouseWheel:...