angularjs 封装 bootstrap datetimepicker 日期指令

来源：互联网发布：淘宝交易指数是什么编辑：程序博客网时间：2024/05/17 23:00

直接上码：

<!DOCTYPE html><html ng-app="myApp"><head lang="en">    <meta charset="UTF-8">    <title></title>    <link href="bootstrap.css" rel="stylesheet" media="screen">    <link href="bootstrap-datetimepicker.css" rel="stylesheet" media="screen">    <script type="text/javascript" src="jquery-2.1.4.js"></script>    <script type="text/javascript" src="bootstrap-datetimepicker.js"></script>    <script type="text/javascript" src="bootstrap-datetimepicker.zh-CN.js"></script>    <script type="text/javascript" src="angular.js"></script>    <script type="text/javascript">    var myApp = angular.module('myApp', []);    myApp.directive('datepicker', function(){    return {    restrict: 'EAC',    controller: 'DatePickerCtl',    templateUrl: 'datepicker/datepicker.html',    scope: {    'value': '='    },    link: function(scope){    }    };    });    myApp.controller('DateController', ['$scope', function($scope){    $scope.page = { startDate: '2015/08/24', endDate: '2015/08/24'};    }]);    myApp.controller('DatePickerCtl', ['$scope', function($scope){    var self = this;     $('.form-datetime').datetimepicker({     format: 'yyyy-mm-dd',        language:  'zh-CN',        weekStart: 1,        todayBtn:  1,autoclose: 1,todayHighlight: 1,startView: 2,minView: 2,forceParse: 0    });     $scope.$watch('value', function(oldVal, newVal){     console.log('value = ' + $scope.value);     });    }]);    </script></head><body ng-controller="DateController"><datepicker></datepicker>- <datepicker></datepicker></body></html>

模板代码：

<input type="text" class="form-datetime" ng-model="value" />

1 0