Skip to content

Commit

Permalink
docs(Readme): Update Date Range picker example in the readme and add …
Browse files Browse the repository at this point in the history 
…it to the demo page.

The original example did not have code to re-render the directive when the start or end date

changed. It is now a more complete example.

Fix #315
  • Loading branch information
@dalelotts
dalelotts committed Sep 13, 2016
1 parent a5dbe27 commit 9c3d569
Show file tree
Hide file tree
Showing 3 changed files with 175 additions and 45 deletions.
87 changes: 59 additions & 28 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -341,49 +341,80 @@ the drop-down is toggled closed after the user selectes a date/time.
### Create a date range picker with validation controls
```html
<div class="dropdown form-group">
<a class="dropdown-toggle" id="dropdown1" role="button" data-toggle="dropdown" data-target="#" href="#">
<div class="input-group date">
<input type="text" class="form-control" data-ng-model="dateRangeStart">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker data-ng-model="dateRangeStart" data-datetimepicker-config="{ dropdownSelector: '#dropdown1'}" data-before-render="beforeRenderStartDate($view, $dates, $leftDate, $upDate, $rightDate)"></datetimepicker>
</ul>
<label for="dateRangeStart">Start Date</label>
<a class="dropdown-toggle" id="dropdownStart" role="button" data-toggle="dropdown" data-target="#"
href="#">
<div class="input-group date">
<input id="dateRangeStart" type="text" class="form-control" data-ng-model="dateRangeStart">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker data-ng-model="dateRangeStart"
data-datetimepicker-config="{ dropdownSelector: '#dropdownStart', renderOn: 'end-date-changed' }"
data-on-set-time="startDateOnSetTime()"
data-before-render="startDateBeforeRender($dates)"></datetimepicker>
</ul>
</div>

<div class="dropdown form-group">
<a class="dropdown-toggle" id="dropdown2" role="button" data-toggle="dropdown" data-target="#" href="#">
<div class="input-group date">
<input type="text" class="form-control" data-ng-model="dateRangeEnd">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker data-ng-model="dateRangeEnd" data-datetimepicker-config="{ dropdownSelector: '#dropdown2'}" data-before-render="beforeRenderEndDate($view, $dates, $leftDate, $upDate, $rightDate)"></datetimepicker>
</ul>
<label for="dateRangeStart">End Date</label>
<a class="dropdown-toggle" id="dropdownEnd" role="button" data-toggle="dropdown" data-target="#"
href="#">
<div class="input-group date">
<input type="text" class="form-control" data-ng-model="dateRangeEnd">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker data-ng-model="dateRangeEnd"
data-datetimepicker-config="{ dropdownSelector: '#dropdownEnd', renderOn: 'start-date-changed' }"
data-on-set-time="endDateOnSetTime()"
data-before-render="endDateBeforeRender($view, $dates, $leftDate, $upDate, $rightDate)"></datetimepicker>
</ul>
</div>
```
In this example, two elements are created : one for the start date and the second for the end date of the range.

```JavaScript
$scope.beforeRenderStartDate = function($view, $dates, $leftDate, $upDate, $rightDate) {
/* Bindable functions
-----------------------------------------------*/
$scope.endDateBeforeRender = endDateBeforeRender
$scope.endDateOnSetTime = endDateOnSetTime
$scope.startDateBeforeRender = startDateBeforeRender
$scope.startDateOnSetTime = startDateOnSetTime

function startDateOnSetTime () {
selectable = (!selectable);
$scope.$broadcast('start-date-changed');
}

function endDateOnSetTime () {
selectable = (!selectable);
$scope.$broadcast('end-date-changed');
}

function startDateBeforeRender ($dates) {
if ($scope.dateRangeEnd) {
var activeDate = moment($scope.dateRangeEnd);
for (var i = 0; i < $dates.length; i++) {
if ($dates[i].localDateValue() >= activeDate.valueOf()) $dates[i].selectable = false;
}

$dates.filter(function (date) {
return date.localDateValue() >= activeDate.valueOf()
}).forEach(function (date) {
date.selectable = false;
})
}
}

$scope.beforeRenderEndDate = function($view, $dates, $leftDate, $upDate, $rightDate) {
function endDateBeforeRender ($view, $dates) {
if ($scope.dateRangeStart) {
var activeDate = moment($scope.dateRangeStart).subtract(1, $view).add(1, 'minute');
for (var i = 0; i < $dates.length; i++) {
if ($dates[i].localDateValue() <= activeDate.valueOf()) {
$dates[i].selectable = false;
}
}

$dates.filter(function (date) {
return date.localDateValue() <= activeDate.valueOf()
}).forEach(function (date) {
date.selectable = false;
})
}
}
```
Expand Down
60 changes: 48 additions & 12 deletions demo/demo-controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

