Skip to content
This repository was archived by the owner on Mar 9, 2022. It is now read-only.

Commit 96d6b6c

Browse files
jfmcodejfmcode
committed
Change how attributes are processed for add support to form validation
1 parent c35f2e7 commit 96d6b6c

File tree

5 files changed

+86
-31
lines changed

5 files changed

+86
-31
lines changed

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ngComboDatePicker",
3-
"version": "1.2.4",
3+
"version": "1.2.5",
44
"authors": [
55
"jfmdev <[email protected]>"
66
],

‎demo/index.html‎

Lines changed: 53 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ <h2>Basic example</h2>
2828
</script>
2929
<div ng-controller="basicCtrl">
3030
<p>Choose a date: <ng-combo-date-picker ng-model="basic"></ng-combo-date-picker></p>
31-
<p>Current selection is: <strong>{{ basic }}</strong>
31+
<p>Current selection is: <strong>{{ basic }}</strong><p/>
3232
</div>
3333

3434

@@ -40,7 +40,7 @@ <h2>Change order of combo boxes</h2>
4040
</script>
4141
<div ng-controller="changeOrderCtrl">
4242
<p>Choose a date: <ng-combo-date-picker ng-model="change" ng-order="ymd"></ng-combo-date-picker></p>
43-
<p>Current selection is: <strong>{{ change }}</strong>
43+
<p>Current selection is: <strong>{{ change }}</strong><p/>
4444
</div>
4545

4646

@@ -55,27 +55,27 @@ <h3>To fixed value</h3>
5555
</script>
5656
<div ng-controller="setInitialCtrl">
5757
<p>Choose a date: <ng-combo-date-picker ng-model="fixed" ng-date="1956-07-10"></ng-combo-date-picker></p>
58-
<p>Current selection is: <strong>{{ fixed }}</strong>
58+
<p>Current selection is: <strong>{{ fixed }}</strong><p/>
5959
</div>
6060

6161

6262
<h3>To dynamic value</h3>
6363
<script type="text/javascript">
6464
app.controller('toDynamicCtrl', function ($scope) {
6565
var now = new Date();
66-
$scope.init = new Date(now.getTime() + 365*24*60*60*1000);
66+
$scope.init = new Date(now.getTime() - 365*24*60*60*1000);
6767
});
6868
</script>
6969
<div ng-controller="toDynamicCtrl">
7070
<p>Choose a date: <ng-combo-date-picker ng-model="dynamic" ng-date="{{ init.toString() }}"></ng-combo-date-picker></p>
71-
<p>Current selection is: <strong>{{ dynamic }}</strong>
71+
<p>Current selection is: <strong>{{ dynamic }}</strong><p/>
7272
</div>
7373

7474

7575
<h3>To empty value</h3>
7676
<div>
7777
<p>Choose a date: <ng-combo-date-picker ng-model="emptyDate"></ng-combo-date-picker></p>
78-
<p>Current selection is: <strong>{{ emptyDate }}</strong>
78+
<p>Current selection is: <strong>{{ emptyDate }}</strong><p/>
7979
</div>
8080

8181

@@ -87,7 +87,7 @@ <h2>Define minimum and maximum dates</h2>
8787
</script>
8888
<div ng-controller="minAndMaxCtrl">
8989
<p>Choose a date: <ng-combo-date-picker ng-model="range" ng-min-date="1800-01-01" ng-max-date="1900-12-31"></ng-combo-date-picker></p>
90-
<p>Current selection is: <strong>{{ range }}</strong>
90+
<p>Current selection is: <strong>{{ range }}</strong><p/>
9191
</div>
9292

9393

@@ -99,7 +99,7 @@ <h2>Change strings for months</h2>
9999
</script>
100100
<div ng-controller="monthStringsCtrl">
101101
<p>Choose a date: <ng-combo-date-picker ng-model="names" ng-months="Enero,Febrero,Marzo,Abril,Mayo,Junio,Julio,Agosto,Septiembre,Octubre,Noviembre,Diciembre"></ng-combo-date-picker></p>
102-
<p>Current selection is: <strong>{{ names }}</strong>
102+
<p>Current selection is: <strong>{{ names }}</strong><p/>
103103
</div>
104104

105105

