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

  • 相关阅读:
    hdu 4521 小明系列问题——小明序列(线段树 or DP)
    hdu 1115 Lifting the Stone
    hdu 5476 Explore Track of Point(2015上海网络赛)
    Codeforces 527C Glass Carving
    hdu 4414 Finding crosses
    LA 5135 Mining Your Own Business
    uva 11324 The Largest Clique
    hdu 4288 Coder
    PowerShell随笔3 ---别名
    PowerShell随笔2---初始命令
  • 原文地址:https://www.cnblogs.com/yaleizhou/p/6266699.html
Copyright © 2011-2022 走看看