input[date]标签在移动端使用碰到的问题

问题：

今天一个页面中，需要让用户选择日期，准备使用input=date标签，直接触发移动端自带的datepicker,结果在iOS端测试发现两个问题，1.date标签右侧会有一块空白，和其它元素对不齐(可能是系统默认留出了一个选择按钮的位置) 2.选择完成以后显示的格式为“yyyy年MM月dd”，我需要显示到页面上的格式是"yyyy-MM-dd"。

资料：

网上查资料说input[date]的样式各个浏览器不统一，比较难调，比较好的解决方案是使用js插件来做datePicker，或者使用input[text]来代替input[date]。

解决思路：

源码是angularjs，所以想写一个directive来控制input标签，初始使用text，用户点击input的时候把标签切换为date,当用户选择完成，失去焦点后把input还原成text并格式化显示的时间格式为“yyyy-MM-dd”

htm代码

            <ion-item class="item-input"><span class="input-label">复业日期</span>
                <input type="text" date-picker="yyyy-MM-dd" ng-model="data.recoverDate">
                <arrow></arrow>
            </ion-item>

directive代码

    .directive('datePicker', function () {
        return {
            restrict: 'AE',
            require: 'ngModel',
            link: function (scope, element, attrs, ctrl) {
                element.bind('click', function () {
                    attrs.$set('type', 'date'); //input 类型改为type
                });
                element.bind('blur', function () {
                    attrs.$set('type', 'text'); //input 类型改回text
                    var formatString = attrs.datePicker ? attrs.datePicker : 'yyyy-MM-dd'; //如果没有设置格式,默认为"yyyy-MM-dd"
                    var newValue = new Date(ctrl.$viewValue).format(formatString);
                    ctrl.$setViewValue(newValue);
                    ctrl.$render();
                });
            }
        }

遇到的问题
1.写directive的时候发现绑定focus事件，在iOS端弹不出datePicker，绑定click事件就可以，不知道为什么。
2.iOS测试没有问题了，安卓还没有测试，等有时间再测试、修改、优化。