Skip to content

Commit 21de7f2

Browse files
phazeiphazei
committed
Update examples
1 parent dca5104 commit 21de7f2

File tree

1 file changed

+122
-74
lines changed

1 file changed

+122
-74
lines changed

‎example.html

Lines changed: 122 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -10,22 +10,50 @@
1010
<!-- endbower -->
1111

1212
<style type="text/css">
13-
label {
13+
14+
.form-group {
15+
display: flex;
16+
padding-bottom: 5px;
17+
margin-bottom: 20px;
18+
border-bottom: 1px solid lightblue;
19+
}
20+
.form-group > label {
21+
flex: 0 0 30%;
1422
display: inline-block;
15-
min-width: 200px;
23+
padding-right: 10px;
24+
cursor: pointer;
25+
}
26+
.form-group div label {
27+
display: block;
28+
font-size: smaller;
1629
}
1730
form input, form button {
1831
padding: 10px;
1932
border-radius: 5px;
20-
width: 300px;
21-
margin: 10px;
33+
width: calc(100% - 40px);
34+
max-width: 300px;
35+
margin: 0;
36+
}
37+
button:not(:disabled) {
38+
cursor: pointer;
39+
}
40+
.has-error input {
41+
color: red;
42+
border-color: red;
2243
}
44+
2345
.daterangepicker.fancy-border {
24-
border: 2px solid red;
46+
border: 2px solid rebeccapurple;
2547
box-shadow: 0 4px 15px 0px #888888;
2648
}
2749
.daterangepicker.fancy-border:before {
28-
border-bottom: 5px solid red;
50+
border-bottom: 5px solid rebeccapurple;
51+
}
52+
.help-block p {
53+
margin: 0 0 10px 0;
54+
padding: 0;
55+
font-size: smaller;
56+
color: red;
2957
}
3058
</style>
3159

@@ -45,95 +73,111 @@
4573
<div class="container">
4674
<h1>Daterange picker example</h1>
4775

48-
<div class="row">
49-
<div class="col-md-6" ng-controller="TestCtrl">
76+
<div ng-controller="TestCtrl">
5077
<form name="dateForm" class="form-horizontal">
51-
<div class="form-group">
52-
<label for="daterange1" class="control-label">Simple picker</label>
53-
<input date-range-picker id="daterange1" name="daterange1" class="form-control date-picker" type="text"
54-
ng-model="date"
55-
ng-model-options="{ updateOn: 'change' }"
56-
required/>
57-
<div><label>date:</label> {{date}}</div>
58-
<br/>
78+
<div class="form-group" ng-class="{'has-error': dateForm.dateSimple.$invalid}">
79+
<label for="dateSimple" class="control-label">Simple picker</label>
80+
<div>
81+
<input date-range-picker id="dateSimple" name="dateSimple" class="form-control date-picker" type="text"
82+
ng-model="date"
83+
ng-model-options="{ allowInvalid: true }"
84+
ng-required="page.required"/>
85+
<div class="help-block" ng-messages="dateForm.dateSimple.$error">
86+
<p ng-message="invalid">Invalid date.</p>
87+
<p ng-message="required">Range is required.</p>
88+
</div>
89+
<div><label>date:</label> {{date}}</div>
90+
</div>
5991
</div>
60-
<div class="form-group" ng-class="{'has-error': dateForm.daterange2.$invalid}">
92+
<div class="form-group" ng-class="{'has-error': dateForm.drpMinMax.$invalid}">
6193
<label for="daterange2" class="control-label">Picker with min and max date</label>
62-
<input date-range-picker id="daterange2" name="daterange2" class="form-control date-picker" type="text"
63-
ng-model="dateLimited"
64-
min="'2018-11-23'" max="'2019-08-25'"
65-
required/>
66-
<div class="help-block" ng-messages="dateForm.daterange2.$error">
67-
<p ng-message="min">Start date is too far in the past.</p>
68-
<p ng-message="max">End date is too far in the future.</p>
69-
<p ng-message="required">Range is required.</p>
94+
<div>
95+
<input date-range-picker id="daterange2" name="drpMinMax" class="form-control date-picker" type="text"
96+
ng-model="dateMinMax"
97+
ng-model-options="{ allowInvalid: true }"
98+
picker="page.pickerMinMax"
99+
min="'2018-12-20'" max="'2018-12-30'"
100+
required/>
101+
<div class="help-block" ng-messages="dateForm.drpMinMax.$error">
102+
<p ng-message="min">Start date must be at least {{page.pickerMinMax.minDate}}.</p>
103+
<p ng-message="max">End date must be at most {{page.pickerMinMax.maxDate}}.</p>
104+
<p ng-message="invalid">Invalid date.</p>
105+
<p ng-message="required">Range is required.</p>
106+
</div>
107+
<div><label>dateMinMax:</label> {{dateMinMax}}</div>
70108
</div>
71-
<div><label>dateLimited:</label> {{dateLimited}}</div>
72-
<br>
73109
</div>
74110
<div class="form-group">
75-
<label for="daterange3" class="control-label">Picker with custom locale <br/> & extra picker class</label>
76-
<input date-range-picker id="daterange3" name="daterange3" class="form-control date-picker" type="text"
77-
ng-model="date2"
78-
options="opts" required/>
79-
<div><label>date2:</label> {{date2}}</div>
80-
<br>
111+
<label for="daterange3" class="control-label">Picker with custom locale & extra picker class</label>
112+
<div>
113+
<input date-range-picker id="daterange3" name="daterange3" class="form-control date-picker" type="text"
114+
ng-model="date2"
115+
options="opts" required/>
116+
<div><label>date2:</label> {{date2}}</div>
117+
</div>
81118
</div>
82119
<div class="form-group">
83120
<label for="daterange4" class="control-label">Clearable picker</label>
84-
<input date-range-picker id="daterange4" name="daterange4" class="form-control date-picker" type="text"
85-
ng-model="date2"
86-
clearable="true" required/>
87-
<div><label>date2:</label> {{date2}}</div>
88-
<br>
121+
<div>
122+
<input date-range-picker id="daterange4" name="daterange4" class="form-control date-picker" type="text"
123+
ng-model="date2"
124+
clearable="true" required/>
125+
<div><label>date2:</label> {{date2}}</div>
126+
</div>
89127
</div>
90128
<div class="form-group">
91-
<label for="daterangeA" class="control-label">Unlinked calendars</label>
92-
<input date-range-picker id="daterangeA" name="daterange4" class="form-control date-picker" type="text"
93-
ng-model="date2"
94-
options="optsUnlinked" required/>
95-
<div><label>date2:</label> {{date2}}</div>
96-
<br>
129+
<label for="daterangeA" class="control-label">Unlinked calendars w/validation</label>
130+
<div>
131+
<input date-range-picker id="daterangeA" name="daterangeUnlinked" class="form-control date-picker" type="text"
132+
ng-model="date2"
133+
options="optsUnlinked" required/>
134+
<div class="help-block" ng-messages="dateForm.daterangeUnlinked.$error">
135+
<p ng-message="min">Start date must be at least {{optsUnlinked.minDate}}.</p>
136+
<p ng-message="max">End date must be at most {{optsUnlinked.maxDate}}.</p>
137+
<p ng-message="required">Range is required.</p>
138+
</div>
139+
<div><label>date2:</label> {{date2}}</div>
140+
</div>
97141
</div>
98142
<div class="form-group">
99-
<label for="daterangeB" class="control-label">Single picker</label>
100-
<input date-range-picker id="daterangeB" name="daterange4" class="form-control date-picker" type="text"
101-
ng-model="dateSingle"
102-
options="optsSingle" required/>
103-
<div><label>dateSingle:</label> {{dateSingle}}</div>
104-
<br>
143+
<button type="button" class="btn" ng-click="setStartDate()">Set Start Date2</button>
144+
<button type="button" class="btn" ng-click="setRange()">Set Range Date2</button>
105145
</div>
106146
<div class="form-group">
107-
<label for="daterange5" class="control-label">Picker with custom format & apply <br/> when clicking out of calendar</label>
108-
<span class="input-group col-md-6" id="daterange5">
109-
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
110-
<input date-range-picker name="daterange5" class="form-control date-picker" type="text"
111-
ng-model="dateFormatted" options="{cancelOnOutsideClick: false, locale: {format: 'MMMM D, YYYY'}}" required/>
112-
<span class="input-group-addon"><span class="glyphicon glyphicon-chevron-down"></span></span>
113-
</span>
114-
<div><label>dateFormatted:</label> {{dateFormatted}}</div>
115-
<br>
147+
<label for="dateSingle" class="control-label">Single picker w/validation</label>
148+
<div>
149+
<input date-range-picker id="dateSingle" name="dateSingle" class="form-control date-picker" type="text"
150+
ng-model="dateSingle"
151+
ng-model-options="{ allowInvalid: true }"
152+
options="optsSingle" required/>
153+
<div class="help-block" ng-messages="dateForm.dateSingle.$error">
154+
<p ng-message="min">To low. Date must be between {{optsSingle.minDate}} && {{optsSingle.maxDate}}.</p>
155+
<p ng-message="max">To high. Date must be between {{optsSingle.minDate}} && {{optsSingle.maxDate}}.</p>
156+
<p ng-message="required">Range is required.</p>
157+
<p ng-message="invalid">Date is invalid.</p>
158+
</div>
159+
<div><label>dateSingle:</label> {{dateSingle}}</div>
160+
</div>
116161
</div>
117-
<button type="button" class="btn" ng-click="setStartDate()">Set Start Date</button>
118-
<button type="button" class="btn" ng-click="setRange()">Set Range</button>
119-
</form>
120-
121-
<div class="row">
122-
<h4>Dates:</h4>
123-
<div class="col-md-12 well">
124-
date1: {{date}}<br>
125-
date2: {{date2}}<br>
162+
<div class="form-group">
163+
<label for="dateFormatted" class="control-label">Picker with custom format & apply when clicking out of calendar</label>
164+
<div>
165+
<input date-range-picker id="dateFormatted" name="dateFormatted" class="form-control date-picker" type="text"
166+
ng-model="dateFormatted" options="{cancelOnOutsideClick: false, locale: {format: 'MMMM D, YYYY'}}" required/>
167+
<div><label>dateFormatted:</label> {{dateFormatted}}</div>
168+
</div>
126169
</div>
127-
</div>
170+
</form>
128171
</div>
129-
</div>
130172
</div>
131173
</body>
132174

133175

134176
<script>
135177
exampleApp = angular.module('example', ['ngMessages', 'daterangepicker']);
136178
exampleApp.controller('TestCtrl', function($scope) {
179+
$scope.page = { required: true};
180+
137181
$scope.date = {
138182
startDate: moment().subtract(1, "days"),
139183
endDate: moment()
@@ -142,7 +186,7 @@ <h4>Dates:</h4>
142186
startDate: moment().subtract(1, "days"),
143187
endDate: moment()
144188
};
145-
$scope.dateLimited = {
189+
$scope.dateMinMax = {
146190
startDate: moment().subtract(1, "days"),
147191
endDate: moment()
148192
};
@@ -169,21 +213,25 @@ <h4>Dates:</h4>
169213
}
170214
};
171215
$scope.optsUnlinked = {
216+
minDate: moment().startOf('day').subtract(4, 'months'),
217+
maxDate: moment().endOf('day').add(2, 'months'),
172218
linkedCalendars: false
173219
};
174220
$scope.optsSingle = {
175221
singleDatePicker: true,
222+
minDate: moment().startOf('day').subtract(4, 'months'),
223+
maxDate: moment().endOf('day').add(2, 'months'),
176224
ranges: $scope.opts.ranges
177225
};
178226

179227
$scope.setStartDate = function () {
180-
$scope.date.startDate = moment().subtract(4, "days");
228+
$scope.date2.startDate = moment().subtract(4, "days");
181229
};
182230

183231
$scope.setRange = function () {
184-
$scope.date = {
232+
$scope.date2 = {
185233
startDate: moment().subtract(5, "days"),
186-
endDate: moment()
234+
endDate: moment().add(1, "days")
187235
};
188236
};
189237

0 commit comments

Comments
 (0)