<div class="container" ng-app="app" ng-controller="MainCtrl">
<header>
<div class="page-header">
<h2>バインディングに連動したフォームの検証<small>（日付ピッカー）</small></h2>
</div>
</header>
<section>
<form name="form" class="form-horizontal">
<!-- HTML5バージョン -->
<div class="form-group" ng-class="{'has-error':!form.date.$valid}">
<label for="diDate1" class="col-sm-4 control-label">日付（HTML5）</label>
<div class="col-sm-4">
<!-- type="date"に注意。これはHTML5タグ。FFではいまいちなサポートだが動かないことはない。 https://docs.angularjs.org/api/ng/input/input%5Bdate%5D -->
<!-- ng-model="date"の初期値設定はapp.jsで行っている。 -->
<!-- minとmaxでvalidになる期間を指定。値の設定はapp.jsで行っている。 -->
<!-- 「| date:'yyyy-MM-dd'」はdateオブジェクトをyyy-MM-ddのフォーマットで出力するためのフィルタ指定。 https://docs.angularjs.org/api/ng/filter/date -->
<!-- requiredでnullチェックも同時に行っている。 -->
<input id="diDate1" type="date" class="form-control" placeholder="yyyy-MM-dd（今日から１年後まで）" ng-model="date" name="date" required min="{{minDate | date:'yyyy-MM-dd'}}" max="{{maxDate | date:'yyyy-MM-dd'}}" />
</div>
</div>
<!-- datetimepickerバージョン -->
<div class="form-group" ng-class="{'has-error':!form.date.$valid}">
<label for="diDate2" class="col-sm-4 control-label">日付（datetimepicker）</label>
<div class="col-sm-4">
<!-- bootstrapのdropdownコンポーネントを使用 http://getbootstrap.com/components/#dropdowns -->
<div class="dropdown">
<!-- dropdownを表示するリンク（日付入力およびアイコン） --> <a class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#" href="#">
<div class="input-group">
<input id="diDate2" type="date" class="form-control" placeholder="yyyy-MM-dd（今日から１年後まで）"
ng-model="date" name="date" required
min="{{minDate | date:'yyyy-MM-dd'}}" max="{{maxDate | date:'yyyy-MM-dd'}}"
/>
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</a>
<!-- dropdowそのもの -->
<ul class="dropdown-menu" role="menu">
<!-- data-*はカスタムタグに与える引数 -->
<!-- minView:dayで日付選択までにしている。これを外せば時：分まで選択可能。 -->
<!-- 日付選択時にonTimeSet()を呼ぶ -->
<!-- dropdownSelectorでdatePickerDropdownと関連付け -->
<datetimepicker data-ng-model="date" data-datetimepicker-config="{'minView':'day'}" data-on-set-time="onTimeSet" />
</ul>
</div>
<!-- dropdow -->
</div>
<!-- col -->
</div>
<!-- form-group -->
<!-- 送信ボタン -->
<div class="form-group">
<div class="col-sm-offset-4 col-sm-2">
<button class="btn btn-primary btn-block" ng-disabled="!form.date.$valid">送信</button>
</div>
</div>
</form>
</section>
</div>
// appというAngularJSアプリケーションモジュールを作成
// datetimepickerモジュールを組み込み
var app = angular.module('app', ['ui.bootstrap.datetimepicker']);
// アプリケーションモジュールにMainCtrlというコントローラーを追加
app.controller('MainCtrl', function ($scope) {
//初期選択の日付を今日の日付に設定
$scope.date = new Date();
//期間の最小を今日の日付に設定
$scope.minDate = new Date();
//期間の最大を今日の日付から１年後に設定
var maxDate = new Date();
maxDate.setFullYear(maxDate.getFullYear() + 1);
$scope.maxDate = maxDate;
//日付ピッカー選択時に呼ばれる
$scope.onTimeSet = function (newDate, oldDate) {
console.log(newDate);
console.log(oldDate);
}
//カレンダーの表示を日本語にする
moment.lang('ja');
});
/**
* @license angular-bootstrap-datetimepicker v0.2.2
* (c) 2013 Knight Rider Consulting, Inc. http://www.knightrider.com
* License: MIT
* @author Dale "Ducky" Lotts
* @since 2013-Jul-8
*/
angular.module('ui.bootstrap.datetimepicker', []).constant('dateTimePickerConfig', {
dropdownSelector: null,
minuteStep: 5,
minView: 'minute',
startView: 'day',
weekStart: 0
}).constant('dateTimePickerConfigValidation', function (configuration) {
"use strict";
var validOptions = ['startView', 'minView', 'minuteStep', 'dropdownSelector', 'weekStart'];
for (var prop in configuration) {
if (configuration.hasOwnProperty(prop)) {
if (validOptions.indexOf(prop) < 0) {
throw ("invalid option: " + prop);
}
}
}
var validViews = ['minute', 'hour', 'day', 'month', 'year'];
if (validViews.indexOf(configuration.startView) < 0) {
throw ("invalid startView value: " + configuration.startView);
}
if (validViews.indexOf(configuration.minView) < 0) {
throw ("invalid minView value: " + configuration.minView);
}
if (validViews.indexOf(configuration.minView) > validViews.indexOf(configuration.startView)) {
throw ("startView must be greater than minView");
}
if (!angular.isNumber(configuration.minuteStep)) {
throw ("minuteStep must be numeric");
}
if (configuration.minuteStep <= 0 || configuration.minuteStep >= 60) {
throw ("minuteStep must be greater than zero and less than 60");
}
if (configuration.dropdownSelector !== null && !angular.isString(configuration.dropdownSelector)) {
throw ("dropdownSelector must be a string");
}
if (!angular.isNumber(configuration.weekStart)) {
throw ("weekStart must be numeric");
}
if (configuration.weekStart < 0 || configuration.weekStart > 6) {
throw ("weekStart must be greater than or equal to zero and less than 7");
}
}).directive('datetimepicker', ['dateTimePickerConfig', 'dateTimePickerConfigValidation', function (defaultConfig, validateConfigurationFunction) {
"use strict";
return {
restrict: 'E',
require: 'ngModel',
template: "<div class='datetimepicker'>" + "<table class='table-condensed'>" + " <thead>" + " <tr>" + " <th class='left'" + " data-ng-click=\"changeView(data.currentView, data.leftDate, $event)\"" + " ><i class='glyphicon glyphicon-arrow-left'/></th>" + " <th class='switch' colspan='5'" + " data-ng-click=\"changeView(data.previousView, data.currentDate, $event)\"" + ">{{ data.title }}</th>" + " <th class='right'" + " data-ng-click=\"changeView(data.currentView, data.rightDate, $event)\"" + " ><i class='glyphicon glyphicon-arrow-right'/></th>" + " </tr>" + " <tr>" + " <th class='dow' data-ng-repeat='day in data.dayNames' >{{ day }}</th>" + " </tr>" + " </thead>" + " <tbody>" + ' <tr data-ng-class=\'{ hide: data.currentView == "day" }\' >' + " <td colspan='7' >" + " <span class='{{ data.currentView }}' " + " data-ng-repeat='dateValue in data.dates' " + " data-ng-class='{active: dateValue.active, past: dateValue.past, future: dateValue.future}' " + " data-ng-click=\"changeView(data.nextView, dateValue.date, $event)\">{{ dateValue.display }}</span> " + " </td>" + " </tr>" + ' <tr data-ng-show=\'data.currentView == "day"\' data-ng-repeat=\'week in data.weeks\'>' + " <td data-ng-repeat='dateValue in week.dates' " + " data-ng-click=\"changeView(data.nextView, dateValue.date, $event)\"" + " class='day' " + " data-ng-class='{active: dateValue.active, past: dateValue.past, future: dateValue.future}' >{{ dateValue.display }}</td>" + " </tr>" + " </tbody>" + "</table></div>",
scope: {
ngModel: "=",
onSetTime: "="
},
replace: true,
link: function (scope, element, attrs) {
var directiveConfig = {};
if (attrs.datetimepickerConfig) {
directiveConfig = scope.$eval(attrs.datetimepickerConfig);
}
var configuration = {};
angular.extend(configuration, defaultConfig, directiveConfig);
validateConfigurationFunction(configuration);
var dataFactory = {
year: function (unixDate) {
var selectedDate = moment.utc(unixDate).startOf('year');
var startDecade = (parseInt(selectedDate.year() / 10, 10) * 10);
var startDate = moment.utc(selectedDate).year(startDecade - 1).startOf('year');
var activeYear = scope.ngModel ? moment(scope.ngModel).year() : 0;
var result = {
'currentView': 'year',
'nextView': configuration.minView === 'year' ? 'setTime' : 'month',
'title': startDecade + '-' + (startDecade + 9),
'leftDate': moment.utc(startDate).subtract(9, 'year').valueOf(),
'rightDate': moment.utc(startDate).add(11, 'year').valueOf(),
'dates': []
};
for (var i = 0; i < 12; i++) {
var yearMoment = moment.utc(startDate).add(i, 'years');
var dateValue = {
'date': yearMoment.valueOf(),
'display': yearMoment.format('YYYY'),
'past': yearMoment.year() < startDecade,
'future': yearMoment.year() > startDecade + 9,
'active': yearMoment.year() === activeYear
};
result.dates.push(dateValue);
}
return result;
},
month: function (unixDate) {
var startDate = moment.utc(unixDate).startOf('year');
var activeDate = scope.ngModel ? moment(scope.ngModel).format('YYYY-MMM') : 0;
var result = {
'previousView': 'year',
'currentView': 'month',
'nextView': configuration.minView === 'month' ? 'setTime' : 'day',
'currentDate': startDate.valueOf(),
'title': startDate.format('YYYY'),
'leftDate': moment.utc(startDate).subtract(1, 'year').valueOf(),
'rightDate': moment.utc(startDate).add(1, 'year').valueOf(),
'dates': []
};
for (var i = 0; i < 12; i++) {
var monthMoment = moment.utc(startDate).add(i, 'months');
var dateValue = {
'date': monthMoment.valueOf(),
'display': monthMoment.format('MMM'),
'active': monthMoment.format('YYYY-MMM') === activeDate
};
result.dates.push(dateValue);
}
return result;
},
day: function (unixDate) {
var selectedDate = moment.utc(unixDate);
var startOfMonth = moment.utc(selectedDate).startOf('month');
var endOfMonth = moment.utc(selectedDate).endOf('month');
var startDate = moment.utc(startOfMonth).subtract(startOfMonth.weekday() - configuration.weekStart, 'days');
var activeDate = scope.ngModel ? moment(scope.ngModel).format('YYYY-MMM-DD') : '';
var result = {
'previousView': 'month',
'currentView': 'day',
'nextView': configuration.minView === 'day' ? 'setTime' : 'hour',
'currentDate': selectedDate.valueOf(),
'title': selectedDate.format('YYYY-MMM'),
'leftDate': moment.utc(startOfMonth).subtract(1, 'months').valueOf(),
'rightDate': moment.utc(startOfMonth).add(1, 'months').valueOf(),
'dayNames': [],
'weeks': []
};
for (var dayNumber = configuration.weekStart; dayNumber < configuration.weekStart + 7; dayNumber++) {
result.dayNames.push(moment.utc().weekday(dayNumber).format('dd'));
}
for (var i = 0; i < 6; i++) {
var week = {
dates: []
};
for (var j = 0; j < 7; j++) {
var monthMoment = moment.utc(startDate).add((i * 7) + j, 'days');
var dateValue = {
'date': monthMoment.valueOf(),
'display': monthMoment.format('D'),
'active': monthMoment.format('YYYY-MMM-DD') === activeDate,
'past': monthMoment.isBefore(startOfMonth),
'future': monthMoment.isAfter(endOfMonth)
};
week.dates.push(dateValue);
}
result.weeks.push(week);
}
return result;
},
hour: function (unixDate) {
var selectedDate = moment.utc(unixDate).hour(0).minute(0).second(0);
var activeFormat = scope.ngModel ? moment(scope.ngModel).format('YYYY-MM-DD H') : '';
var result = {
'previousView': 'day',
'currentView': 'hour',
'nextView': configuration.minView === 'hour' ? 'setTime' : 'minute',
'currentDate': selectedDate.valueOf(),
'title': selectedDate.format('YYYY-MMM-DD'),
'leftDate': moment.utc(selectedDate).subtract(1, 'days').valueOf(),
'rightDate': moment.utc(selectedDate).add(1, 'days').valueOf(),
'dates': []
};
for (var i = 0; i < 24; i++) {
var hourMoment = moment.utc(selectedDate).add(i, 'hours');
var dateValue = {
'date': hourMoment.valueOf(),
'display': hourMoment.format('H:00'),
'active': hourMoment.format('YYYY-MM-DD H') === activeFormat
};
result.dates.push(dateValue);
}
return result;
},
minute: function (unixDate) {
var selectedDate = moment.utc(unixDate).minute(0).second(0);
var activeFormat = scope.ngModel ? moment(scope.ngModel).format('YYYY-MM-DD H:mm') : '';
var result = {
'previousView': 'hour',
'currentView': 'minute',
'nextView': 'setTime',
'currentDate': selectedDate.valueOf(),
'title': selectedDate.format('YYYY-MMM-DD H:mm'),
'leftDate': moment.utc(selectedDate).subtract(1, 'hours').valueOf(),
'rightDate': moment.utc(selectedDate).add(1, 'hours').valueOf(),
'dates': []
};
var limit = 60 / configuration.minuteStep;
for (var i = 0; i < limit; i++) {
var hourMoment = moment.utc(selectedDate).add(i * configuration.minuteStep, 'minute');
var dateValue = {
'date': hourMoment.valueOf(),
'display': hourMoment.format('H:mm'),
'active': hourMoment.format('YYYY-MM-DD H:mm') === activeFormat
};
result.dates.push(dateValue);
}
return result;
},
setTime: function (unixDate) {
var tempDate = new Date(unixDate);
var newDate = new Date(tempDate.getTime() + (tempDate.getTimezoneOffset() * 60000));
if (configuration.dropdownSelector) {
jQuery(configuration.dropdownSelector).dropdown('toggle');
}
if (angular.isFunction(scope.onSetTime)) {
scope.onSetTime(newDate, scope.ngModel);
}
scope.ngModel = newDate;
return dataFactory[scope.data.currentView](unixDate);
}
};
var getUTCTime = function () {
var tempDate = (scope.ngModel ? moment(scope.ngModel).toDate() : new Date());
return tempDate.getTime() - (tempDate.getTimezoneOffset() * 60000);
};
scope.changeView = function (viewName, unixDate, event) {
if (event) {
event.stopPropagation();
event.preventDefault();
}
if (viewName && (unixDate > -Infinity) && dataFactory[viewName]) {
scope.data = dataFactory[viewName](unixDate);
}
};
scope.changeView(configuration.startView, getUTCTime());
scope.$watch('ngModel', function () {
scope.changeView(scope.data.currentView, getUTCTime());
});
}
};
}]);
/**
* @license angular-bootstrap-datetimepicker v0.2.2
* (c) 2013 Knight Rider Consulting, Inc. http://www.knightrider.com
* License: MIT
*/
.datetimepicker {
padding:4px;
margin-top:1px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
direction:ltr
}
.datetimepicker-inline {
width:220px
}
.datetimepicker.datetimepicker-rtl {
direction:rtl
}
.datetimepicker.datetimepicker-rtl table tr td span {
float:right
}
.datetimepicker-dropdown, .datetimepicker-dropdown-left {
top:0;
left:0
}
[class*=" datetimepicker-dropdown"]:before {
content:'';
display:inline-block;
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #ccc;
border-bottom-color:rgba(0, 0, 0, 0.2);
position:absolute
}
[class*=" datetimepicker-dropdown"]:after {
content:'';
display:inline-block;
border-left:6px solid transparent;
border-right:6px solid transparent;
border-bottom:6px solid #fff;
position:absolute
}
[class*=" datetimepicker-dropdown-top"]:before {
content:'';
display:inline-block;
border-left:7px solid transparent;
border-right:7px solid transparent;
border-top:7px solid #ccc;
border-top-color:rgba(0, 0, 0, 0.2);
border-bottom:0
}
[class*=" datetimepicker-dropdown-top"]:after {
content:'';
display:inline-block;
border-left:6px solid transparent;
border-right:6px solid transparent;
border-top:6px solid #fff;
border-bottom:0
}
.datetimepicker-dropdown-bottom-left:before {
top:-7px;
right:6px
}
.datetimepicker-dropdown-bottom-left:after {
top:-6px;
right:7px
}
.datetimepicker-dropdown-bottom-right:before {
top:-7px;
left:6px
}
.datetimepicker-dropdown-bottom-right:after {
top:-6px;
left:7px
}
.datetimepicker-dropdown-top-left:before {
bottom:-7px;
right:6px
}
.datetimepicker-dropdown-top-left:after {
bottom:-6px;
right:7px
}
.datetimepicker-dropdown-top-right:before {
bottom:-7px;
left:6px
}
.datetimepicker-dropdown-top-right:after {
bottom:-6px;
left:7px
}
.datetimepicker>div {
display:none
}
.datetimepicker.minutes div.datetimepicker-minutes {
display:block
}
.datetimepicker.hours div.datetimepicker-hours {
display:block
}
.datetimepicker.days div.datetimepicker-days {
display:block
}
.datetimepicker.months div.datetimepicker-months {
display:block
}
.datetimepicker.years div.datetimepicker-years {
display:block
}
.datetimepicker table {
margin:0
}
.datetimepicker td, .datetimepicker th {
text-align:center;
width:20px;
height:20px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
border:none
}
.table-striped .datetimepicker table tr td, .table-striped .datetimepicker table tr th {
background-color:transparent
}
.datetimepicker table tr td.minute:hover {
background:#eee;
cursor:pointer
}
.datetimepicker table tr td.hour:hover {
background:#eee;
cursor:pointer
}
.datetimepicker table tr td.day:hover {
background:#eee;
cursor:pointer
}
.datetimepicker table tr td.past, .datetimepicker table tr td.future {
color:#999
}
.datetimepicker table tr td.disabled, .datetimepicker table tr td.disabled:hover {
background:none;
color:#999;
cursor:default
}
.datetimepicker table tr td.today, .datetimepicker table tr td.today:hover, .datetimepicker table tr td.today.disabled, .datetimepicker table tr td.today.disabled:hover {
background-color:#fde19a;
background-image:-moz-linear-gradient(top, #fdd49a, #fdf59a);
background-image:-ms-linear-gradient(top, #fdd49a, #fdf59a);
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
background-image:-webkit-linear-gradient(top, #fdd49a, #fdf59a);
background-image:-o-linear-gradient(top, #fdd49a, #fdf59a);
background-image:linear-gradient(top, #fdd49a, #fdf59a);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
border-color:#fdf59a #fdf59a #fbed50;
border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)
}
.datetimepicker table tr td.today:hover, .datetimepicker table tr td.today:hover:hover, .datetimepicker table tr td.today.disabled:hover, .datetimepicker table tr td.today.disabled:hover:hover, .datetimepicker table tr td.today:active, .datetimepicker table tr td.today:hover:active, .datetimepicker table tr td.today.disabled:active, .datetimepicker table tr td.today.disabled:hover:active, .datetimepicker table tr td.today.active, .datetimepicker table tr td.today:hover.active, .datetimepicker table tr td.today.disabled.active, .datetimepicker table tr td.today.disabled:hover.active, .datetimepicker table tr td.today.disabled, .datetimepicker table tr td.today:hover.disabled, .datetimepicker table tr td.today.disabled.disabled, .datetimepicker table tr td.today.disabled:hover.disabled, .datetimepicker table tr td.today[disabled], .datetimepicker table tr td.today:hover[disabled], .datetimepicker table tr td.today.disabled[disabled], .datetimepicker table tr td.today.disabled:hover[disabled] {
background-color:#fdf59a
}
.datetimepicker table tr td.today:active, .datetimepicker table tr td.today:hover:active, .datetimepicker table tr td.today.disabled:active, .datetimepicker table tr td.today.disabled:hover:active, .datetimepicker table tr td.today.active, .datetimepicker table tr td.today:hover.active, .datetimepicker table tr td.today.disabled.active, .datetimepicker table tr td.today.disabled:hover.active {
background-color:#fbf069 \9
}
.datetimepicker table tr td.active, .datetimepicker table tr td.active:hover, .datetimepicker table tr td.active.disabled, .datetimepicker table tr td.active.disabled:hover {
background-color:#006dcc;
background-image:-moz-linear-gradient(top, #08c, #04c);
background-image:-ms-linear-gradient(top, #08c, #04c);
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#04c));
background-image:-webkit-linear-gradient(top, #08c, #04c);
background-image:-o-linear-gradient(top, #08c, #04c);
background-image:linear-gradient(top, #08c, #04c);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
border-color:#04c #0044cc #002a80;
border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);
color:#fff;
text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25)
}
.datetimepicker table tr td.active:hover, .datetimepicker table tr td.active:hover:hover, .datetimepicker table tr td.active.disabled:hover, .datetimepicker table tr td.active.disabled:hover:hover, .datetimepicker table tr td.active:active, .datetimepicker table tr td.active:hover:active, .datetimepicker table tr td.active.disabled:active, .datetimepicker table tr td.active.disabled:hover:active, .datetimepicker table tr td.active.active, .datetimepicker table tr td.active:hover.active, .datetimepicker table tr td.active.disabled.active, .datetimepicker table tr td.active.disabled:hover.active, .datetimepicker table tr td.active.disabled, .datetimepicker table tr td.active:hover.disabled, .datetimepicker table tr td.active.disabled.disabled, .datetimepicker table tr td.active.disabled:hover.disabled, .datetimepicker table tr td.active[disabled], .datetimepicker table tr td.active:hover[disabled], .datetimepicker table tr td.active.disabled[disabled], .datetimepicker table tr td.active.disabled:hover[disabled] {
background-color:#04c
}
.datetimepicker table tr td.active:active, .datetimepicker table tr td.active:hover:active, .datetimepicker table tr td.active.disabled:active, .datetimepicker table tr td.active.disabled:hover:active, .datetimepicker table tr td.active.active, .datetimepicker table tr td.active:hover.active, .datetimepicker table tr td.active.disabled.active, .datetimepicker table tr td.active.disabled:hover.active {
background-color:#039 \9
}
.datetimepicker table tr td span {
display:block;
width:23%;
height:54px;
line-height:54px;
float:left;
margin:1%;
cursor:pointer;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px
}
.datetimepicker span.hour {
height:26px;
line-height:26px
}
.datetimepicker .datetimepicker-hours table tr td span.hour_am, .datetimepicker .datetimepicker-hours table tr td span.hour_pm {
width:14.6%
}
.datetimepicker .datetimepicker-hours fieldset legend, .datetimepicker .datetimepicker-minutes fieldset legend {
margin-bottom:inherit;
line-height:30px
}
.datetimepicker span.minute {
height:26px;
line-height:26px
}
.datetimepicker table tr td span:hover {
background:#eee
}
.datetimepicker table tr td span.disabled, .datetimepicker table tr td span.disabled:hover {
background:none;
color:#999;
cursor:default
}
.datetimepicker table tr td span.active, .datetimepicker table tr td span.active:hover, .datetimepicker table tr td span.active.disabled, .datetimepicker table tr td span.active.disabled:hover {
background-color:#006dcc;
background-image:-moz-linear-gradient(top, #08c, #04c);
background-image:-ms-linear-gradient(top, #08c, #04c);
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#04c));
background-image:-webkit-linear-gradient(top, #08c, #04c);
background-image:-o-linear-gradient(top, #08c, #04c);
background-image:linear-gradient(top, #08c, #04c);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
border-color:#04c #0044cc #002a80;
border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);
color:#fff;
text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25)
}
.datetimepicker table tr td span.active:hover, .datetimepicker table tr td span.active:hover:hover, .datetimepicker table tr td span.active.disabled:hover, .datetimepicker table tr td span.active.disabled:hover:hover, .datetimepicker table tr td span.active:active, .datetimepicker table tr td span.active:hover:active, .datetimepicker table tr td span.active.disabled:active, .datetimepicker table tr td span.active.disabled:hover:active, .datetimepicker table tr td span.active.active, .datetimepicker table tr td span.active:hover.active, .datetimepicker table tr td span.active.disabled.active, .datetimepicker table tr td span.active.disabled:hover.active, .datetimepicker table tr td span.active.disabled, .datetimepicker table tr td span.active:hover.disabled, .datetimepicker table tr td span.active.disabled.disabled, .datetimepicker table tr td span.active.disabled:hover.disabled, .datetimepicker table tr td span.active[disabled], .datetimepicker table tr td span.active:hover[disabled], .datetimepicker table tr td span.active.disabled[disabled], .datetimepicker table tr td span.active.disabled:hover[disabled] {
background-color:#04c
}
.datetimepicker table tr td span.active:active, .datetimepicker table tr td span.active:hover:active, .datetimepicker table tr td span.active.disabled:active, .datetimepicker table tr td span.active.disabled:hover:active, .datetimepicker table tr td span.active.active, .datetimepicker table tr td span.active:hover.active, .datetimepicker table tr td span.active.disabled.active, .datetimepicker table tr td span.active.disabled:hover.active {
background-color:#039 \9
}
.datetimepicker table tr td span.past, .datetimepicker table tr td span.future {
color:#999
}
.datetimepicker th.switch {
width:145px
}
.datetimepicker thead tr:first-child th, .datetimepicker tfoot tr:first-child th {
cursor:pointer
}
.datetimepicker thead tr:first-child th:hover, .datetimepicker tfoot tr:first-child th:hover {
background:#eee
}
.input-append.date .add-on i, .input-prepend.date .add-on i {
cursor:pointer;
width:14px;
height:14px
}
External resources loaded into this fiddle: