当用户从时钟中选择时间时，我希望从材料设计中获得此代码，在文本框中显示时间值，日历也是如此 有代码，所以我想将选定的日期和时间显示在特定的文本框中：用户选择时间和日期以及要在文本框中显示的值
<!DOCTYPE html>
<html lang="en" >
<head>
<title>Material Design Date/Time picker</title>
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<style>
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(5):before {
content: " ";
position: absolute;
left: 2rem;
top: 2rem;
height: 75px;
width: 2px;
z-index: -1;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-o-transform-origin: center top;
-ms-transform-origin: center top;
transform-origin: center top;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-o-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(6) {
left: 112.5px;
top: 139.95190530000002px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(6):before {
content: " ";
position: absolute;
left: 2rem;
top: 2rem;
height: 75px;
width: 2px;
z-index: -1;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-o-transform-origin: center top;
-ms-transform-origin: center top;
transform-origin: center top;
-webkit-transform: rotate(150deg);
-moz-transform: rotate(150deg);
-o-transform: rotate(150deg);
-ms-transform: rotate(150deg);
transform: rotate(150deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(7) {
left: 75px;
top: 150px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(7):before {
content: " ";
position: absolute;
left: 2rem;
top: 2rem;
height: 75px;
width: 2px;
z-index: -1;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-o-transform-origin: center top;
-ms-transform-origin: center top;
transform-origin: center top;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(8) {
left: 37.5px;
top: 139.95190530000002px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(8):before {
content: " ";
position: absolute;
left: 2rem;
top: 2rem;
height: 75px;
width: 2px;
z-index: -1;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-o-transform-origin: center top;
-ms-transform-origin: center top;
transform-origin: center top;
-webkit-transform: rotate(210deg);
-moz-transform: rotate(210deg);
-o-transform: rotate(210deg);
-ms-transform: rotate(210deg);
transform: rotate(210deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(9) {
left: 10.048094699999993px;
top: 112.5px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(9):before {
content: " ";
position: absolute;
left: 2rem;
top: 2rem;
height: 75px;
width: 2px;
z-index: -1;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-o-transform-origin: center top;
-ms-transform-origin: center top;
transform-origin: center top;
-webkit-transform: rotate(240deg);
-moz-transform: rotate(240deg);
-o-transform: rotate(240deg);
-ms-transform: rotate(240deg);
transform: rotate(240deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(10) {
left: 0px;
top: 75px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(10):before {
content: " ";
position: absolute;
left: 2rem;
top: 2rem;
height: 75px;
width: 2px;
z-index: -1;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-o-transform-origin: center top;
-ms-transform-origin: center top;
transform-origin: center top;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(11) {
left: 10.048094699999993px;
top: 37.5px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(11):before {
content: " ";
position: absolute;
left: 2rem;
top: 2rem;
height: 75px;
width: 2px;
z-index: -1;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-o-transform-origin: center top;
-ms-transform-origin: center top;
transform-origin: center top;
-webkit-transform: rotate(300deg);
-moz-transform: rotate(300deg);
-o-transform: rotate(300deg);
-ms-transform: rotate(300deg);
transform: rotate(300deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(12) {
left: 37.5px;
top: 10.048094699999993px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(12):before {
content: " ";
position: absolute;
left: 2rem;
top: 2rem;
height: 75px;
width: 2px;
z-index: -1;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-o-transform-origin: center top;
-ms-transform-origin: center top;
transform-origin: center top;
-webkit-transform: rotate(330deg);
-moz-transform: rotate(330deg);
-o-transform: rotate(330deg);
-ms-transform: rotate(330deg);
transform: rotate(330deg);
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(13) {
left: 75px;
top: 0px;
}
.time-date > .control > .slider > .time-control > .clock > .clock-face > .hand:nth-child(13):before {
content: " ";
position: absolute;
left: 2rem;
top: 2rem;
height: 75px;
width: 2px;
z-index: -1;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-o-transform-origin: center top;
-ms-transform-origin: center top;
transform-origin: center top;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.time-date.date-mode > .control > .slider {
left: 0%;
}
.time-date.time-mode > .display > .content {
padding-top: 5.4rem;
}
.time-date.time-mode > .control > .slider {
left: -100%;
}
.time-date.date-only > .control > .slider > .switch-control,
.time-date.date-only > .control > .slider > .time-control {
display: none;
}
.time-date.date-only > .control > .slider > .date-control {
width: 50%;
padding-left: 1.4rem;
}
.time-date.time-only > .display > .content {
top: 0px;
padding-top: 8.2rem;
}
.time-date.time-only > .control > .slider > .switch-control,
.time-date.time-only > .control > .slider > .date-control {
display: none;
}
.time-date.time-only > .control > .slider > .time-control {
width: 50%;
}
.time-date > .display,
.time-date > .control {
height: 27.3rem;
float: left;
text-align: center;
}
.time-date > .buttons {
clear: both;
padding: 1rem;
text-align: right;
}
.time-date button,
.time-date .button {
color: #009688 !important;
font-weight: bold;
}
.time-date button:hover,
.time-date .button:hover,
.time-date button:active,
.time-date .button:active {
color: #e6e6e6 !important;
background-color: #00baa9;
}
.time-date button.active,
.time-date .button.active {
color: #fff !important;
background-color: #009688;
}
</style>
<body>
<div ng-app="testMod" ng-controller="testCtrl">
<div class="modal-dialog">
<div class="modal-content">
<time-date-picker ng-model="date" display-mode="time"></time-date-picker>
</div>
</div>
<div class="modal-dialog">
<div class="modal-content">
<time-date-picker ng-model="date" display-mode="time"></time-date-picker>
</div>
</div>
<p>Date Only: {{date | date:'yyyy/MM/dd HH:mm a'}}</p>
<div class="modal-dialog">
<div class="modal-content">
<time-date-picker ng-model="date" display-mode="date"></time-date-picker>
</div>
</div>
<script type="text/ng-template" id="time-date.tpl">
<div class="time-date" ng-class="modeClass()">
<div class="display" ng-click="modeSwitch()">
<div class="title">{{display.title()}}</div>
<div class="content">
<div class="super-title">{{display.super()}}</div>
<div class="main-title" ng-bind-html="display.main()"></div>
<div class="sub-title">{{display.sub()}}</div>
</div>
</div>
<div class="control">
<div class="slider">
<div class="date-control">
<div class="title"><span class="month-part">{{date | date:'MMMM'}}
<select ng-model="calendar._month" ng-change="calendar.monthChange()" ng-options="calendar._months.indexOf(month) as month for month in calendar._months"></select></span>
<input class="year-part" ng-model="calendar._year" ng-change="calendar.monthChange()" type="number"/>
</div>
<div class="headers">
<div class="day-cell">S</div>
<div class="day-cell">M</div>
<div class="day-cell">T</div>
<div class="day-cell">W</div>
<div class="day-cell">T</div>
<div class="day-cell">F</div>
<div class="day-cell">S</div>
</div>
<div class="days">
<div class="day-cell" ng-style="{'margin-left': calendar.offsetMargin()}" ng-class="calendar.class(1)" ng-show="calendar.isVisible(1)" ng-click="calendar.select(1)">1</div>
<div class="day-cell" ng-class="calendar.class(2)" ng-show="calendar.isVisible(2)" ng-click="calendar.select(2)">2</div>
<div class="day-cell" ng-class="calendar.class(3)" ng-show="calendar.isVisible(3)" ng-click="calendar.select(3)">3</div>
<div class="day-cell" ng-class="calendar.class(4)" ng-show="calendar.isVisible(4)" ng-click="calendar.select(4)">4</div>
<div class="day-cell" ng-class="calendar.class(5)" ng-show="calendar.isVisible(5)" ng-click="calendar.select(5)">5</div>
<div class="day-cell" ng-class="calendar.class(6)" ng-show="calendar.isVisible(6)" ng-click="calendar.select(6)">6</div>
<div class="day-cell" ng-class="calendar.class(7)" ng-show="calendar.isVisible(7)" ng-click="calendar.select(7)">7</div>
<div class="day-cell" ng-class="calendar.class(8)" ng-show="calendar.isVisible(8)" ng-click="calendar.select(8)">8</div>
<div class="day-cell" ng-class="calendar.class(9)" ng-show="calendar.isVisible(9)" ng-click="calendar.select(9)">9</div>
<div class="day-cell" ng-class="calendar.class(10)" ng-show="calendar.isVisible(10)" ng-click="calendar.select(10)">10</div>
<div class="day-cell" ng-class="calendar.class(11)" ng-show="calendar.isVisible(11)" ng-click="calendar.select(11)">11</div>
<div class="day-cell" ng-class="calendar.class(12)" ng-show="calendar.isVisible(12)" ng-click="calendar.select(12)">12</div>
<div class="day-cell" ng-class="calendar.class(13)" ng-show="calendar.isVisible(13)" ng-click="calendar.select(13)">13</div>
<div class="day-cell" ng-class="calendar.class(14)" ng-show="calendar.isVisible(14)" ng-click="calendar.select(14)">14</div>
<div class="day-cell" ng-class="calendar.class(15)" ng-show="calendar.isVisible(15)" ng-click="calendar.select(15)">15</div>
<div class="day-cell" ng-class="calendar.class(16)" ng-show="calendar.isVisible(16)" ng-click="calendar.select(16)">16</div>
<div class="day-cell" ng-class="calendar.class(17)" ng-show="calendar.isVisible(17)" ng-click="calendar.select(17)">17</div>
<div class="day-cell" ng-class="calendar.class(18)" ng-show="calendar.isVisible(18)" ng-click="calendar.select(18)">18</div>
<div class="day-cell" ng-class="calendar.class(19)" ng-show="calendar.isVisible(19)" ng-click="calendar.select(19)">19</div>
<div class="day-cell" ng-class="calendar.class(20)" ng-show="calendar.isVisible(20)" ng-click="calendar.select(20)">20</div>
<div class="day-cell" ng-class="calendar.class(21)" ng-show="calendar.isVisible(21)" ng-click="calendar.select(21)">21</div>
<div class="day-cell" ng-class="calendar.class(22)" ng-show="calendar.isVisible(22)" ng-click="calendar.select(22)">22</div>
<div class="day-cell" ng-class="calendar.class(23)" ng-show="calendar.isVisible(23)" ng-click="calendar.select(23)">23</div>
<div class="day-cell" ng-class="calendar.class(24)" ng-show="calendar.isVisible(24)" ng-click="calendar.select(24)">24</div>
<div class="day-cell" ng-class="calendar.class(25)" ng-show="calendar.isVisible(25)" ng-click="calendar.select(25)">25</div>
<div class="day-cell" ng-class="calendar.class(26)" ng-show="calendar.isVisible(26)" ng-click="calendar.select(26)">26</div>
<div class="day-cell" ng-class="calendar.class(27)" ng-show="calendar.isVisible(27)" ng-click="calendar.select(27)">27</div>
<div class="day-cell" ng-class="calendar.class(28)" ng-show="calendar.isVisible(28)" ng-click="calendar.select(28)">28</div>
<div class="day-cell" ng-class="calendar.class(29)" ng-show="calendar.isVisible(29)" ng-click="calendar.select(29)">29</div>
<div class="day-cell" ng-class="calendar.class(30)" ng-show="calendar.isVisible(30)" ng-click="calendar.select(30)">30</div>
<div class="day-cell" ng-class="calendar.class(31)" ng-
show="calendar.isVisible(31)" ng-click="calendar.select(31)">31</div>
</div>
</div>
<div class="button switch-control" ng-click="modeSwitch()"><i
class="fa fa-clock-o"></i><i class="fa fa-calendar"></i></div>
<div class="time-control">
<div class="clock">
<div class="clock-face">
<div class="center"></div>
<div class="hand" ng-click="clock.setHour(1)" ng-class="{'selected': clock._hour() == 1}">1</div>
<div class="hand" ng-click="clock.setHour(2)" ng-class=" {'selected': clock._hour() == 2}">2</div>
<div class="hand" ng-click="clock.setHour(3)" ng-class="
{'selected': clock._hour() == 3}">3</div>
<div class="hand" ng-click="clock.setHour(4)" ng-class="
{'selected': clock._hour() == 4}">4</div>
<div class="hand" ng-click="clock.setHour(5)" ng-class="
{'selected': clock._hour() == 5}">5</div>
<div class="hand" ng-click="clock.setHour(6)" ng-class="
{'selected': clock._hour() == 6}">6</div>
<div class="hand" ng-click="clock.setHour(7)" ng-class="
{'selected': clock._hour() == 7}">7</div>
<div class="hand" ng-click="clock.setHour(8)" ng-class="
{'selected': clock._hour() == 8}">8</div>
<div class="hand" ng-click="clock.setHour(9)" ng-class="
{'selected': clock._hour() == 9}">9</div>
<div class="hand" ng-click="clock.setHour(10)" ng-class="
{'selected': clock._hour() == 10}">10</div>
<div class="hand" ng-click="clock.setHour(11)" ng-class="
{'selected': clock._hour() == 11}">11</div>
<div class="hand" ng-click="clock.setHour(12)" ng-class="
{'selected': clock._hour() == 12}">12</div>
</div>
</div>
<div class="buttons">
<button class="btn btn-link pull-left" ng-
click="clock.setAM(true)" ng-class="{'active': clock.isAM()}"
type="button">AM</button>
<input value="30" type="number" min="0" max="59" ng-
model="clock._minutes"/>
<button class="btn btn-link pull-right" ng-
click="clock.setAM(false)" ng-class="{'active': !clock.isAM()}"
type="button">PM</button>
</div>
</div>
</div>
</div>
<div class="buttons">
<button class="btn btn-link" ng-click="setNow()"
type="button">Now</button>
<button class="btn btn-link" ng-click="cancel()"
type="button">Cancel</button>
<button class="btn btn-link" ng-click="save()" type="button">OK</button>
</div>
</div>
</script>
</div>
<script
src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'>
</script>
<script>
(function() {
angular.module('testMod', []).controller('testCtrl', function($scope) {
return $scope.date = new Date();
}).directive('timeDatePicker', [
'$filter',
'$sce',
function($filter,
$sce) {
return {
restrict: 'AE',
replace: true,
scope: {
_modelValue: '=ngModel'
},
require: 'ngModel',
templateUrl: 'time-date.tpl',
link: function(scope,
element,
attrs,
ngModel) {
var ref;
scope._mode = (ref = attrs.defaultMode) != null ? ref : 'date';
scope._displayMode = attrs.displayMode;
ngModel.$render = function() {
scope.date = ngModel.$modelValue != null ? new
Date(ngModel.$modelValue) : new Date();
scope.calendar._year = scope.date.getFullYear();
scope.calendar._month = scope.date.getMonth();
return scope.clock._minutes = scope.date.getMinutes();
};
scope.save = function() {
return scope._modelValue = scope.date;
};
return scope.cancel = function() {
return ngModel.$render();
};
},
controller: [
'$scope',
function(scope) {
scope.date = new Date();
scope.display = {
title: function() {
if (scope._mode === 'date') {
return $filter('date')(scope.date,
'EEEE h:mm a');
} else {
return $filter('date')(scope.date,
'MMMM d yyyy');
}
},
super: function() {
if (scope._mode === 'date') {
return $filter('date')(scope.date,
'MMM');
} else {
return '';
}
},
main: function() {
return $sce.trustAsHtml(scope._mode === 'date' ? $filter('date')
(scope.date,
'd') : `${$filter('date')(scope.date,
'h:mm')}<small>${$filter('date')(scope.date,
'a')}</small>`);
},
sub: function() {
if (scope._mode === 'date') {
return $filter('date')(scope.date,
'yyyy');
} else {
return $filter('date')(scope.date,
'HH:mm');
}
}
};
scope.calendar = {
_month: 0,
_year: 0,
_months: ["January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"],
offsetMargin: function() {
return `${new Date(this._year,
this._month).getDay() * 3.6}rem`;
},
isVisible: function(d) {
return new Date(this._year,
this._month,
d).getMonth() === this._month;
},
class: function(d) {
if (new Date(this._year,
this._month,
d).getTime() === new Date(scope.date.getTime()).setHours(0,
0,
0,
0)) {
return "selected";
} else if (new Date(this._year,
this._month,
d).getTime() === new Date().setHours(0,
0,
0,
0)) {
return "today";
} else {
return "";
}
},
select: function(d) {
return scope.date.setFullYear(this._year,
this._month,
d);
},
monthChange: function() {
if ((this._year == null) || isNaN(this._year)) {
this._year = new Date().getFullYear();
}
scope.date.setFullYear(this._year,
this._month);
if (scope.date.getMonth() !== this._month) {
return scope.date.setDate(0);
}
}
};
scope.clock = {
_minutes: 0,
_hour: function() {
var _h;
_h = scope.date.getHours();
_h = _h % 12;
if (_h === 0) {
return 12;
} else {
return _h;
}
},
setHour: function(h) {
if (h === 12 && this.isAM()) {
h = 0;
}
h += !this.isAM() ? 12 : 0;
if (h === 24) {
h = 12;
}
return scope.date.setHours(h);
},
setAM: function(b) {
if (b && !this.isAM()) {
return scope.date.setHours(scope.date.getHours() - 12);
} else if (!b && this.isAM()) {
return scope.date.setHours(scope.date.getHours() + 12);
}
},
isAM: function() {
return scope.date.getHours() < 12;
}
};
scope.$watch('clock._minutes',
function(val) {
if ((val != null) && val !== scope.date.getMinutes()) {
return scope.date.setMinutes(val);
}
});
scope.setNow = function() {
return scope.date = new Date();
};
scope._mode = 'date';
scope.modeClass = function() {
if (scope._displayMode != null) {
scope._mode = scope._displayMode;
}
if (scope._displayMode === 'time') {
return 'time-only';
} else if (scope._displayMode === 'date') {
return 'date-only';
} else if (scope._mode === 'date') {
return 'date-mode';
} else {
return 'time-mode';
}
};
return scope.modeSwitch = function() {
var ref;
return scope._mode = (ref = scope._displayMode) != null ? ref :
scope._mode === 'date' ? 'time' : 'date';
};
}
]
};
}
]);
}).call(this);
</script>
</body>
</html>