AngularJS Input Fields

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<!--
<label class="rp-input rp-input-empty">
    <input type="text" value="">
    <div>Name</div>
    <hr>
</label>
-->
<a href="#" context-options="allOptions">Click default</a>
<rp-input type="text" label="Name" value=""></rp-input>
<rp-input type="currency" label="Age" value="" iso-code="PEN" symbol="S/"></rp-input>
<rp-button label="Setup" action=""></rp-button>
<rp-select label="Toys" value="" options="myOptions"></rp-select>
<rp-select label="Colors" value="" options="myColors"></rp-select>
<rp-textarea label="Comments" value="userEmpty"></rp-textarea>
<a href="#" context-options="allOptions_2" mouse-button="both">Click both</a>
<rp-input type="date" label="Date" value=""></rp-input>



<!--
<rp-input type="mail">
<rp-input type="password">
<rp-input type="date">
<rp-input type="time">
<rp-input type="textarea">
<rp-input type="select" label="Age" options="myOptions">
-->

CSS

label.rp-input {
    display: inline-block;
    position: relative;
    font-size: 12px;
    height: 30px;
}
label.rp-input > input,
label.rp-input > textarea {
    border: none;
    background: transparent;
    outline: none;
    margin: 0;
    padding: 0 0 0 70px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    resize: none;
    font-family: open sans;
    font-size: 13px;
}
label.rp-input > textarea {
    padding: 6px 0 6px 70px;
    font-family: open sans;
    font-size: 13px;
    overflow: hidden;
}
label.rp-input > div {
    font-family: open sans light;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    text-align: center;
    line-height: 30px;
    font-size: 12px;
    box-sizing: border-box;
    transition: 300ms;
    color: #b6b5b5;
    pointer-events: none;
    white-space: nowrap;
}
label.rp-input > ul{
    margin: 0;
    padding: 0;
    background: #181818;
    border-radius: 3px;
    position: absolute;
    top: 5px;
    left: 70px;
    transition: 100ms;
    pointer-events: none;
    transform: scale(.9);
    opacity: 0;
    list-style: none;
    overflow: hidden;
    transform-origin: bottom;
}
label.rp-input > ul > li{
    padding: 8px 40px 8px 12px;
    color: white;
    font-family: open sans;
    font-size: 16px;
    box-sizing: border-box;
    min-width: 100px;
    cursor: pointer;
    position: relative;
}
label.rp-input > ul > li > i {
    position: absolute;
    right: 12px;
    top: 12px;
    color: #5a8b3e;
}
label.rp-input > ul > li:hover i {
    color: white;
}
label.rp-input > ul > li:hover,
label.rp-input > ul > li.rp-input-selected {
    background: #2872c6;
}
label.rp-input.rp-input-empty > div {
    width: 100%;
    font-size: 18px;
}
label.rp-input > hr {
    border: 0;
    margin: 0;
    height: 1px;
    background: #d4d4d4;
    position: absolute;
    bottom: 0;
    width: 100%;
    transition: 300ms;
}
label.rp-input > i {
    position: absolute;
    right: 2px;
   ...

JavaScript

var myApp = angular.module('myApp',[]);

myApp.directive('contextOptions', function($document, $compile, $timeout){
	var menuWrapper = document.createElement('div'),
    	current = false,
        menuTemplate = '<ul class="rp-contextOptions"><li ng-repeat="o in contextOptions" ng-click="o.action()">{{ o.label }}</li></ul>',
        allEventPreferences = {left: 'click', right: 'contextmenu', both: 'mouseup contextmenu'}
    menuWrapper.id = 'rp-contextOptionsWrapper';
    document.body.appendChild(menuWrapper);
    $document.on('mouseup', function(){
        if( current ) current.removeClass('rp-show');
    });
	return {
    	restrict: 'A',
        scope: {
        	mouseButton: '@',
            contextOptions: '='
        },
        link: function($scope, $element){
            var menu = $compile(menuTemplate)($scope),
            	eventPreference = 'contextmenu';
            if( $scope.mouseButton ) eventPreference = allEventPreferences[$scope.mouseButton];
            menuWrapper.append(menu[0]);
            $element.bind(eventPreference, function(event){
                event.preventDefault();
                event.stopPropagation();
                menu[0].style.top = event.pageY+'px';
                menu[0].style.left = event.pageX+'px';
                if(current) current.removeClass('rp-show');
                current = menu;
                current.addClass('rp-show');
            });
        }
    }
});

myApp.directive('rpInput', function(){
	var inputConfig = {
    	typeNumber: ['number','currency'],
        typeText: ['text','date','mail','password']
    };
    var months = ['January','February','March','April','May','Juny','July','August','September','October','November','December'];
    function calData(month,year) {
    	var daysInfo = new Date(year,month+1,0);
        return [
            new Date(year,month,1).getDay(),
            daysInfo.getDate(),
            daysInfo.getDay()
        ];
    }
    function DatepickerAPI(){
        this.days...