问题：
今天一个页面中，需要让用户选择日期，准备使用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测试没有问题了，安卓还没有测试，等有时间再测试、修改、优化。
