Created
October 8, 2014 05:01
-
-
Save mpakus/b969bce8b12ff2ec3bdf to your computer and use it in GitHub Desktop.
select date angularjs directive (using: <div selectdate yu-model="user.birthdate_on"></div>)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.directive "selectdate", ($translate)-> | |
restrict: 'A' | |
scope: | |
yuModel: '=' | |
controller: ($scope, $element) -> | |
$scope.months = [ | |
{value: 1, name: 'jan'}, | |
{value: 2, name: 'feb'}, | |
{value: 3, name: 'mar'}, | |
{value: 4, name: 'apr'}, | |
{value: 5, name: 'may'}, | |
{value: 6, name: 'jun'}, | |
{value: 7, name: 'jul'}, | |
{value: 8, name: 'aug'}, | |
{value: 9, name: 'sep'}, | |
{value: 10, name: 'oct'}, | |
{value: 11, name: 'nov'}, | |
{value: 12, name: 'dec'} | |
] | |
link: ($scope, element, attrs, ctrls) -> | |
now = new Date($scope.yuModel) | |
[$scope.dateDay, $scope.dateMonth, $scope.dateYear] = [now.getDay(), now.getMonth(), now.getFullYear()] | |
$scope.dateChanged = -> | |
@yuModel = "#{$scope.dateYear}-#{$scope.dateMonth}-#{$scope.dateDay}" | |
$scope.$watch 'dateDay', (newValue, oldValue) -> $scope.dateChanged() | |
$scope.$watch 'dateMonth', (newValue, oldValue) -> $scope.dateChanged() | |
$scope.$watch 'dateYear', (newValue, oldValue) -> $scope.dateChanged() | |
template: """ | |
<div class="date"> | |
<div class="custom-select day"> | |
<select ng-model="dateDay" ng-options="day for day in [] | range:1:31"> | |
<option value="" ng-if="false"></option> | |
</select> | |
</div> | |
<div class="custom-select month"> | |
<select ng-model="dateMonth" ng-options="m.value as m.name|translate for m in months"> | |
<option value="" ng-if="false"></option> | |
</select> | |
</div> | |
<div class="custom-select year"> | |
<select ng-model="dateYear" ng-options="year for year in [] | range:1930:2000"> | |
<option value="" ng-if="false"></option> | |
</select> | |
</div> | |
</div> | |
""" | |
replace: true |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I am pro-beginner in angular and I like this. But if you use rails, you can render this 3 select via standart
form date helper and bind some var of scope to it, dont you think?
I dont know all context, but why you assing date in string format to this.yuModel, is it for view or it internal state of some model?