demoController.$inject = ['$scope', '$log'];

function demoController($scope, $log) {
function demoController ($scope, $log) {

var validViews = ['year', 'month', 'day', 'hour', 'minute'];
var selectable = true;
Expand All @@ -21,12 +21,16 @@
$scope.changeConfig = changeConfig;
$scope.checkboxOnTimeSet = checkboxOnTimeSet;
$scope.configFunction = configFunction;
$scope.endDateBeforeRender = endDateBeforeRender
$scope.endDateOnSetTime = endDateOnSetTime
$scope.getLocale = getLocale;
$scope.guardianOnSetTime = guardianOnSetTime;
$scope.inputOnTimeSet = inputOnTimeSet;
$scope.renderOnBeforeRender = renderOnBeforeRender;
$scope.renderOnClick = renderOnClick;
$scope.setLocale = setLocale;
$scope.startDateBeforeRender = startDateBeforeRender
$scope.startDateOnSetTime = startDateOnSetTime

moment.locale('en');

Expand Down Expand Up @@ -60,11 +64,11 @@
}
};

function checkboxOnTimeSet() {
function checkboxOnTimeSet () {
$scope.data.checked = false;
}

function inputOnTimeSet(newDate) {
function inputOnTimeSet (newDate) {
// If you are not using jQuery or bootstrap.js,
// this will throw an error.
// However, can write this function to take any
Expand All @@ -74,33 +78,33 @@
$('#dropdown3').dropdown('toggle');
}

function getLocale() {
function getLocale () {
return moment.locale();
}

function setLocale(newLocale) {
function setLocale (newLocale) {
moment.locale(newLocale);
}

function guardianOnSetTime($index, guardian, newDate, oldDate) {
function guardianOnSetTime ($index, guardian, newDate, oldDate) {
$log.info($index);
$log.info(guardian.name);
$log.info(newDate);
$log.info(oldDate);
angular.element('#guardian' + $index).dropdown('toggle');
}

function beforeRender($dates) {
function beforeRender ($dates) {
var index = Math.ceil($dates.length / 2);
$log.info(index);
$dates[index].selectable = false;
}

function configFunction() {
function configFunction () {
return {startView: 'month'};
}

function changeConfig() {
function changeConfig () {
var newIndex = validViews.indexOf($scope.config.configureOnConfig.startView) + 1;
console.log(newIndex);
if (newIndex >= validViews.length) {
Expand All @@ -110,17 +114,49 @@
$scope.$broadcast('config-changed');
}

function renderOnBeforeRender($dates) {
function renderOnBeforeRender ($dates) {
angular.forEach($dates, function (dateObject) {
dateObject.selectable = selectable;
});
}

function renderOnClick() {
function renderOnClick () {
selectable = (!selectable);
$scope.$broadcast('valid-dates-changed');
}

}
function startDateOnSetTime () {
selectable = (!selectable);
$scope.$broadcast('start-date-changed');
}

function endDateOnSetTime () {
selectable = (!selectable);
$scope.$broadcast('end-date-changed');
}

function startDateBeforeRender ($dates) {
if ($scope.dateRangeEnd) {
var activeDate = moment($scope.dateRangeEnd);

$dates.filter(function (date) {
return date.localDateValue() >= activeDate.valueOf()
}).forEach(function (date) {
date.selectable = false;
})
}
}

function endDateBeforeRender ($view, $dates) {
if ($scope.dateRangeStart) {
var activeDate = moment($scope.dateRangeStart).subtract(1, $view).add(1, 'minute');

$dates.filter(function (date) {
return date.localDateValue() <= activeDate.valueOf()
}).forEach(function (date) {
date.selectable = false;
})
}
}
}
})();
73 changes: 68 additions & 5 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,8 @@ <h4>No formatting</h4>
</div>
<div class="col-sm-6">
<h3>Drop-down Datetime with input box</h3>
<h4>Localized formatting using <a href="https://github.com/dalelotts/angular-date-time-input"><code>angular-date-time-input</code></a> directive</h4>
<h4>Localized formatting using <a href="https://github.com/dalelotts/angular-date-time-input"><code>angular-date-time-input</code></a>
directive</h4>

<p>Notice that you CAN enter a date with the keyboard.</p>

Expand All @@ -90,7 +91,8 @@ <h4>Localized formatting using <a href="https://github.com/dalelotts/angular-dat
<a class="dropdown-toggle" id="dropdown2" role="button" data-toggle="dropdown" data-target="#"
href="#">
<div class="input-group">
<input type="text" class="form-control" data-ng-model="data.dateDropDownInput" data-date-time-input="YYYY-MM-DD HH:mm a">
<input type="text" class="form-control" data-ng-model="data.dateDropDownInput"
data-date-time-input="YYYY-MM-DD HH:mm a">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</a>
Expand Down Expand Up @@ -355,7 +357,9 @@ <h4>Every time you click the button, the startView is changed</h4>

<p><code>configureOn: 'config-changed'</code> to cause the directive to re-read its configuration.</p>

<p><button class="btn btn-default" data-ng-click="changeConfig()">Click me to change startView</button></p>
<p>
<button class="btn btn-default" data-ng-click="changeConfig()">Click me to change startView</button>
</p>

<div class="well">
<p>Start View: {{ config.configureOnConfig.startView }}</p>
Expand All @@ -372,7 +376,9 @@ <h4>Every time you click the button, the selectable attribute is toggled.</h4>

<p><code>renderOn: 'valid-dates-changed'</code> to cause the directive to re-render.</p>

<p><button class="btn btn-default" data-ng-click="renderOnClick()">Click me to re-render</button></p>
<p>
<button class="btn btn-default" data-ng-click="renderOnClick()">Click me to re-render</button>
</p>

<div class="well">

Expand All @@ -384,8 +390,65 @@ <h4>Every time you click the button, the selectable attribute is toggled.</h4>
</div>

</div>
</div>

<div class="row">
<div class="col-sm-6">
<h3>Date range picker</h3>
<h4>Every time you select a start date, dates before the start date are disabled in the end date.</h4>

<p>This is a little more complex than the other examples.</p>
<p><strong>Start Date:</strong> <code>renderOn: 'end-date-changed'</code> to cause the directive to re-render when the end date changes,
and <code>data-on-set-time="startDateOnSetTime()"</code> to broadcast when the start date changes,
and finally <code>data-before-render="beforeRenderStartDate($dates)"</code>
to disable the dates after the selected end date.</p>

<p><strong>End Date:</strong> <code>renderOn: 'start-date-changed'</code> to cause the directive to re-render when the start date changes,
and <code>data-on-set-time="endDateOnSetTime()"</code> to broadcast when the end date changes,
and finally <code>data-before-render="beforeRenderEndDate($view, $dates, $leftDate, $upDate, $rightDate)"</code>
to disable the dates before the selected start date.</p>

<p>NB: It is possible that data coming from the server (or via a defect in the controller) that the start date is after the end date.
To allow the user to get themselves out of this situation, your implementation might not disable any dates if the start date is greater than the end date.
</p>

<div class="well">
<div class="dropdown form-group">
<label for="dateRangeStart">Start Date</label>
<a class="dropdown-toggle" id="dropdownStart" role="button" data-toggle="dropdown" data-target="#"
href="#">
<div class="input-group date">
<input id="dateRangeStart" type="text" class="form-control" data-ng-model="dateRangeStart">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker data-ng-model="dateRangeStart"
data-datetimepicker-config="{ dropdownSelector: '#dropdownStart', renderOn: 'end-date-changed' }"
data-on-set-time="startDateOnSetTime()"
data-before-render="startDateBeforeRender($dates)"></datetimepicker>
</ul>
</div>

<div class="dropdown form-group">
<label for="dateRangeStart">End Date</label>
<a class="dropdown-toggle" id="dropdownEnd" role="button" data-toggle="dropdown" data-target="#"
href="#">
<div class="input-group date">
<input type="text" class="form-control" data-ng-model="dateRangeEnd">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker data-ng-model="dateRangeEnd"
data-datetimepicker-config="{ dropdownSelector: '#dropdownEnd', renderOn: 'start-date-changed' }"
data-on-set-time="endDateOnSetTime()"
data-before-render="endDateBeforeRender($view, $dates, $leftDate, $upDate, $rightDate)"></datetimepicker>
</ul>
</div>
</div>
</div>
</div>
</div>

</body>
</html>

0 comments on commit 9c3d569

Please sign in to comment.