@@ -111,7 +111,7 @@ <h2>Define attributtes</h2>
111111
</script>
112112
<div ng-controller="attributesCtrl">
113113
<p>Choose a date: <ng-combo-date-picker ng-model="attrs" ng-attrs-date='{"style": "color:red"}' ng-attrs-month='{"style": "color:green"}' ng-attrs-year='{"style": "color:blue"}'></ng-combo-date-picker></p>
114-
<p>Current selection is: <strong>{{ attrs }}</strong>
114+
<p>Current selection is: <strong>{{ attrs }}</strong><p/>
115115
</div>
116116

117117

@@ -123,26 +123,63 @@ <h2>Change years order</h2>
123123
</script>
124124
<div ng-controller="yearsOrderCtrl">
125125
<p>Choose a date: <ng-combo-date-picker ng-model="yearsOrder" ng-year-order="desc"></ng-combo-date-picker></p>
126-
<p>Current selection is: <strong>{{ yearsOrder }}</strong>
126+
<p>Current selection is: <strong>{{ yearsOrder }}</strong><p/>
127127
</div>
128128

129129

130130
<h2>Timezones</h2>
131131
<div>
132132
<p>Choose a date: <ng-combo-date-picker ng-model="timezone1" ng-date="2000-01-01" ng-timezone="-20"></ng-combo-date-picker></p>
133-
<p>Current selection is: <strong>{{ timezone1 }}</strong>
133+
<p>Current selection is: <strong>{{ timezone1 }}</strong><p/>
134134
<p>Choose a date: <ng-combo-date-picker ng-model="timezone2" ng-date="2000-01-01" ng-timezone="20"></ng-combo-date-picker></p>
135-
<p>Current selection is: <strong>{{ timezone2 }}</strong>
135+
<p>Current selection is: <strong>{{ timezone2 }}</strong><p/>
136136
<p>Choose a date: <ng-combo-date-picker ng-model="timezone3" ng-date="2000-01-01" ng-timezone="10.5"></ng-combo-date-picker></p>
137-
<p>Current selection is: <strong>{{ timezone3 }}</strong>
137+
<p>Current selection is: <strong>{{ timezone3 }}</strong><p/>
138138
</div>
139139

140140

