JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://s2.bonsite.co/calendar/ion.calendar.js"></script>
<script src="http://s2.bonsite.co/calendar/moment.min.js"></script>
<script src="http://s2.bonsite.co/calendar/moment.ru.js"></script>
<input type="text" value="" class="date" data-lang="ru" data-years="50" data-format="DD.MM.YYYY" data-sundayfirst="false">
CSS
/* Ion.Calendar
// Version 2.0.1, build: 91
// © 2013 Denis Ineshin | IonDen.com
//
// Project page: http://ionden.com/a/plugins/ion.calendar/
// GitHub page: https://github.com/IonDen/ion.calendar
//
// Released under MIT licence:
// http://ionden.com/a/plugins/licence-en.html
// ===================================================================================================================*/
/* ic = ion.calendar prefix */
.ic__container,
.ic__week-head,
.ic__week-head td,
.ic__days,
.ic__days td,
.ic__header,
.ic__prev,
.ic__next,
.ic__datepicker {
margin: 0; padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px; line-height: 13px;
cursor: default;
text-shadow: none !important;
}
.ic__container {
position: relative;
background: #fff;
}
.ic__container table {
width: 100%;
border: 0;
border-collapse: collapse !important;
border-spacing: 0 !important;
}
.ic__header {
position: relative;
background: #555;
height: 35px;
}
.ic__prev, .ic__next {
position: absolute;
top: 0;
width: 7%; height: 35px;
background-color: #555;
cursor: pointer;
}
.ic__prev:hover, .ic__next:hover {
background-color: #666;
}
.ic__prev div, .ic__next div {
position: absolute;
width: 0; height: 0;
overflow: hidden;
border: 5px solid transparent;
}
.ic__prev {
left: 0;
}
.ic__prev div {
top: 13px; left: 50%;
margin-left: -7px;
border-right-color: #fff;
}
.ic__next {
right: 0;
}
.ic__next div {
top: 13px; right: 50%;
margin-right: -7px;
border-left-color: #fff;
}
.ic__month {
position: absolute;
top: 6px; left: 9%;
width: 50%;
}
.ic__year {
position: absolute;
top: 6px;...
JavaScript
$(".date").each(function(){
$(this).ionDatePicker();
});