Datepicker Github

React Investigation

by Sparrow Squire

CSS

div.ardp-date-picker {
  font-size: 16px;
  font-family: Arial;
  box-sizing: border-box;
}

div.ardp-date-picker * {
  box-sizing: border-box;
}

div.ardp-date-picker div.calendar {
  position: absolute;
  z-index: 10;
  background: white;
  width: 260px;
  padding: 5px;
  color: #244152;
  border-radius: 3px;
  height: 203px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

div.ardp-date-picker div.calendar.calendar-show {
  visibility: visible;
  opacity: 1;
  transition: opacity 100ms linear;
}

div.ardp-date-picker div.calendar.calendar-hide {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 100ms, opacity 100ms linear;
}

div.ardp-date-picker div.calendar div.month-header {
  float: left;
  width: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  align-items: center;
}

div.ardp-date-picker div.calendar div.month-header > i {
  font-weight: bold;
  padding: 5px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-style: normal;
  font-size: 0.7em;
}

div.ardp-date-picker div.calendar div.month-header > i:hover {
  background-color: #026aa7;
  color: white;
}

div.ardp-date-picker div.calendar div.week-header {
  float: left;
  width: 100%;
  margin-top: 8px;
  display: table;
  padding-bottom: 3px;
  border-bottom: solid 1px #CCC;
  margin-bottom: 3px;
}

div.ardp-date-picker div.calendar div.week-header > span {
  float: left;
  width: 14.285714285714286%;
  font-size: 0.6em;
  text-transform: uppercase;
  color: #026aa7;
  font-weight: bold;
  text-align: center;
}

div.ardp-date-picker div.calendar div.weeks {
  float: left;
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 140px;
}

div.ardp-date-picker div.calendar div.weeks > div {
  position: absolute;
  width: 250px;
}

div.ardp-date-picker div.calendar div.weeks > div.current {
  left: 0;
}

div.ardp-date-picker div.calendar div.weeks > div.other {
  left:...

JavaScript

//The MIT License (MIT)
//Copyright (c) 2015 Chris Harrington

"use strict";

(function (global, factory) {
    if (typeof exports === "object" && typeof module !== "undefined")
        module.exports = factory();
    if (typeof define === "function" && define.amd)
        define(factory);
    global.AReactDatepicker = factory();
}(this || window, function () {
    var React = typeof require === "function" ? require("react") : window.React;

    var DateUtilities = {
        pad: function(value, length) {
            while (value.length < length)
                value = "0" + value;
            return value;
        },

        clone: function(date) {
            return new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
        },

        toString: function(date) {
            return date.getFullYear() + "-" + DateUtilities.pad((date.getMonth()+1).toString(), 2) + "-" + DateUtilities.pad(date.getDate().toString(), 2);
        },

        toDayOfMonthString: function(date) {
            return DateUtilities.pad(date.getDate().toString());
        },

        toMonthAndYearString: function(date) {
            var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
            return months[date.getMonth()] + " " + date.getFullYear();
        },

        moveToDayOfWeek: function(date, dayOfWeek) {
            while (date.getDay() !== dayOfWeek)
                date.setDate(date.getDate()-1);
            return date;
        },

        isSameDay: function(first, second) {
            return first.getFullYear() === second.getFullYear() && first.getMonth() === second.getMonth() && first.getDate() === second.getDate();
        },

        isBefore: function(first, second) {
            return first.getTime() < second.getTime();
        },

        isAfter: function(first, second) {
           ...