zoukankan      html  css  js  c++  java
  • angular--bootstrap实例日期控件【datepicker】

    head部分:

    <!--Bootstrap-->
    <link rel="stylesheet" href="/supProdom/script/bootstrap/dist/css/bootstrap.min.css" />
    <script src="/supProdom/script/bootstrap/dist/js/bootstrap.min.js "></script>
    <!--plugin : bootstrap timepicker-->
    <link rel="stylesheet" href="/supProdom/script/bootstrap-datetimepicker/bootstrap-datetimepicker.css"/>
    <script src="/supProdom/script/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
    <script src="/supProdom/script/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>

    <script src="/supProdom/script/js/Addsup.js"></script>
    <script src="/supProdom/script/js/js/controller.js"></script>
    <script src="/supProdom/script/js/js/CincoJiang.js"></script>

    html部分

    body ng-app="myApp" ng-controller="addCtrl">
    <form id="form@Form">
    <table class="table table-hover" >

    <tr>
    <td width="10%" align="right" class="control-label">成立日期:</td>
    <td>
    <div class="form-group">
    <div ng-model='timepickerTest' ng-time class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input" data-link-format="yyyy-mm-dd">
    <input class="form-control" size="16" ng-model="input" type="text" value="" readonly>
    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
    </div>
    <input type="hidden" id="dtp_input" value="" /><br/>
    </div>
    </td>

    </tr>

    </table>

    js代码:

      Addsup.js:

    var supModule = angular.module('myApp', [ 'app.controllers',
    'app.directives']);
    supModule.controller('addCtrl', ['$scope', function ($scope) {

    }]);

    controller.js

    angular.module('app.controllers', [])

    .controller('appCtrl',['$scope',function ($scope) {
    $scope.test = 'test';
    console.log($scope.test);
    }]);

    CincoJiang.js:

    'use strict';

    angular.module('app.directives', [])
    .directive('ngTime', function() {
    return {
    restrict : 'A',
    require : '?ngModel',
    link : function($scope, $element, $attrs, $ngModel) {
    if (!$ngModel) {
    return;
    }
    $('.form_date').datetimepicker({
    language: "zh-CN",
    format:"yyyy-mm-dd",
    todayBtn:true,
    clearBtn:false,// 自定义属性,true 显示 清空按钮 false 隐藏 默认:true
    startView:2,
    minView:2,
    weekStart: 1,
    todayHighlight: 1,
    autoclose: 1,
    forceParse: 0
    });
    },
    };
    });

  • 相关阅读:
    PCB工作台
    A/D转换
    gerber文件生成与PCB3D视图
    软考考前冲刺第十四、十五章算法设计与面向对象程序设计
    数据库之范式
    Java第九天
    软考考前冲刺第十三章UML建模
    软考错题合集之16-05-AM
    Java第八天
    Java第七天
  • 原文地址:https://www.cnblogs.com/yaleizhou/p/6266699.html
Copyright © 2011-2022 走看看