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

Commit

Permalink
Change how attributes are processed for add support to form validation
Browse files Browse the repository at this point in the history
  • Loading branch information
@jfmcode
jfmcode committed Dec 1, 2016
1 parent c35f2e7 commit 96d6b6c
Show file tree
Hide file tree
Showing 5 changed files with 86 additions and 31 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ngComboDatePicker",
"version": "1.2.4",
"version": "1.2.5",
"authors": [
"jfmdev <[email protected]>"
],
Expand Down
69 changes: 53 additions & 16 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ <h2>Basic example</h2>
</script>
<div ng-controller="basicCtrl">
<p>Choose a date: <ng-combo-date-picker ng-model="basic"></ng-combo-date-picker></p>
<p>Current selection is: <strong>{{ basic }}</strong>
<p>Current selection is: <strong>{{ basic }}</strong><p/>
</div>


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


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


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


<h3>To empty value</h3>
<div>
<p>Choose a date: <ng-combo-date-picker ng-model="emptyDate"></ng-combo-date-picker></p>
<p>Current selection is: <strong>{{ emptyDate }}</strong>
<p>Current selection is: <strong>{{ emptyDate }}</strong><p/>
</div>


Expand All @@ -87,7 +87,7 @@ <h2>Define minimum and maximum dates</h2>
</script>
<div ng-controller="minAndMaxCtrl">
<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>
<p>Current selection is: <strong>{{ range }}</strong>
<p>Current selection is: <strong>{{ range }}</strong><p/>
</div>


Expand All @@ -99,7 +99,7 @@ <h2>Change strings for months</h2>
</script>
<div ng-controller="monthStringsCtrl">
<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>
<p>Current selection is: <strong>{{ names }}</strong>
<p>Current selection is: <strong>{{ names }}</strong><p/>
</div>


Expand All @@ -111,7 +111,7 @@ <h2>Define attributtes</h2>
</script>
<div ng-controller="attributesCtrl">
<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>
<p>Current selection is: <strong>{{ attrs }}</strong>
<p>Current selection is: <strong>{{ attrs }}</strong><p/>
</div>


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


<h2>Timezones</h2>
<div>
<p>Choose a date: <ng-combo-date-picker ng-model="timezone1" ng-date="2000-01-01" ng-timezone="-20"></ng-combo-date-picker></p>
<p>Current selection is: <strong>{{ timezone1 }}</strong>
<p>Current selection is: <strong>{{ timezone1 }}</strong><p/>
<p>Choose a date: <ng-combo-date-picker ng-model="timezone2" ng-date="2000-01-01" ng-timezone="20"></ng-combo-date-picker></p>
<p>Current selection is: <strong>{{ timezone2 }}</strong>
<p>Current selection is: <strong>{{ timezone2 }}</strong><p/>
<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>
<p>Current selection is: <strong>{{ timezone3 }}</strong>
<p>Current selection is: <strong>{{ timezone3 }}</strong><p/>
</div>


<h2>Place holders</h2>
<div>
<p>Choose a date: <ng-combo-date-picker ng-model="placeholder" ng-placeholder="Select year,Select month,Select date"></ng-combo-date-picker></p>
<p>Current selection is: <strong>{{ placeholder }}</strong>
</div>
</div>
<p>Current selection is: <strong>{{ placeholder }}</strong><p/>
</div>

<h2>Form validation</h2>
<script type="text/javascript">
app.controller('formValidationCtrl', function ($scope) {

});
</script>
<div ng-controller="formValidationCtrl">
<form name="myForm" novalidate>
<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>
<p>Current selection is: <strong>{{ formv }}</strong></p>
<p>Form is valid: <strong>{{ myForm.$invalid? 'No' : 'Yes' }}</strong></p>
<table>
<tr>
<th>Field</th>
<th>Pristine</th>
<th>Dirty</th>
</tr>
<tr>
<td>Date</td>
<td>{{ myForm.formv_date.$pristine? 'Yes' : 'No' }}</td>
<td>{{ myForm.formv_date.$dirty? 'Yes' : 'No' }}</td>
</tr>
<tr>
<td>Month</td>
<td>{{ myForm.formv_month.$pristine? 'Yes' : 'No' }}</td>
<td>{{ myForm.formv_month.$dirty? 'Yes' : 'No' }}</td>
</tr>
<tr>
<td>Year</td>
<td>{{ myForm.formv_year.$pristine? 'Yes' : 'No' }}</td>
<td>{{ myForm.formv_year.$dirty? 'Yes' : 'No' }}</td>
</tr>
</table>
</form>
</div>

</div>
</body>
</html>
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ng-combo-date-picker",
"version": "1.2.4",
"version": "1.2.5",
"description": "An Angular directive to select dates using combo boxes",
"main": "source/ngComboDatePicker.js",
"scripts": {
Expand Down
40 changes: 29 additions & 11 deletions source/ngComboDatePicker.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* ngComboDatePicker v1.2.4
* ngComboDatePicker v1.2.5
* http://github.com/jfmdev/ngComboDatePicker
* «Copyright 2015 Jose F. Maldonado»
* License: LGPLv3 (http://www.gnu.org/licenses/lgpl-3.0.html)
Expand Down Expand Up @@ -104,7 +104,7 @@ angular.module("ngComboDatePicker", [])
}
$scope.maxDate = parseDate($scope.ngMaxDate, $scope.ngTimezone);
if($scope.maxDate == null) {
$scope.maxDate = new Date();
$scope.maxDate = new Date();
}

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

// Add attributes.
if(scope.ngAttrsDate != null) jqLite(children[0]).attr( scope.ngAttrsDate );
if(scope.ngAttrsMonth != null) jqLite(children[1]).attr( scope.ngAttrsMonth );
if(scope.ngAttrsYear != null) jqLite(children[2]).attr( scope.ngAttrsYear );

// Reorder elements.
for(var i=0; i<order.length; i++) {
if(order[i] == 'd') jqLite(element[0]).append(children[0]);
if(order[i] == 'm') jqLite(element[0]).append(children[1]);
if(order[i] == 'y') jqLite(element[0]).append(children[2]);
}
},
template: function() {
template: function(element, attrs) {
// Verify if addtional attributes were defined.
var strAttrs = ['', '', ''];
var attrNames = ['ngAttrsDate', 'ngAttrsMonth', 'ngAttrsYear'];
for(var i=0; i<3; i++) {
try{
// Verify if the attributes were defined.
if(attrs && attrs[attrNames[i]]) {
// Iterate over each attribute.
eval("var attrsAux= " + attrs[attrNames[i]]);
for(var key in attrsAux) {
var value = attrsAux[key];
if(typeof value == "boolean") {
if(value) strAttrs[i] += key + ' ';
} else {
if(typeof value == "string" && value.indexOf('"') > 0) { value = value.replace(/"/g, '&quot;'); }
strAttrs[i] += key + '="' + value + '" ';
}
}
}
}catch(err){console.log(err);}
}

// Generate HTML code.
var html =
'<select ng-model="date" ng-change="onChange(\'date\')" ng-options="date.value as date.name disable when date.disabled for date in dates"></select>' +
'<select ng-model="month" ng-change="onChange(\'month\')" ng-options="month.value as month.name disable when month.disabled for month in months"></select>' +
'<select ng-model="year" ng-change="onChange(\'year\')" ng-options="year.value as year.name disable when year.disabled for year in years"></select>'
'<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>' +
'<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>' +
'<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>'
;

return html;
Expand Down
Loading

0 comments on commit 96d6b6c

Please sign in to comment.