Simple Calendar and Date Picker Based On jQuery

jquery-calendar is a simple calendar and datepicker to quickly create an input-based calendar and date picker on your web page.

jquery datepicker, jquery datepicker example, how to add date picker in jquery, jquery date range picker, javascript date picker

How to make use of it:

1. Load the jQuery calendar plugin after the jQuery library in the HTML document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/calendar.js"></script>

2. Create an empty element using the CSS class from the jquery calendar.

<div class="jquery-calendar"></div>

3. Create a text field using the CSS class for Date Picker.

<input class="date-picker" type="text" value="2022-17-5">

4. Customize the calendar and date picker styles in CSS.

.picker-container {
  position: absolute;
  z-index: 99;
}

.cal {
  background-color: white;
  display: block;
  width: 216px;
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  border-collapse: collapse;
  border-spacing: 0;
}

.cal a { text-decoration: none; }

.cal tr,
.cal th,
.cal td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

.cal caption {
  line-height: 32px;
  font-weight: bold;
  color: #e2e2e2;
  text-align: center;
  text-shadow: 0 -1px black;
  background: #333;
 //background: rgba(0, 0, 0, 0.35);
  border-top: 1px solid #333;
  border-bottom: 1px solid #313131;
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
}

.cal caption a {
  display: block;
  line-height: 32px;
  padding: 0 10px;
  font-size: 15px;
  color: #e2e2e2;
}

.cal caption a:hover { color: white; }

.cal caption .prev { float: left; }

.cal caption .next { float: right; }

.cal th,
.cal td {
  width: 30px;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.8);
}

.cal th:first-child,
.cal td:first-child { border-left: 0; }

.cal th {
  line-height: 20px;
  font-size: 8px;
  color: #696969;
  text-transform: uppercase;
  background: #f3f3f3;
  border-left: 1px solid #f3f3f3;
}

.cal td {
  font-size: 11px;
  font-weight: bold;
  border-top: 1px solid #c2c2c2;
  border-left: 1px solid #c2c2c2;
}

.cal td a {
  clear: both;
  display: block;
  position: relative;
  width: 30px;
  line-height: 28px;
  color: #666;
  background-image: -webkit-linear-gradient(top, #eaeaea, #e5e5e5 60%, #d9d9d9);
  background-image: -moz-linear-gradient(top, #eaeaea, #e5e5e5 60%, #d9d9d9);
  background-image: -o-linear-gradient(top, #eaeaea, #e5e5e5 60%, #d9d9d9);
  background-image: linear-gradient(to bottom, #eaeaea, #e5e5e5 60%, #d9d9d9);
  -webkit-box-shadow: inset 1px 1px rgba(255, 255, 255, 0.5);
  box-shadow: inset 1px 1px rgba(255, 255, 255, 0.5);
}

.cal td a:hover,
.cal td.off a { background: #f3f3f3; }

.cal td.off a { color: #b3b3b3; }

.cal td.active a,
.cal td a:active {
  margin: -1px;
  color: #f3f3f3;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  background: #6dafbf;
  border: 1px solid #598b94;
  -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
}

.cal td.active:first-child a,
.cal td:first-child a:active {
  border-left: 0;
  margin-left: 0;
}

.cal td.active:last-child a,
.cal td:last-child a:active {
  border-right: 0;
  margin-right: 0;
}

.cal tr:last-child td.active a,
.cal tr:last-child td a:active {
  border-bottom: 0;
  margin-bottom: 0;
}

Simple Clean jQuery Calendar & Date Picker, jquery-calendar Plugin/Github


See Demo And Download

Official Website(oneyoung): Click Here

This superior jQuery/javascript plugin is developed by oneyoung. For extra advanced usage, please go to the official website.

Share