angularjs 整合bootstrap 时间控件

一、引入js

<link href="${basePath}/static/plugin/bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet"><script type="text/javascript" src="${basePath}/static/plugin/bootstrap/js/bootstrap-datetimepicker.min.js" ></script>
<script type="text/javascript" src="${basePath}/static/plugin/bootstrap/js/bootstrap-datetimepicker.fr.js" ></script>
<script type="text/javascript" src="${basePath}/static/plugin/bootstrap/js/bootstrap-datetimepicker.zh-CN.js" ></script>
<script src="${basePath}/static/plugin/angular/js/angular.min.js"></script>

二、引入HTML

<input size="16" type="text" readonly class="form_datetime" style="width:120px" format-date ng-time ng-model="finishedDtm">

三、创建angularjs指令

formatDate指令做格式转换ng-time 初始化bootstrap时间控件注：有时候格式有问题 修改Date的toJSON方法获取本地时间字符串 Date.prototype.toJSON = function () { return this.toLocaleString(); }

bamboo.angularApp = angular.module('task', []).directive('formatDate', function(){return {require: 'ngModel',link: function(scope, elem, attr, ngModelCtrl) {ngModelCtrl.$formatters.push(function(modelValue){if(modelValue) {return modelValue;}});ngModelCtrl.$parsers.push(function(value){if(value) {return new Date(value);}});}};}).directive('ngTime', function() {return {restrict : 'A',require : '?ngModel',link : function($scope, $element, $attrs, $ngModel) {if (!$ngModel) {return;}$element.datetimepicker({language:  'zh-CN',weekStart: 1,todayBtn:  1,autoclose: true,todayHighlight: true,startView: 2,format: 'yyyy-mm-dd hh:ii',});},};});

注：整合easyui时自定义操作列的ng-click事件绑定不生效可以使用 $compile($("#gridTable").parent())($scope); 进行重新渲染

  {field:'openDetails',title:'展开详情',align:'center',resizable:true,width:'80',formatter:function(value,row,index){return  '<button class="btn  btn-sm btn-primary" data-toggle="modal" data-target="#hours_details" ng-click="hoursDetails(\''+row.lId+'\')">工时详情</button>';}}

angularjs使用了其他前端组件有时候渲染有问题需要使用$timeout进行渲染

 function AddHoursController($rootScope,$scope,$timeout,$http){    $scope.initAddHours = function(){//清理表单数据$scope.paramList = [];var lId = $("#add_hours [ng-model='laborDetail.lId']").val();var laborDetail = {"lId":lId}//获取所有项目模块$.get(contextPath + "/labor/myLabor/hourTask/list.action",laborDetail,function (resp) {var respData = resp.result;for (var i = 0; i < respData.length; i++) {respData[i].isNotEditable = true;}$timeout(function() {//生成历史工时数据$scope.laborDetails = respData;});});}};

转载于:https://www.cnblogs.com/tianzhongshan/p/6957853.html

angularjs 整合bootstrap 时间控件相关推荐

bootstrap 时间控件
最近使用了bootstrap的UI感觉确实很漂亮,非常值得学习和使用.下面先简单了解下bootstrap的时间控件. 这个时间控件使用起来还是非常的简单,只需要引入基本的css和js就可以了需要引入 ...
bootstrap时间控件
看一下效果首先新建一个html ,引入相应的js,附件里面有! <script type="text/javascript" src="./jquery/jque ...
bootstrap时间控件--时间选择器
对应上面的三个时间选择器,写法如下: 首先引入css和js: <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/boots ...
【angularjs】利用时间控件进行时间筛选
业务如图: 代码如下: html: <label>时间:</label><sit-datepicker sit-value="vm.value1" s ...
bootstrap-datetimepicker时间控件
bootstrap-datetimepicker时间控件使用layui的laydate时间控件无法很好地嵌入到bootstap布局中(具体参考日期和时间组件文档 - layui.laydate),因 ...
bootstrap日期时间控件
datetime控件 Bootstrap的日期时间控件,使用非常的简单. 首先,添加日期时间控件的引用 @*datetime控件*@<link href="~/Content/Boot ...
轻量级的日期时间控件Pikaday
今天看到一个网友分享的一篇文章,有关轻量级的日期时间控件Pikaday,感觉很实用.在这里总结一下,方便日后使用.因为之前也遇到过类似的问题,My97datepicker插件样式过于老旧,但又没有其它 ...
bootstrap日期控件只显示年月
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org" > ...
angularjs java 文件上传_学习使用AngularJS文件上传控件
前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图: 需要同时上传两个文件.并且规定文件格式和文件大小.因为前端框架使用angular,且不想因为一个上传功能又引入一个jque ...

angularjs 整合bootstrap 时间控件

angularjs 整合bootstrap 时间控件相关推荐

最新文章

热门文章