Creando una Directiva para propiedades tipo Fecha y Hora.(II)
5. CREANDO NUESTRA VISTA.
Nuestra vista será codigo HTML, mostrando un control Select por cada una de las partes de nuestra Fecha, en cada uno de estos controles selects usaremos nuestra directiva del tipo atributo e indicaremos la propiedad del modelo que vamos a enlazar, cuyo nombre es indicado en el atributo cp-date y además la parte de nuestra fecha que nuestra directiva se encargará de refrescar en la UI, esto es indicado en el atributo part.
<div>
<select cp-date="myDate" part="month">
<option disabled selected value="">MONTH</option>
<option ng-repeat="m in months" value="{{m}}">{{m}}</option>
</select>
<select cp-date="myDate" part="day">
<option disabled selected value="">DAY</option>
<option ng-repeat="d in days" value="{{d}}">{{d}}</option>
</select>
<select cp-date="myDate" part="year">
<option disabled selected value="">YEAR</option>
<option ng-repeat="y in years" value="{{y}}">{{y}}</option>
</select>
<br/>
<select cp-date="myDate" part="hour">
<option disabled selected value="">HOUR</option>
<option ng-repeat="m in hours" value="{{m}}">{{m}}</option>
</select> _:_
<select cp-date="myDate" part="minute">
<option disabled selected value="">MINUTES</option>
<option ng-repeat="d in minutes" value="{{d}}">{{d}}</option>
</select>__
<select cp-date="myDate" part="period">
<option selected value="AM">AM</option>
<option selected value="PM">PM</option>
</select>
<br/>
Mi Modelo es: {{myDate}}
</div>
6. CREANDO NUESTRA DIRECTIVA.
Nuestra directiva, se encargará de observar la propiedad del modelo, cuyo nombre es indicado en el atributo cp-date y se encargará de refrescar en la UI la parte indicada en el atributo part.
jFaqDirectives.directive('cpDate', ['$log','$parse', function (log, parse) {
return function(scope, elem, attrs){
var _date = new Date();
var _yearZero = 0;
scope.$watch(attrs.cpDate, function(value) {
if(value) {
_date = new Date(value);
log.info('date changed = ' + _date);
updateUI();
}
});
function populateYears() {
var currentYear = new Date().getFullYear();
_yearZero = currentYear;
scope.years = [];
for(var i= currentYear; i> currentYear - 20 ; i--) {
scope.years.push(i);
}
}
function populateMonths() {
scope.months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
}
function populateDays() {
var daysInMonth = new Date(_date.getFullYear(), _date.getMonth() + 1, 0).getDate();
scope.days = [];
for(var i= 1; i <= daysInMonth; i++) {
scope.days.push(i);
}
}
function populateHours() {
scope.hours = [12,1,2,3,4,5,6,7,8,9,10,11];
}
function populateMinutes() {
scope.minutes = [];
for(var i= 0; i <= 59; i++) {
scope.minutes.push(i);
}
}
function updateUI() {
//TODO: usar Jquery
if(attrs.part == 'month') {
var m = _date.getMonth();
//elem.val(scope.months[m]);
elem.children()[m+1].selected = true;
} else if(attrs.part == 'day') {
var m = _date.getDate();
//elem.val(m);
elem.children()[m].selected = true;
} else if(attrs.part == 'year') {
var y = _date.getFullYear();
var index = _yearZero - y + 1;
//elem.val(m);
if(index >= 0) {
elem.children()[index].selected = true;
}
} else if(attrs.part == 'hour') {
var m = _date.getHours();
log.info('hours ' + m);
if(m > 11) m = m - 12;
elem.children()[m + 1].selected = true;
} else if(attrs.part == 'minute') {
var m = _date.getMinutes();
elem.children()[m + 1].selected = true;
} else if(attrs.part == 'period') {
var m = _date.getHours();
if(m > 11) {
elem.children()[1].selected = true;
}else {
elem.children()[0].selected = true;
}
}
}
function getMonthIndex(name) {
for(var i=0; i< scope.months.length; i++) {
if(scope.months[i] == name) {
return i;
}
}
return 0;
}
function bindEvents() {
//TODO: usar Jquery
if(attrs.part == 'month') {
elem.bind('change', function() {
_date.setMonth( getMonthIndex(this.value) );
log.info(this.value);
refreshModel();
});
} else if(attrs.part == 'day') {
elem.bind('change', function() {
_date.setDate(this.value);
log.info(this.value);
refreshModel();
});
} else if(attrs.part == 'year') {
elem.bind('change', function() {
_date.setYear(this.value);
log.info(this.value);
refreshModel();
});
} else if(attrs.part == 'hour') {
elem.bind('change', function() {
_date.setHours(this.value);
log.info(this.value);
refreshModel();
});
} else if(attrs.part == 'minute') {
elem.bind('change', function() {
_date.setMinutes(this.value);
log.info(this.value);
refreshModel();
});
} else if(attrs.part == 'period') {
elem.bind('change', function() {
if(this.value == 'AM') {
if(_date.getHours() >= 12) {
_date.setHours(_date.getHours() - 12);
}
}else {
var h = _date.getHours();
if(h != 12) {
_date.setHours(h + 12);
}
}
log.info(this.value);
refreshModel();
});
}
}
function initialize() {
populateYears();
populateMonths();
populateDays();
populateHours();
populateMinutes();
bindEvents();
}
function refreshModel() {
var newValue = _date;
log.info('refreshModel to ' + _date);
//Esto es para que nuestro scope se entere del cambio.
var parsed = parse(attrs.cpDate);
scope.$apply(function() {
parsed.assign(scope, newValue);
});
}
initialize();
};
}]);
7. PROBANDO NUESTRA DIRECTIVA.
Ahora si, lanzamos nuestro página en localhost y accedemos a nuestra página /date. La aplicación nos debe mostrar la fecha inicial colocada en el método initialize de nuestro controlador. Y podemos interactuar con los controles select, vemos que al cambiar cualquier item, nuestro modelo es actualizado y mostrado debajo de los controles select.
Hasta la próxima!!
Jhon Pierre 
Comentarios recientes