Skip to content

Instantly share code, notes, and snippets.

@sibelius
Created October 19, 2015 15:49
Show Gist options
  • Save sibelius/4d1275ea1f8c980dd645 to your computer and use it in GitHub Desktop.
Save sibelius/4d1275ea1f8c980dd645 to your computer and use it in GitHub Desktop.
Workaround to have a datepicker with mask
//Immediately Invoked Function Expression (IIFE)
(function() {
'use strict';
angular
.module('app')
.directive('datepickerMask', datepickerMask);
function datepickerMask() {
var directive = {
templateUrl: 'views/datepicker-mask.html',
scope: {
inputDate: '=',
inputName: '=',
minDate: '=?',
maxDate: '=?'
//inputWid: '=?'
},
controller: datePickerMaskController,
controllerAs: 'vm',
bindToController: true
};
return directive;
}
datePickerMaskController.$inject = ['moment', '$log'];
function datePickerMaskController(moment, $log) {
var vm = this; // ViewModel
vm.dt = {
opened: false
};
vm.changeInput = changeInput;
vm.changeDP = changeDP;
vm.openDt = openDt;
changeDP();
function changeInput() {
if (typeof vm.temp !== 'undefined') {
var day = vm.temp.substring(0, 2);
var month = vm.temp.substring(2, 4) - 1;
var year = vm.temp.substring(4, 8);
var t = moment({
year: year,
month: month,
day: day
});
//$log.debug('moment: ', t);
if (t.isValid()) {
vm.inputDate = t.toDate();
} else {
vm.temp = null;
vm.inputDate = null;
}
}
}
function changeDP() {
if (!vm.inputDate) {
vm.temp = null
} else {
var t = moment(vm.inputDate);
if (t.isValid()) {
vm.temp = t.format('DD/MM/YYYY');
} else {
vm.temp = null;
}
}
}
function openDt($event) {
$event.preventDefault();
$event.stopPropagation();
vm.dt.opened = !vm.dt.opened;
}
}
})();
.input-group
input.form-control(type="text" name="vm.inputName" ng-model="vm.temp" ui-mask="99/99/9999" ng-change="vm.changeInput()")
.dp-hackyhack
input.form-control(style="opacity: 0; width: 0; height: 0; padding:0; margin: 0;" ng-change="vm.changeDP()"
type="text" name="vm.inputName" datepicker-popup="dd/MM/yyyy" placeholder="dd/mm/aaaa" ng-model="vm.inputDate"
is-open="vm.dt.opened" min-date="vm.minDate" max-date="vm.maxDate" close-text="Fechar" clear-text="Limpar" current-text="Hoje")
a.btn.btn-default.input-group-btn(type="button" ng-click="vm.openDt($event)")
i.glyphicon.glyphicon-calendar
| Escolher data
.dp-hackyhack {
position: relative;
}
.dp-hackyhack .dropdown-menu {
left: auto !important;
right: -150px;
top: 40px !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment