Skip to content

Commit 2016d47

Browse files
committed
Update README.md
Add date range picker example
1 parent 0b7720f commit 2016d47

File tree

1 file changed

+50
-0
lines changed

1 file changed

+50
-0
lines changed

README.md

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -287,6 +287,56 @@ In this example, the drop-down functionality is controlled by Twitter Bootstrap.
287287
The <code>dropdownSelector</code> tells the datetimepicker which element is bound to the Twitter Bootstrap drop-down so
288288
the drop-down is toggled closed after the user selectes a date/time.
289289

290+
### Create a date range picker with validation controls
291+
```html
292+
<div class="dropdown form-group">
293+
<a class="dropdown-toggle" id="dropdown1" role="button" data-toggle="dropdown" data-target="#" href="#">
294+
<div class="input-group date">
295+
<input type="text" class="form-control" data-ng-model="dateRangeStart">
296+
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
297+
</div>
298+
</a>
299+
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
300+
<datetimepicker data-ng-model="dateRangeStart" data-datetimepicker-config="{ dropdownSelector: '#dropdown1'}" data-before-render="beforeRenderStartDate($view, $dates, $leftDate, $upDate, $rightDate)"/>
301+
</ul>
302+
</div>
303+
304+
<div class="dropdown form-group">
305+
<a class="dropdown-toggle" id="dropdown2" role="button" data-toggle="dropdown" data-target="#" href="#">
306+
<div class="input-group date">
307+
<input type="text" class="form-control" data-ng-model="dateRangeEnd">
308+
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
309+
</div>
310+
</a>
311+
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
312+
<datetimepicker data-ng-model="dateRangeEnd" data-datetimepicker-config="{ dropdownSelector: '#dropdown2'}" data-before-render="beforeRenderEndDate($view, $dates, $leftDate, $upDate, $rightDate)"/>
313+
</ul>
314+
</div>
315+
```
316+
In this example, two elements are created : one for the start date and the second for the end date of the range.
317+
318+
```JavaScript
319+
$scope.beforeRenderStartDate = function($view, $dates, $leftDate, $upDate, $rightDate) {
320+
if ($scope.dateRangeEnd) {
321+
var activeDate = moment($scope.dateRangeEnd);
322+
for (var i = 0; i < $dates.length; i++) {
323+
if ($dates[i].localDateValue() >= activeDate.valueOf()) $dates[i].selectable = false;
324+
}
325+
}
326+
}
327+
328+
$scope.beforeRenderEndDate = function($view, $dates, $leftDate, $upDate, $rightDate) {
329+
if ($scope.dateRangeStart) {
330+
var activeDate = moment($scope.dateRangeStart).subtract(1, $view).add(1, 'minute');
331+
for (var i = 0; i < $dates.length; i++) {
332+
if ($dates[i].localDateValue() <= activeDate.valueOf()) {
333+
$dates[i].selectable = false;
334+
}
335+
}
336+
}
337+
}
338+
```
339+
Then in the controller two functions must be added. Each one is related to the concerned date. They update the selectable status of each displayed date based on the range values. The time is also taken into account.
290340

291341
## I18N / l10n support
292342

0 commit comments

Comments
 (0)