@@ -45,13 +47,20 @@ angular.module("dateRangePicker").directive "dateRangePicker", ["$compile", ($co
replace: true
template: """
- {{ model.start.format("ll") }} - {{ model.end.format("ll") }}
- Select date range
+
+ {{ model.start.format("ll") }} - {{ model.end.format("ll") }}
+ Select date range
+
+
+ {{ model.format("ll") }}
+ Select date
+
"""
scope:
model: "=ngModel" # can't use ngModelController, we need isolated scope
customSelectOptions: "="
+ ranged: "="
link: ($scope, element, attrs) ->
$scope.quickListDefinitions = $scope.customSelectOptions
@@ -97,25 +106,38 @@ angular.module("dateRangePicker").directive "dateRangePicker", ["$compile", ($co
$scope.selecting = false
$scope.visible = false
$scope.start = null
+ # Backward compatibility - if $scope.ranged is not set in the html, it displays normal date range picker.
+ $scope.showRanged = if $scope.ranged == undefined then true else $scope.ranged
_makeQuickList = (includeCustom = false) ->
+ return unless $scope.showRanged
$scope.quickList = []
$scope.quickList.push(label: "Custom", range: CUSTOM) if includeCustom
for e in $scope.quickListDefinitions
$scope.quickList.push(e)
_calculateRange = () ->
- $scope.range = if $scope.selection
- start = $scope.selection.start.clone().startOf("month").startOf("day")
- end = start.clone().add(2, "months").endOf("month").startOf("day")
- moment().range(start, end)
+ if $scope.showRanged
+ $scope.range = if $scope.selection
+ start = $scope.selection.start.clone().startOf("month").startOf("day")
+ end = start.clone().add(2, "months").endOf("month").startOf("day")
+ moment().range(start, end)
+ else
+ moment().range(
+ moment().startOf("month").subtract(1, "month").startOf("day"),
+ moment().endOf("month").add(1, "month").startOf("day")
+ )
else
- moment().range(
- moment().startOf("month").subtract(1, "month").startOf("day"),
- moment().endOf("month").add(1, "month").startOf("day")
+ $scope.selection = false
+ $scope.selection = $scope.model || false
+ $scope.date = $scope.model || moment()
+ $scope.range = moment().range(
+ moment($scope.date).startOf("month"),
+ moment($scope.date).endOf("month")
)
_checkQuickList = () ->
+ return unless $scope.showRanged
return unless $scope.selection
for e in $scope.quickList
if e.range != CUSTOM and $scope.selection.start.startOf("day").unix() == e.range.start.startOf("day").unix() and
@@ -142,11 +164,14 @@ angular.module("dateRangePicker").directive "dateRangePicker", ["$compile", ($co
sel = false
dis = false
- if $scope.start
- sel = date == $scope.start
- dis = date < $scope.start
+ if $scope.showRanged
+ if $scope.start
+ sel = date == $scope.start
+ dis = date < $scope.start
+ else
+ sel = $scope.selection && $scope.selection.contains(date)
else
- sel = $scope.selection && $scope.selection.contains(date)
+ sel = date.isSame($scope.selection)
$scope.months[m] ||= {name: date.format("MMMM YYYY"), weeks: []}
$scope.months[m].weeks[w] ||= []
@@ -187,22 +212,33 @@ angular.module("dateRangePicker").directive "dateRangePicker", ["$compile", ($co
$event?.stopPropagation?()
return if day.disabled
- $scope.selecting = !$scope.selecting
+ if $scope.showRanged
+ $scope.selecting = !$scope.selecting
- if $scope.selecting
- $scope.start = day.date
- _prepare()
+ if $scope.selecting
+ $scope.start = day.date
+ else
+ $scope.selection = moment().range($scope.start, day.date)
+ $scope.start = null
else
- $scope.selection = moment().range($scope.start, day.date)
- $scope.start = null
- _prepare()
+ $scope.selection = day.date
+
+ _prepare()
$scope.move = (n, $event) ->
$event?.stopPropagation?()
- $scope.range = moment().range(
- $scope.range.start.add(n, 'months').startOf("month").startOf("day"),
- $scope.range.start.clone().add(2, "months").endOf("month").startOf("day")
- )
+ if $scope.showRanged
+ $scope.range = moment().range(
+ $scope.range.start.add(n, 'months').startOf("month").startOf("day"),
+ $scope.range.start.clone().add(2, "months").endOf("month").startOf("day")
+ )
+ else
+ $scope.date = moment().month($scope.date.month() + n)
+ $scope.range = moment().range(
+ moment($scope.date).startOf("month"),
+ moment($scope.date).endOf("month")
+ )
+
_prepare()
$scope.handlePickerClick = ($event) ->
@@ -217,6 +253,7 @@ angular.module("dateRangePicker").directive "dateRangePicker", ["$compile", ($co
_prepare()
$scope.$watch "customSelectOptions", (value) ->
+ return unless customSelectOptions?
$scope.quickListDefinitions = value
# create DOM and bind event
diff --git a/src/angular-date-range-picker.less b/src/angular-date-range-picker.less
index 9011305..aef1518 100644
--- a/src/angular-date-range-picker.less
+++ b/src/angular-date-range-picker.less
@@ -94,14 +94,18 @@
position: absolute;
top: 30px;
left: -1px;
- width: 700px;
overflow: hidden;
- height: 183px;
background: #fff;
z-index: 1000;
border: 1px solid #ccc;
box-sizing: content-box;
}
+
+.angular-date-range-picker--ranged {
+ width: 700px;
+ height: 183px;
+}
+
.angular-date-range-picker__calendar-day:hover {
background: #000;
color: #fff;
@@ -130,7 +134,7 @@
color: #000;
cursor: pointer;
}
-.angular-date-range-picker__buttons {
+.angular-date-range-picker--ranged .angular-date-range-picker__buttons {
position: absolute;
bottom: 10px;
}
diff --git a/test/index.html b/test/index.html
index 58d3ef5..8ca9c85 100644
--- a/test/index.html
+++ b/test/index.html
@@ -15,6 +15,8 @@
$scope.change = function(){
$scope.range2 = moment().range("2012-11-15", "2012-12-25")
}
+
+ $scope.date = null
})
@@ -27,10 +29,17 @@
-
-
{{ range.start.toDate() }} - {{ range.end.toDate() }}
-
-
+
+
Date range picker
+
+
{{ range.start.toDate() }} - {{ range.end.toDate() }}
+
+
+
+
+
Simple date picker
+
+