Skip to content

Commit 472acd7

Browse files
author
Lukáš Marek
committed
Initial commit
0 parents  commit 472acd7

10 files changed

+460
-0
lines changed

.bowerrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"directory": "lib"
3+
}

.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
lib
2+
node_modules

Gruntfile.coffee

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
module.exports = (grunt) ->
2+
3+
# Project configuration.
4+
grunt.initConfig
5+
pkg: grunt.file.readJSON("package.json")
6+
7+
coffee:
8+
compileJoined:
9+
options:
10+
join: true
11+
files:
12+
'js/daterangepicker.js': ['coffee/daterangepicker.coffee']
13+
14+
watch:
15+
files: ['index.html', 'coffee/*.coffee']
16+
tasks: ['coffee']
17+
18+
uglify:
19+
options:
20+
sourceMap: true
21+
target:
22+
files:
23+
'js/daterangepicker.min.js': ['js/daterangepicker.js']
24+
25+
26+
grunt.loadNpmTasks("grunt-contrib-coffee")
27+
grunt.loadNpmTasks("grunt-contrib-watch")
28+
grunt.loadNpmTasks('grunt-contrib-uglify');
29+
30+
# Default task(s).
31+
grunt.registerTask "default", ["coffee"]
32+
grunt.registerTask "develop", ["coffee", "watch"]
33+
grunt.registerTask "dist", ["coffee", "uglify"]

bower.json

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "angular-daterangepicker",
3+
"version": "0.1.0",
4+
"homepage": "TODO",
5+
"authors": [
6+
"Filip Vařecha <[email protected]>",
7+
"Lukáš Marek <[email protected]>"
8+
],
9+
"description": "Angular.js wrapper for Dan Grosmann's bootstrap date range picker (https://github.com/dangrossman/bootstrap-daterangepicker).",
10+
"license": "Apache",
11+
"private": false,
12+
"ignore": [
13+
"**/.*",
14+
"node_modules",
15+
"bower_components",
16+
"test",
17+
"tests"
18+
],
19+
"dependencies": {
20+
"angular": "1.2.10",
21+
"bootstrap": "~v3.0.0",
22+
"bootstrap-daterangepicker": "~1.3.2",
23+
"underscore": "~1.6.0"
24+
},
25+
"devDependencies": {
26+
"angular-mocks": "1.2.10"
27+
}
28+
}

coffee/daterangepicker.coffee

+146
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
picker = angular.module('daterangepicker', [])
2+
3+
picker.directive('dateRangePicker', ['$compile', '$timeout', ($compile, $timeout) ->
4+
require: 'ngModel'
5+
restrict: 'A'
6+
scope:
7+
dateMin: '=min'
8+
dateMax: '=max'
9+
opts: '=options'
10+
link: ($scope, element, attrs, modelCtrl) ->
11+
el = $(element)
12+
required = _.has(attrs, 'required')
13+
defaults = {separator: ' - ', format: 'YYYY-MM-DD'}
14+
15+
opts = angular.copy(defaults)
16+
17+
_formatted = (viewVal) ->
18+
f = (date) ->
19+
if not moment.isMoment(date)
20+
return moment(date).format(opts.format)
21+
return date.format(opts.format)
22+
23+
[f(viewVal.startDate), f(viewVal.endDate)].join(opts.separator)
24+
25+
_validateMin = (min, start) ->
26+
min = moment(min)
27+
start = moment(start)
28+
valid = min.isBefore(start) or min.isSame(start, 'day')
29+
modelCtrl.$setValidity('min', valid)
30+
return valid
31+
32+
_validateMax = (max, end) ->
33+
max = moment(max)
34+
end = moment(end)
35+
valid = max.isAfter(end) or max.isSame(end, 'day')
36+
modelCtrl.$setValidity('max', valid)
37+
return valid
38+
39+
modelCtrl.$formatters.unshift((val) ->
40+
if val and val.startDate and val.endDate
41+
# Update datepicker dates according to val before rendering.
42+
picker = _getPicker()
43+
picker.setStartDate(val.startDate)
44+
picker.setEndDate(val.endDate)
45+
return val
46+
return ''
47+
)
48+
49+
modelCtrl.$parsers.unshift((val) ->
50+
# Check if input is invalid.
51+
if not _.isObject(val) or not (_.has(val, 'startDate') and _.has(val, 'endDate'))
52+
return modelCtrl.$modelValue
53+
54+
# If min-max set, validate as well.
55+
if $scope.dateMin and val.startDate
56+
_validateMin($scope.dateMin, val.startDate)
57+
else
58+
modelCtrl.$setValidity('min', true)
59+
60+
if $scope.dateMax and val.endDate
61+
_validateMax($scope.dateMax, val.endDate)
62+
else
63+
modelCtrl.$setValidity('max', true)
64+
65+
return val
66+
)
67+
68+
modelCtrl.$isEmpty = (val) ->
69+
# modelCtrl is empty if val is invalid or any of the ranges are not set.
70+
not val or (val.startDate == null or val.endDate == null)
71+
72+
modelCtrl.$render = ->
73+
if not modelCtrl.$viewValue
74+
return el.val('')
75+
76+
if modelCtrl.$viewValue.startDate == null
77+
return el.val('')
78+
79+
return el.val(_formatted(modelCtrl.$viewValue))
80+
81+
82+
_init = ->
83+
el.daterangepicker(opts)
84+
_getPicker = ->
85+
el.data('daterangepicker')
86+
87+
_init()
88+
89+
el.on('apply', (ev, picker) ->
90+
$timeout(->
91+
$scope.$apply(->
92+
modelCtrl.$setViewValue(
93+
startDate: picker.startDate.toDate()
94+
endDate: picker.endDate.toDate()
95+
)
96+
modelCtrl.$render()
97+
))
98+
)
99+
100+
# If input is cleared manually, set dates to null.
101+
el.change(() ->
102+
if $.trim(el.val()) == ''
103+
$timeout(->
104+
$scope.$apply(->
105+
modelCtrl.$setViewValue(
106+
startDate: null
107+
endDate: null
108+
)
109+
))
110+
)
111+
112+
if attrs.min
113+
$scope.$watch('dateMin', (date) ->
114+
if date
115+
if not modelCtrl.$isEmpty(modelCtrl.$viewValue)
116+
_validateMin(date, modelCtrl.$viewValue.startDate)
117+
118+
opts['minDate'] = moment(date)
119+
else
120+
opts['minDate'] = false
121+
_init()
122+
)
123+
124+
if attrs.max
125+
$scope.$watch('dateMax', (date) ->
126+
if date
127+
if not modelCtrl.$isEmpty(modelCtrl.$viewValue)
128+
_validateMax(date, modelCtrl.$viewValue.endDate)
129+
130+
opts['maxDate'] = moment(date)
131+
else
132+
opts['maxDate'] = false
133+
134+
_init()
135+
)
136+
137+
if attrs.options
138+
$scope.$watch('opts', (newOpts) ->
139+
opts = angular.extend(opts, newOpts)
140+
_init()
141+
)
142+
])
143+
144+
145+
146+

