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
    });
    },
    };
    });

  • 相关阅读:
    [模板]KMP
    [BZOJ] 1833: [ZJOI2010]count 数字计数
    [BZOJ] 1563: [NOI2009]诗人小G
    [BZOJ] 2442: [Usaco2011 Open]修剪草坪
    [LOJ] #2360. 「NOIP2016」换教室
    9.18模拟赛
    [BZOJ] 2006: [NOI2010]超级钢琴
    [BZOJ] 1143: [CTSC2008]祭祀river
    [51Nod] 1218 最长递增子序列 V2
    [BZOJ] 3307: 雨天的尾巴
  • 原文地址:https://www.cnblogs.com/yaleizhou/p/6266699.html
Copyright © 2011-2022 走看看