Head section:
<!--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 section
Body ng-app= "myApp" ng-controller= "Addctrl" >
<form id= "[email protected]" >
<table class= "Table Table-hover" >
<tr>
<TD width= "10%" align= "right" class= "Control-label" > Date of Incorporation:</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= "+" 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 Code:
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,//custom property, true to show empty button false to hide default: True
Startview:2,
Minview:2,
Weekstart:1,
Todayhighlight:1,
Autoclose:1,
forceparse:0
});
},
};
});
Angular--bootstrap instance Date control "DatePicker"