Skip to content

Instantly share code, notes, and snippets.

@mpakus
Created October 8, 2014 05:01
Show Gist options
  • Save mpakus/b969bce8b12ff2ec3bdf to your computer and use it in GitHub Desktop.
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>)
.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
@lisovskyvlad
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment