How to use Bootstrap3 datetimepicker in AngularJs

For the use of datetimepicker, see: http://www.111cn.net/wy/js-ajax/125216.htm

Use an instance in AngularJs:

HTML code:

<Divclass = "container" ng-app = "myApp" ng-controller = "myCtrl"> <Divclass = "row"> <Divclass = 'Col-SM-6 '> <Divclass = "form-group"> <Label> Select Date: </label> <! -- Specify the date tag --> <Divclass = 'input-group date' datetimepickerid = 'datetimepicker1'> <Inputtype = 'text' class = "form-control" ng-model = "dateOne"/> <Spanclass = "input-group-addon"> <Spanclass = "glyphicon-calendar"> </span> </Span> </Div> </Div> <P> Result: {dateOne }}</p> </Div> <Divclass = 'Col-SM-6 '> <Divclass = "form-group"> <Label> select date + Time: </label> <! -- Specify the date tag --> <Divclass = 'input-group date' id = 'datetimepicker2'> <Inputtype = 'text' class = "form-control" ng-model = "dateTwo"/> <Spanclass = "input-group-addon"> <Spanclass = "glyphicon-calendar"> </span> </Span> </Div> </Div> <P> Result: {dateTwo }}</p> </Div> </Div> </Div>

JS code:

Varapp = angular. module ('myapp', []); App. controller ('myctrl ', function ($ scope ){ // Bind the selection control to the Controller. Vardatepicker1 = $ ('# datetimepicker1'). datetimepicker ({ Format: 'yyyy-MM-DD ', Locale: moment. locale ('zh-cn ') }). On ('DP. Change', function (e ){ Varresult = newmoment (e. date). format ('yyyy-MM-DD '); $ Scope. dateOne = result; $ Scope. $ apply (); });   $ ('# Datetimepicker2'). datetimepicker ({ Format: 'yyyy-MM-DD hh: mm ', Locale: moment. locale ('zh-cn ') }). On ('DP. Change', function (e ){ Varresult = newmoment (e. date). format ('yyyy-MM-DD hh: MM '); $ Scope. dateTwo = result; $ Scope. $ apply (); }); });

Effect chart: