angularJS扩展指令之-datepicker(整理)

1、按顺序引入库文件

<script type="text/javascript" src="dist/jquery.min.js"></script>
<script type="text/javascript" src="dist/jquery-ui.min.js"></script>
<script type="text/javascript" src="dist/angular.min.js"></script>

2、html代码

<div ng-app="ui.date">
<input type="text" ng-model="start_time" ui-date />
</div>

1) ng-app : 声明所有被其包含的内容都属于angularJS应用

2) ng-model :  通过设置input 标签里的 ng-model 属性 ,  AngularJS 会自动对数据进行双向绑定

3) ui-date: 定义的扩展的指令(uiDate)

3、定义指令

引入date.js: <script type="text/javascript" src="https://github.com/angular-ui/ui-date/blob/master/src/date.js"></script>

4、效果

汉化配置：

$.extend($.datepicker.regional, {
        'zh-CN' : {
            closeText: '关闭',
            prevText: '<上月',
            nextText: '下月>',
            currentText: '今天',
            monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
            monthNamesShort: ['一','二','三','四','五','六','七','八','九','十','十一','十二'],
            dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
            dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
            dayNamesMin: ['日','一','二','三','四','五','六'],
            weekHeader: '周',
            dateFormat: 'yy-mm-dd',
            firstDay: 0,
            isRTL: false,
            showMonthAfterYear: true,
            yearSuffix: '年'
        }
    });
    $.datepicker.setDefaults($.datepicker.regional['zh-CN']);

效果图如下：

下载地址：https://github.com/angular-ui/ui-date