Alternative datepicker interface

dabblet.css

/**
 * Alternative datepicker interface
 */

body {
	background: #f06;
	background: linear-gradient(135deg, #f00, orange);
	min-height: 100%;
}

.date {
	overflow: hidden;
	position: absolute;
	font: 18px/24px Segoe UI, sans-serif;
	left: 0;
	right: 0;
	top: 100px;
}

.selector {
	background: #fff;
	box-shadow: inset 0 0 10px rgba(0,0,0,.4);
	width: 100%;
	margin: 0 -10px;
	padding: 10px 20px;
}

.date datetime {
	color: #999;
	font-size: 30px;
	line-height: 35px;
}

.datepart ol {
	list-style: none;
	padding: 5px 0;
	margin: 0;
	white-space: nowrap;
	width: 100%;
	text-align: center;
}

.datepart {
	margin: 0 -10px;
	position: relative;
	width: 100%;
}

.datepart:before, .datepart:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50px;
}

.datepart:before {
	background: linear-gradient(90deg, white 10px, transparent 100%);
	left: 0;
}

.datepart:after {
	background: linear-gradient(270deg, white 10px, transparent);
	right: 0;
}

.date li {
	cursor: pointer;
	display: inline-block;
	padding: 10px;
	margin: 0;
	vertical-align: middle;
}

.date li:hover {
	background: rgba(255,0,0,.2);
}

.date li.selected {
	background: #c00;
	color: white;
	font-weight: bold;
}

ol.year {
	left: -150px;
}

ol li span {
	display: block;
	font-size: 13px;
}

.weekend {
	background: #eee
}

dabblet.html

<div class="date">
	<div class="selector">
		<datetime>
			<span class="day">8</span>
			<span class="month">April</span>
			<span class="year">1997</span>
		</datetime>
		<div class="datepart">
			<ol class="year">
				<li>1980</li>
				<li>1981</li>
				<li>1982</li>	
				<li>1983</li>
				<li>1984</li>
				<li>1985</li>
				<li>1986</li>	
				<li>1987</li>
				<li>1988</li>
				<li>1989</li>
				<li>1990</li>	
				<li>1991</li>
				<li>1992</li>
				<li>1993</li>
				<li>1994</li>	
				<li>1995</li>
				<li>1996</li>	
				<li class="selected">1997</li>
				<li>1998</li>
				<li>1999</li>
				<li>2000</li>
			</ol>
		</div>
		<div class="datepart">
			<ol class="month">
				<li>January</li>
				<li>February</li>
				<li>March</li>	
				<li class="selected">April</li>
				<li>May</li>
				<li>June</li>
				<li>July</li>	
				<li>August</li>
				<li>September</li>
				<li>October</li>
				<li>November</li>	
				<li>December</li>
			</ol>
		</div>
		<div class="datepart">
			<ol class="day">
				<li>1 <span>Wed</span></li>
				<li>2 <span>Thu</span></li>
				<li>3 <span>Fri</span></li>	
				<li class="weekend">4 <span>Sat</span></li>
				<li class="weekend">5 <span>Sun</span></li>
				<li>6 <span>Mon</span></li>
				<li>7 <span>Tue</span></li>	
				<li class="selected">8 <span>Wed</span></li>
				<li>9 <span>Thu</span></li>
				<li>10 <span>Fri</span></li>
				<li class="weekend">11 <span>Sat</span></li>
				<li class="weekend">12 <span>Sun</span></li>
				<li>13 <span>Mon</span></li>	
				<li>14 <span>Tue</span></li>
				<li>15 <span>Wed</span></li>
				<li>16 <span>Thu</span></li>
				<li>17 <span>Fri</span></li>	
				<li class="weekend">18 <span>Sat</span></li>
				<li class="weekend">19 <span>Sun</span></li>
				<li>20 <span>Mon</span></li>
				<li>21 <span>Tue</span></li>
				<li>22 <span>Wed</span></li>
				<li>23 <span>Thu</span></li>	
				<li>24 <span>Fri</span></li>
				<li class="weekend">25 <span>Sat</span></li>
				<li class="weekend">26 <span>Sun</span></li>
				<li>27 <span>Mon</span></li>	
				<li>28 <span>Tue</span></li>
				<li>29 <span>Wed</span></li>
				<li>30 <span>Thu</span></li>
			</ol>
		</div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}