Introduced simple datepicker
diff --git a/dev/scss/header/datepicker.scss b/dev/scss/header/datepicker.scss
new file mode 100644
index 0000000..bf8f43a
--- /dev/null
+++ b/dev/scss/header/datepicker.scss
@@ -0,0 +1,73 @@
+@charset "utf-8";
+@import "../util";
+
+div.datepicker {
+ display: inline-block;
+ padding: 4pt;
+ box-shadow: $choose-box-shadow;
+ border: {
+ width: 2px;
+ style: solid;
+ radius: $standard-border-radius;
+ }
+ > div {
+ font-size: 120%;
+ width: 45%;
+ }
+ > div.year {
+ float: right;
+ }
+
+ @include choose-item;
+ > div > span {
+ display: inline-block;
+ &:first-child::before {
+ cursor: pointer;
+ font-family: 'FontAwesome';
+ content: $fa-previous;
+ width: 10%;
+ }
+ &:last-child::after {
+ cursor: pointer;
+ font-family: 'FontAwesome';
+ content: $fa-next;
+ width: 10%;
+ }
+ &:nth-child(2) {
+ display: inline-block;
+ width: 80%;
+ text-align: center;
+ }
+ }
+ table {
+ border-collapse: separate;
+ border-spacing: 1px;
+ }
+ td {
+ @include standard-text-padding;
+ text-align: center;
+ border: {
+ style: solid;
+ width: 1px;
+ }
+ &:not(.out) {
+ cursor: pointer;
+ @include choose-item;
+ background-color: $nearly-white;
+ &.today {
+ background-color: $light-blue;
+ color: $dark-blue;
+ text-shadow: none;
+ }
+ &.selected {
+ @include choose-active;
+ }
+ &:hover {
+ @include choose-hover;
+ }
+ }
+ &.out {
+ border-color: transparent;
+ }
+ }
+}
\ No newline at end of file
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index 60a3bf4..e63283a 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -4,6 +4,7 @@
@import "menu"; // Menu list
@import "searchbar"; // The search bar
@import "vc"; // Virtual collection builder
+@import "datepicker"; // Datepicker
header {
position: relative;