Skip to content

Commit f568aa8

Browse files
author
Joseph
committed
Testing our angular version of plugin.
1 parent 9068eca commit f568aa8

File tree

5 files changed

+1260
-4
lines changed

5 files changed

+1260
-4
lines changed

‎.gitignore

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
# Created by .ignore support plugin (hsz.mobi)
1+
# Created by .ignore support plugin (hsz.mobi)
2+
/bower_components
3+
.idea

‎bower.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,7 @@
2727
],
2828
"dependencies": {
2929
"momentjs": "~2.10.2",
30-
"bootstrap": "~3.3.4",
31-
"jquery": "1.11.0",
32-
"bootstrap-material-design": "~0.3.0"
30+
"jquery": "~2.1.4",
31+
"angular-material": "~0.11.4"
3332
}
3433
}

‎css/material-datetimepicker.css

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
body {
2+
font-family: RobotoDraft, Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;;
3+
font-size: 14px;
4+
line-height: 1.42857143;
5+
color: #333;
6+
background-color: #fff;
7+
}
8+
9+
html {
10+
font-size: 10px;
11+
}
12+
13+
.dtp table {
14+
border-spacing: 0;
15+
border-collapse: collapse;
16+
width: 100%;
17+
}
18+
19+
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
20+
padding: 8px;
21+
line-height: 1.42857143;
22+
vertical-align: top;
23+
border-top: 1px solid #ddd;
24+
}
25+
26+
.dtp, .dtp * {
27+
box-sizing: border-box !important;
28+
}
29+
30+
.dtp { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 2000; }
31+
.dtp > .dtp-content { background: #fff; max-width: 300px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); max-height: 500px; position: relative; left: 50%; }
32+
.dtp > .dtp-content > .dtp-date-view > header.dtp-header { background: #689F38; color: #fff; text-align: center; padding: 0.3rem; }
33+
34+
.dtp div.dtp-date, .dtp div.dtp-time { background: #8BC34A; text-align: center; color: #fff; padding: 10px; }
35+
.dtp div.dtp-date > div { padding: 0; margin: 0; }
36+
.dtp div.dtp-actual-month { font-size: 1.5em; }
37+
.dtp div.dtp-actual-num { font-size: 3em; line-height: 0.9; }
38+
.dtp div.dtp-actual-maxtime { font-size: 3em; line-height: 0.9; }
39+
.dtp div.dtp-actual-year { font-size: 1.5em; color: #DCEDC8; }
40+
.dtp div.dtp-picker { padding: 1rem; text-align: center; }
41+
42+
.dtp div.dtp-picker-month, .dtp div.dtp-actual-time { font-weight: 500; text-align: center; }
43+
44+
.dtp .dtp-close { position: absolute; top: 0.5em; right: 1rem; }
45+
.dtp .dtp-close > a { color: #fff; }
46+
.dtp .dtp-close > a > i { font-size: 1em; }
47+
48+
.dtp table.dtp-picker-days { margin: 0; min-height: 251px;}
49+
.dtp table.dtp-picker-days, .dtp table.dtp-picker-days tr, .dtp table.dtp-picker-days tr > td { border: none; }
50+
.dtp table.dtp-picker-days tr > td { font-weight: 700; font-size: 1.2rem; text-align: center; padding: 1rem 0.3rem; }
51+
.dtp table.dtp-picker-days tr > td > span.dtp-select-day { color: #BDBDBD!important; }
52+
.dtp table.dtp-picker-days tr > td > a, .dtp .dtp-picker-time > a { color: #212121; text-decoration: none; padding: 0.4rem 0.5rem 0.5rem 0.6rem; border-radius: 50%!important; }
53+
.dtp table.dtp-picker-days tr > td > a.selected{ background: #8BC34A; color: #fff; }
54+
.dtp table.dtp-picker-days tr > th { color: #757575; text-align: center; font-weight: 700; padding: 0.4rem 0.3rem; }
55+
56+
.dtp .p10 > a { color: #689F38; text-decoration: none; }
57+
.dtp .p10 { width: 10%; display: inline-block; }
58+
.dtp .p20 { width: 20%; display: inline-block; }
59+
.dtp .p60 { width: 60%; display: inline-block; }
60+
.dtp .p80 { width: 80%; display: inline-block; }
61+
62+
.dtp a.dtp-meridien-am, .dtp a.dtp-meridien-pm { position: relative; top: 10px; color: #212121; font-weight: 500; padding: 0.7rem 0.5rem; border-radius: 50%!important;text-decoration: none; background: #eee; font-size:1rem; }
63+
.dtp .dtp-actual-meridien a.selected { background: #689F38; color: #fff; }
64+
65+
.dtp .dtp-picker-time > a { display: block; line-height: 23px; padding: 0.3rem 0.3rem 0.3rem 0.3rem; }
66+
.dtp .dtp-picker-time { position: absolute;width: 30px;height: 30px;font-size: 1em;border-radius: 50%;cursor: pointer;font-weight: 500;text-align: center!important; }
67+
68+
.dtp .dtp-picker-time > a.dtp-select-hour.selected { background: #689F38; color: #fff; }
69+
.dtp .dtp-picker-time > a.dtp-select-hour.disabled, .dtp .dtp-picker-time > a.dtp-select-minute.disabled { color: #757575; }
70+
.dtp .dtp-picker-time > a.dtp-select-minute.selected { background: #8BC34A; color: #fff; }
71+
72+
.dtp div.dtp-picker-clock { margin: 1rem 2rem 0 2rem; padding: 1rem; border-radius: 50%!important; background: #eee; }
73+
.dtp-clock-center { width: 15px; height: 15px; background: #757575; border-radius: 50%; position: absolute; z-index: 50; }
74+
75+
.dtp .dtp-hand, .dtp .dtp-hour-hand { position: absolute; width: 4px; margin-left: -2px; background: #BDBDBD; -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); -moz-transform-origin: bottom; -ms-transform-origin: bottom; -webkit-transform-origin: bottom; transform-origin: bottom; z-index: 1; }
76+
.dtp .dtp-minute-hand { width: 2px; margin-left: -1px; }
77+
.dtp .dtp-hand.on { background: #8BC34A; }
78+
79+
.dtp .dtp-buttons { padding: 0 1rem 1rem 1rem; text-align: right; }
80+
81+
.dtp.hidden, .dtp .hidden { display: none; }
82+
.dtp .invisible { visibility: hidden; }
83+
84+
.dtp .left { float: left; }
85+
.dtp .right { float: right; }
86+
.dtp .clearfix { clear: both; }
87+
88+
.dtp .center { text-align: center; }
89+

‎index2.html

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
<html>
2+
<head>
3+
<title>Bootstrap-Material DateTimePicker</title>
4+
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />-->
7+
<!--<link rel="stylesheet" href="https://rawgit.com/FezVrasta/bootstrap-material-design/master/dist/css/material.min.css" />-->
8+
<link href='http://fonts.googleapis.com/css?family=RobotoDraft:400,500' rel='stylesheet' type='text/css'>
9+
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
10+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
11+
<link href="bower_components/angular-material/angular-material.min.css"/>
12+
<link rel="stylesheet" href="./css/material-datetimepicker.css" />
13+
14+
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
15+
<!--<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>-->
16+
<!--<script type="text/javascript" src="https://rawgit.com/FezVrasta/bootstrap-material-design/master/dist/js/material.min.js"></script>-->
17+
<script src="bower_components/jquery/dist/jquery.min.js"></script>
18+
<script src="bower_components/angular/angular.min.js"></script>
19+
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
20+
<script src="bower_components/angular-material/angular-material.min.js"></script>
21+
<script type="text/javascript" src="http://momentjs.com/downloads/moment-with-locales.min.js"></script>
22+
<script type="text/javascript" src="./js/angular-material-datetimepicker.js"></script>
23+
24+
<style>
25+
body
26+
{
27+
padding-top: 70px;
28+
font-family: 'Roboto', sans-serif;
29+
}
30+
h2
31+
{
32+
padding: 0 20px 10px 20px;
33+
font-size: 20px;
34+
font-weight: 400;
35+
}
36+
.form-control-wrapper
37+
{
38+
margin: 10px 20px;
39+
}
40+
code
41+
{
42+
padding: 10px;
43+
background: #eee!important;
44+
display: block;
45+
color: #000;
46+
}
47+
code > p
48+
{
49+
font-weight: bold;
50+
color: #000;
51+
font-size: 1.5em;
52+
}
53+
@media(max-width: 300px)
54+
{
55+
.well { margin : 0}
56+
}
57+
</style>
58+
</head>
59+
<body>
60+
<div class="container well">
61+
<div class="row">
62+
<div class="col-md-6">
63+
<h1>Bootstrap Material DatePicker</h1>
64+
</div>
65+
</div>
66+
</div>
67+
<div class="container well">
68+
<div class="row">
69+
<div class="col-md-6">
70+
<h2>Date Picker</h2>
71+
</div>
72+
</div>
73+
<div class="row">
74+
<div class="col-md-6">
75+
<div class="form-control-wrapper">
76+
<input type="text" id="date" class="form-control floating-label" placeholder="Date">
77+
</div>
78+
</div>
79+
<div class="col-md-6">
80+
<code>
81+
<p>Code</p>
82+
$('#date').bootstrapMaterialDatePicker({ weekStart : 0, time: false });
83+
</code>
84+
</div>
85+
</div>
86+
</div>
87+
<div class="container well">
88+
<div class="row">
89+
<div class="col-md-6">
90+
<h2>Time Picker</h2>
91+
</div>
92+
</div>
93+
<div class="row">
94+
<div class="col-md-6">
95+
<div class="form-control-wrapper">
96+
<input type="text" id="time" class="form-control floating-label" placeholder="Time">
97+
</div>
98+
</div>
99+
<div class="col-md-6">
100+
<code>
101+
<p>Code</p>
102+
$('#time').bootstrapMaterialDatePicker({ date: false });
103+
</code>
104+
</div>
105+
</div>
106+
</div>
107+
<div class="container well">
108+
<div class="row">
109+
<div class="col-md-6">
110+
<h2>Date Time Picker</h2>
111+
</div>
112+
</div>
113+
<div class="row">
114+
<div class="col-md-6">
115+
<div class="form-control-wrapper">
116+
<input type="text" id="date-format" class="form-control floating-label" placeholder="Begin Date Time">
117+
</div>
118+
</div>
119+
<div class="col-md-6">
120+
<code>
121+
<p>Code</p>
122+
$('#date-format').bootstrapMaterialDatePicker({ format : 'dddd DD MMMM YYYY - HH:mm' });
123+
</code>
124+
</div>
125+
</div>
126+
</div>
127+
<div class="container well">
128+
<div class="row">
129+
<div class="col-md-6">
130+
<h2>French Locales (Week starts at Monday)</h2>
131+
</div>
132+
</div>
133+
<div class="row">
134+
<div class="col-md-6">
135+
<div class="form-control-wrapper">
136+
<input type="text" id="date-fr" class="form-control floating-label" value="18/03/2015 08:00" placeholder="Date de début">
137+
</div>
138+
</div>
139+
<div class="col-md-6">
140+
<code>
141+
<p>Code</p>
142+
$('#date-fr').bootstrapMaterialDatePicker({ format : 'DD/MM/YYYY HH:mm', lang : 'fr', weekStart : 1, cancelText : 'ANNULER' });
143+
</code>
144+
</div>
145+
</div>
146+
</div>
147+
<div class="container well">
148+
<div class="row">
149+
<div class="col-md-6">
150+
<h2>Min Date set</h2>
151+
</div>
152+
</div>
153+
<div class="row">
154+
<div class="col-md-6">
155+
<div class="form-control-wrapper">
156+
<input type="text" id="min-date" class="form-control floating-label" placeholder="Start Date">
157+
</div>
158+
</div>
159+
<div class="col-md-6">
160+
<code>
161+
<p>Code</p>
162+
$('#min-date').bootstrapMaterialDatePicker({ format : 'DD/MM/YYYY HH:mm', minDate : new Date() });
163+
</code>
164+
</div>
165+
</div>
166+
</div>
167+
<div class="container well">
168+
<div class="row">
169+
<div class="col-md-6">
170+
<h2>Events</h2>
171+
</div>
172+
</div>
173+
<div class="row">
174+
<div class="col-md-6">
175+
<div class="row">
176+
<div class="col-md-12">
177+
<div class="form-control-wrapper">
178+
<input type="text" id="date-start" class="form-control floating-label" placeholder="Start Date">
179+
</div>
180+
</div>
181+
</div>
182+
<div class="row">
183+
<div class="col-md-12">
184+
<div class="form-control-wrapper">
185+
<input type="text" id="date-end" class="form-control floating-label" placeholder="End Date">
186+
</div>
187+
</div>
188+
</div>
189+
</div>
190+
<div class="col-md-6">
191+
<div class="row">
192+
<div class="col-md-12">
193+
<code>
194+
<p>Code</p>
195+
$('#date-end').bootstrapMaterialDatePicker({ weekStart : 0 });<br />
196+
$('#date-start').bootstrapMaterialDatePicker({ weekStart : 0 }).on('change', function(e, date)<br />
197+
{<br />
198+
$('#date-end').bootstrapMaterialDatePicker('setMinDate', date);<br />
199+
});
200+
</code>
201+
</div>
202+
</div>
203+
</div>
204+
</div>
205+
</div>
206+
<script type="text/javascript">
207+
$(document).ready(function()
208+
{
209+
$('#date').bootstrapMaterialDatePicker
210+
({
211+
time: false
212+
});
213+
214+
$('#time').bootstrapMaterialDatePicker
215+
({
216+
date: false,
217+
shortTime: true,
218+
format: 'HH:mm'
219+
});
220+
221+
$('#date-format').bootstrapMaterialDatePicker
222+
({
223+
format: 'dddd DD MMMM YYYY - HH:mm'
224+
});
225+
$('#date-fr').bootstrapMaterialDatePicker
226+
({
227+
format: 'DD/MM/YYYY HH:mm',
228+
lang: 'fr',
229+
weekStart: 1,
230+
cancelText : 'ANNULER'
231+
});
232+
233+
$('#date-end').bootstrapMaterialDatePicker
234+
({
235+
weekStart: 0, format: 'DD/MM/YYYY HH:mm'
236+
});
237+
$('#date-start').bootstrapMaterialDatePicker
238+
({
239+
weekStart: 0, format: 'DD/MM/YYYY HH:mm'
240+
}).on('change', function(e, date)
241+
{
242+
$('#date-end').bootstrapMaterialDatePicker('setMinDate', date);
243+
});
244+
245+
$('#min-date').bootstrapMaterialDatePicker({ format : 'DD/MM/YYYY HH:mm', minDate : new Date() });
246+
247+
//$.material.init()
248+
});
249+
</script>
250+
</body>
251+
</html>

0 commit comments

Comments
 (0)