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

  • 相关阅读:
    STL源码剖析之_allocate函数
    PAT 1018. Public Bike Management
    PAT 1016. Phone Bills
    PAT 1012. The Best Rank
    PAT 1014. Waiting in Line
    PAT 1026. Table Tennis
    PAT 1017. Queueing at Bank
    STL源码剖析之list的sort函数实现
    吃到鸡蛋好吃,看看是哪只母鸡下的蛋:好用的Sqlite3
    cJSON
  • 原文地址:https://www.cnblogs.com/yaleizhou/p/6266699.html
Copyright © 2011-2022 走看看