Skip to content

Commit 41d866a

Browse files
author
Joseph
committed
- Initial, look n feel just like angular.
1 parent f568aa8 commit 41d866a

File tree

5 files changed

+243
-434
lines changed

5 files changed

+243
-434
lines changed

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,6 @@
2828
"dependencies": {
2929
"momentjs": "~2.10.2",
3030
"jquery": "~2.1.4",
31-
"angular-material": "~0.11.4"
31+
"angular-material": "1.0.0-rc3"
3232
}
3333
}

‎css/material-datetimepicker.css

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
body {
1+
md-dialog.dtp {
22
font-family: RobotoDraft, Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;;
3-
font-size: 14px;
3+
font-size: 10px;
44
line-height: 1.42857143;
55
color: #333;
66
background-color: #fff;
77
}
88

9-
html {
10-
font-size: 10px;
11-
}
9+
/*html {*/
10+
/*font-size: 10px;*/
11+
/*}*/
1212

1313
.dtp table {
1414
border-spacing: 0;
@@ -27,8 +27,8 @@ html {
2727
box-sizing: border-box !important;
2828
}
2929

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%; }
30+
31+
.dtp > .dtp-content {max-width: 300px; max-height: 500px; }
3232
.dtp > .dtp-content > .dtp-date-view > header.dtp-header { background: #689F38; color: #fff; text-align: center; padding: 0.3rem; }
3333

3434
.dtp div.dtp-date, .dtp div.dtp-time { background: #8BC34A; text-align: center; color: #fff; padding: 10px; }

‎index2.html

+75-245
Original file line numberDiff line numberDiff line change
@@ -1,251 +1,81 @@
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" />
1+
<html ng-app="mdDatetimePickerDemo">
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" rel="stylesheet" type="text/css"/>
12+
<link rel="stylesheet" href="./css/material-datetimepicker.css" type="text/css"/>
1313

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>
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-aria/angular-aria.js"></script>
21+
<script src="bower_components/angular-material/angular-material.min.js"></script>
22+
<script type="text/javascript" src="bower_components/momentjs/moment.js"></script>
23+
<script type="text/javascript" src="./js/angular-material-datetimepicker.js"></script>
24+
<script type="text/javascript" src="./js/demo.js"></script>
2325

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-
});
26+
<!--<style>-->
27+
<!--body-->
28+
<!--{-->
29+
<!--padding-top: 70px;-->
30+
<!--font-family: 'Roboto', sans-serif;-->
31+
<!--}-->
32+
<!--h2-->
33+
<!--{-->
34+
<!--padding: 0 20px 10px 20px;-->
35+
<!--font-size: 20px;-->
36+
<!--font-weight: 400;-->
37+
<!--}-->
38+
<!--.form-control-wrapper-->
39+
<!--{-->
40+
<!--margin: 10px 20px;-->
41+
<!--}-->
42+
<!--code-->
43+
<!--{-->
44+
<!--padding: 10px;-->
45+
<!--background: #eee!important;-->
46+
<!--display: block;-->
47+
<!--color: #000;-->
48+
<!--}-->
49+
<!--code > p-->
50+
<!--{-->
51+
<!--font-weight: bold;-->
52+
<!--color: #000;-->
53+
<!--font-size: 1.5em;-->
54+
<!--}-->
55+
<!--@media(max-width: 300px)-->
56+
<!--{-->
57+
<!--.well { margin : 0}-->
58+
<!--}-->
59+
<!--</style>-->
60+
</head>
61+
<body ng-controller="DemoCtrl" layout="column">
62+
<md-content class="md-padding">
63+
<div layout="column">
64+
<h1>Bootstrap Material DatePicker</h1>
65+
</div>
66+
<div>
67+
<h2>Date Picker</h2>
21368

214-
$('#time').bootstrapMaterialDatePicker
215-
({
216-
date: false,
217-
shortTime: true,
218-
format: 'HH:mm'
219-
});
69+
<div layout="column" flex="70">
70+
<md-input-container>
71+
<label>Date</label>
72+
<input mdc-datetime-picker type="text" id="date" class="form-control floating-label" placeholder="Date"
73+
ng-model="date">
74+
</md-input-container>
75+
</div>
76+
</div>
77+
</md-content>
22078

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-
});
23279

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>
80+
</body>
25181
</html>

0 commit comments

Comments
 (0)