1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
| /**
| * Created by jeong on 2018-01-13.
| */
| 'use strict';
|
| define(['app',
| 'angular'],
| function (app, angular) {
|
| app.directive('dateRangePicker', ["$log", "$rootScope", "$translate",
| function ($log, $rootScope, $translate) {
| return {
| restrict: 'A',
| scope: {
| ngModel: "=",
| parentEl : "="
| },
| controller: function ($scope, $element, $attrs) {
| $scope.fn = {
| makeDateRangePicker : makeDateRangePicker
| };
|
| // 마일스톤에서 프로젝트 기간 내에서만 날짜를 선택할 수 있도록 해주는 기능
| $scope.$on("makeDateRangePicker", function (event, args) {
| $($element).empty();
|
| $scope.fn.makeDateRangePicker($translate.use(), args.startDate, args.endDate);
| });
|
| // 언어 변경시 새로 고침
| $scope.$on("languageChange", function (event, args) {
| $scope.fn.makeDateRangePicker(args.language);
| });
|
| function makeDateRangePicker(language, minDate, maxDate) {
|
| var options = {
| applyLabel : "",
| cancelLabel : "",
| daysOfWeek : [],
| monthNames : []
| };
|
| switch(language) {
| case "ko" :
| options.applyLabel = "적용";
| options.cancelLabel = "취소";
| options.daysOfWeek = ["일", "월", "화", "수", "목", "금", "토"];
| options.monthNames = ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"];
| break;
| case "en" :
| options.applyLabel = "Apply";
| options.cancelLabel = "Cancel";
| options.daysOfWeek = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
| options.monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
| break;
| }
| if (angular.isDefined($attrs["rangeType"])) {
| if ($attrs["rangeType"] === "date")
| {
| $($element).daterangepicker({
| timePicker: false,
| autoUpdateInput: true,
| autoApply: true,
| minDate: minDate,
| maxDate: maxDate,
| parentEl: $scope.parentEl !== undefined ? $scope.parentEl : "body",
| locale: {
| format: 'YYYY-MM-DD',
| separator: " ~ ",
| applyLabel: options.applyLabel,
| cancelLabel: options.cancelLabel,
| daysOfWeek: options.daysOfWeek,
| monthNames: options.monthNames
| },
| opens: "center"
| });
| } else if ($attrs["rangeType"] === "singleDate") {
| $($element).daterangepicker({
| timePicker: true,
| timePicker24Hour : true,
| timePickerSeconds : true,
| autoUpdateInput: true,
| autoApply : true,
| singleDatePicker : true,
| isSingle : true,
|
| //parentEl : $scope.parentEl !== undefined ? $scope.parentEl : "",
| locale: {
| format: 'YYYY-MM-DD HH:mm:ss',
| separator: "~",
| applyLabel: options.applyLabel,
| cancelLabel: options.cancelLabel,
| daysOfWeek: options.daysOfWeek,
| monthNames: options.monthNames
| },
| opens : "center"
| });
| // singleDate 취소 버튼 (값 초기화)
| $($element).on('cancel.daterangepicker', function(ev, picker) {
| $scope.ngModel = "";
| });
| } else if ($attrs["rangeType"] === "multiDate") {
| $($element).daterangepicker({
| timePicker: true,
| timePicker24Hour : true,
| timePickerSeconds : true,
| autoUpdateInput: true,
| autoApply : true,
| singleDatePicker : false,
| isSingle : false,
|
| //parentEl : $scope.parentEl !== undefined ? $scope.parentEl : "",
| locale: {
| format: 'YYYY-MM-DD HH:mm:ss',
| separator: "~",
| applyLabel: options.applyLabel,
| cancelLabel: options.cancelLabel,
| daysOfWeek: options.daysOfWeek,
| monthNames: options.monthNames
| },
| opens : "center"
| });
| // singleDate 취소 버튼 (값 초기화)
| $($element).on('cancel.daterangepicker', function(ev, picker) {
| $scope.ngModel = "";
| });
| }
| }
| else {
| $($element).daterangepicker({
| timePicker: false,
| autoUpdateInput: false,
| autoApply : false,
| parentEl : $scope.parentEl !== undefined ? $scope.parentEl : "body",
| locale: {
| format: $attrs["dateFormat"], // 'YY-MM-DD HH:mm'
| separator: " ~ ",
| applyLabel: options.applyLabel,
| cancelLabel: options.cancelLabel,
| daysOfWeek: options.daysOfWeek,
| monthNames: options.monthNames
| },
| opens : "center"
| });
|
| $($element).on('apply.daterangepicker', function(ev, picker) {
| $scope.ngModel = picker.startDate.format($attrs["dateFormat"]) + ' ~ ' + picker.endDate.format($attrs["dateFormat"]);
| });
|
| $($element).on('cancel.daterangepicker', function(ev, picker) {
| $scope.ngModel = "";
| });
| }
| }
|
| $scope.fn.makeDateRangePicker($translate.use());
| },
| link: function (scope, element, attrs) {
|
|
| }
| }
| }])
| });
|
|