example.html

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Daterange picker example</title>
7+
<script src="lib/angular/angular.js"></script>
8+
<script src="lib/jquery/jquery.js"></script>
9+
<script src="lib/underscore/underscore.js"></script>
10+
<!-- TODO Remove dependency -->
11+
<script src="lib/momentjs/moment.js"></script>
12+
<script src="lib/bootstrap-daterangepicker/daterangepicker.js"></script>
13+
<script src="js/daterangepicker.js"></script>
14+
15+
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css"/>
16+
<link rel="stylesheet" href="lib/bootstrap-daterangepicker/daterangepicker-bs3.css"/>
17+
</head>
18+
19+
<body>
20+
<div class="container">
21+
<h1>Daterange picker example</h1>
22+
23+
<div class="row">
24+
<div class="col-md-6" ng-controller="TestCtrl">
25+
<form class="form-horizontal">
26+
<div class="form-group">
27+
<label for="daterange1" class="control-label">Simple picker</label>
28+
<input date-range-picker id="daterange1" class="form-control date-picker" type="text"
29+
name="date" ng-model="date" required/>
30+
</div>
31+
<div class="form-group">
32+
<label for="daterange2" class="control-label">Picker with min and max date</label>
33+
<input date-range-picker id="daterange2" class="form-control date-picker" type="text"
34+
min="'2014-02-23'" max="'2015-02-25'" name="date" ng-model="date"
35+
required/>
36+
</div>
37+
<div class="form-group">
38+
<label for="daterange3" class="control-label">Picker with custom locale</label>
39+
<input date-range-picker id="daterange3" class="form-control date-picker" type="text"
40+
name="date" ng-model="date" options="opts" required/>
41+
</div>
42+
</form>
43+
</div>
44+
</div>
45+
</div>
46+
</body>
47+
48+
49+
<script>
50+
exampleApp = angular.module('example', ['daterangepicker'])
51+
exampleApp.controller('TestCtrl', function ($scope) {
52+
$scope.date = {startDate: null, endDate: null};
53+
$scope.opts = {locale: {
54+
applyClass: 'btn-green',
55+
applyLabel: "Použít",
56+
fromLabel: "Od",
57+
toLabel: "Do",
58+
cancelLabel: 'Zrušit',
59+
customRangeLabel: 'Vlastní rozsah',
60+
daysOfWeek: ['Ne', 'Po', 'Út', 'St', 'Čt', 'Pá', 'So'],
61+
firstDay: 1,
62+
monthNames: ['Leden', 'Únor', 'Březen', 'Duben', 'Květen', 'Červen', 'Červenec', 'Srpen', 'Září', 'Říjen', 'Listopad', 'Prosinec']
63+
}};
64+
});
65+
66+
angular.bootstrap(document, ['example'])
67+
</script>
68+
69+
</html>

0 commit comments

Comments
 (0)