在angular 下使用bootstrap 的datepicker

最新推荐文章于 2024-06-07 09:31:54 发布

平江夜弹

最新推荐文章于 2024-06-07 09:31:54 发布

阅读量4.8k

点赞数

分类专栏： angularjs

本文链接：https://blog.csdn.net/u013544065/article/details/21934493

版权

angularjs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

如果想要在angular 下使用bootstrap 的datepicker，首先需要引入必要的js和css包。

然后将bootstrap 的datepicker 用directive 封装起来，代码如下：

<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
	<script type="text/javascript" src="bootstrap-datepicker.js"></script>
	<script type="text/javascript" src="angular.min.js"></script>

	<script>
	angular.module('myApp', []).controller('Ctrl', ['$scope', function ($scope) {

	}])
    .directive('bDatepicker', function () {
    	return {
        	restrict: 'A',
        	require: "ngModel",  
        	link: function (scope, element, attr,ngModelCtrl) {
            	element.datepicker({
            		dateFormat:'dd/MM/yyyy hh:mm:ss'
            	}).on('changeDate', function(e) {
            		// var outputDate = new Date(e.date);
            		// var n = outputDate.getTime();
            		ngModelCtrl.$setViewValue(e.date);
        			scope.$apply();
          		});
            	var component = element.siblings('[data-toggle="datepicker"]');
            	if (component.length) {
                	component.on('click', function () {
                    	element.trigger('focus');
                	});
            	}
        	}
    	};
});

	</script>
</head>
<body>
<div ng-app="myApp" ng-controller="Ctrl" class="span2">
	<br/>
	{{date}}
    <div class="input-append">
        <input type="text" b-datepicker ng-model="date" />
        <button type="button" class="btn" data-toggle="datepicker"> 
        	<i class="icon-calendar"></i>
        </button>
    </div>
</div>
</body>
</html>

图标自己可以添加。当然可以根据使用需要调整date 的格式。

平江夜弹

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
在angular 下使用bootstrap 的datepicker

如果想要在angular 下使用bootstrap 的datepicker，首先需要引入必要的js和css包。然后将bootstrap 的datepicker 用directive 封装起来，代码如下： angular.module('myApp', []).controller('Ctrl', ['$scope', function ($scope) { }
复制链接

扫一扫

专栏目录