141141
<h2>Place holders</h2>
142142
<div>
143143
<p>Choose a date: <ng-combo-date-picker ng-model="placeholder" ng-placeholder="Select year,Select month,Select date"></ng-combo-date-picker></p>
144-
<p>Current selection is: <strong>{{ placeholder }}</strong>
145-
</div>
146-
</div>
144+
<p>Current selection is: <strong>{{ placeholder }}</strong><p/>
145+
</div>
146+
147+
<h2>Form validation</h2>
148+
<script type="text/javascript">
149+
app.controller('formValidationCtrl', function ($scope) {
150+
151+
});
152+
</script>
153+
<div ng-controller="formValidationCtrl">
154+
<form name="myForm" novalidate>
155+
<p>Choose a date: <ng-combo-date-picker ng-model="formv" ng-attrs-date='{"name": "formv_date", "required": true}' ng-attrs-month='{"name": "formv_month", "required": true}' ng-attrs-year='{"name": "formv_year", "required": true}'></ng-combo-date-picker></p>
156+
<p>Current selection is: <strong>{{ formv }}</strong></p>
157+
<p>Form is valid: <strong>{{ myForm.$invalid? 'No' : 'Yes' }}</strong></p>
158+
<table>
159+
<tr>
160+
<th>Field</th>
161+
<th>Pristine</th>
162+
<th>Dirty</th>
163+
</tr>
164+
<tr>
165+
<td>Date</td>
166+
<td>{{ myForm.formv_date.$pristine? 'Yes' : 'No' }}</td>
167+
<td>{{ myForm.formv_date.$dirty? 'Yes' : 'No' }}</td>
168+
</tr>
169+
<tr>
170+
<td>Month</td>
171+
<td>{{ myForm.formv_month.$pristine? 'Yes' : 'No' }}</td>
172+
<td>{{ myForm.formv_month.$dirty? 'Yes' : 'No' }}</td>
173+
</tr>
174+
<tr>
175+
<td>Year</td>
176+
<td>{{ myForm.formv_year.$pristine? 'Yes' : 'No' }}</td>
177+
<td>{{ myForm.formv_year.$dirty? 'Yes' : 'No' }}</td>
178+
</tr>
179+
</table>
180+
</form>
181+
</div>
182+
183+
</div>
147184
</body>
148185
</html>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ng-combo-date-picker",
3-
"version": "1.2.4",
3+
"version": "1.2.5",
44
"description": "An Angular directive to select dates using combo boxes",
55
"main": "source/ngComboDatePicker.js",
66
"scripts": {

‎source/ngComboDatePicker.js‎

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* ngComboDatePicker v1.2.4
2+
* ngComboDatePicker v1.2.5
33
* http://github.com/jfmdev/ngComboDatePicker
44
* «Copyright 2015 Jose F. Maldonado»
55
* License: LGPLv3 (http://www.gnu.org/licenses/lgpl-3.0.html)
@@ -104,7 +104,7 @@ angular.module("ngComboDatePicker", [])
104104
}
105105
$scope.maxDate = parseDate($scope.ngMaxDate, $scope.ngTimezone);
106106
if($scope.maxDate == null) {
107-
$scope.maxDate = new Date();
107+
$scope.maxDate = new Date();
108108
}
109109

110110
// Verify if selected date is in the valid range.
@@ -250,23 +250,41 @@ angular.module("ngComboDatePicker", [])
250250
var children = jqLite(element[0]).children();
251251
var order = scope.ngOrder.split('');
252252

253-
// Add attributes.
254-
if(scope.ngAttrsDate != null) jqLite(children[0]).attr( scope.ngAttrsDate );
255-
if(scope.ngAttrsMonth != null) jqLite(children[1]).attr( scope.ngAttrsMonth );
256-
if(scope.ngAttrsYear != null) jqLite(children[2]).attr( scope.ngAttrsYear );
257-
258253
// Reorder elements.
259254
for(var i=0; i<order.length; i++) {
260255
if(order[i] == 'd') jqLite(element[0]).append(children[0]);
261256
if(order[i] == 'm') jqLite(element[0]).append(children[1]);
262257
if(order[i] == 'y') jqLite(element[0]).append(children[2]);
263258
}
264259
},
265-
template: function() {
260+
template: function(element, attrs) {
261+
// Verify if addtional attributes were defined.
262+
var strAttrs = ['', '', ''];
263+
var attrNames = ['ngAttrsDate', 'ngAttrsMonth', 'ngAttrsYear'];
264+
for(var i=0; i<3; i++) {
265+
try{
266+
// Verify if the attributes were defined.
267+
if(attrs && attrs[attrNames[i]]) {
268+
// Iterate over each attribute.
269+
eval("var attrsAux= " + attrs[attrNames[i]]);
270+
for(var key in attrsAux) {
271+
var value = attrsAux[key];
272+
if(typeof value == "boolean") {
273+
if(value) strAttrs[i] += key + ' ';
274+
} else {
275+
if(typeof value == "string" && value.indexOf('"') > 0) { value = value.replace(/"/g, '&quot;'); }
276+
strAttrs[i] += key + '="' + value + '" ';
277+
}
278+
}
279+
}
280+
}catch(err){console.log(err);}
281+
}
282+
283+
// Generate HTML code.
266284
var html =
267-
'<select ng-model="date" ng-change="onChange(\'date\')" ng-options="date.value as date.name disable when date.disabled for date in dates"></select>' +
268-
'<select ng-model="month" ng-change="onChange(\'month\')" ng-options="month.value as month.name disable when month.disabled for month in months"></select>' +
269-
'<select ng-model="year" ng-change="onChange(\'year\')" ng-options="year.value as year.name disable when year.disabled for year in years"></select>'
285+
'<select ng-model="date" '+strAttrs[0]+' ng-change="onChange(\'date\')" ng-options="date.value as date.name disable when date.disabled for date in dates"></select>' +
286+
'<select ng-model="month" '+strAttrs[1]+' ng-change="onChange(\'month\')" ng-options="month.value as month.name disable when month.disabled for month in months"></select>' +
287+
'<select ng-model="year" '+strAttrs[2]+' ng-change="onChange(\'year\')" ng-options="year.value as year.name disable when year.disabled for year in years"></select>'
270288
;
271289

272290
return html;

0 commit comments

Comments
 (0)