Bootstrap3 datetimepicker use instance in AngularJs

This version is recommended : Use of smalot for Bootstrap3 datetimepicker control

For the use of datetimepicker, refer to: h ttp://http://www.ifindbug.com/doc/id-44580/name-Use of Bootstrap3 datetimepicker control.html

Use example in AngularJs:

HTML code:

  1. <div class="container" ng-app="myApp" ng-controller="myCtrl">
  2. <div class="row">
  3. <div class='col-sm-6'>
  4. <div class="form-group">
  5. < label > Select Date: </ label >
  6. <!--Specify date tag-->
  7. <div class='input-group date' datetimepicker id='datetimepicker1'>
  8. <input type='text' class="form-control" ng-model="dateOne"/>
  9. <span class="input-group-addon">
  10. <span class="glyphicon glyphicon-calendar"></span>
  11. </span>
  12. </div>
  13. </div>
  14. < p > Results: {{dateOne}} </ p >
  15. </div>
  16. <div class='col-sm-6'>
  17. <div class="form-group">
  18. < label > Select Date+Time: </ label >
  19. <!--Specify date tag-->
  20. <div class='input-group date' id='datetimepicker2'>
  21. <input type='text' class="form-control" ng-model="dateTwo" />
  22. <span class="input-group-addon">
  23. <span class="glyphicon glyphicon-calendar"></span>
  24. </span>
  25. </div>
  26. </div>
  27. < p > Result: {{dateTwo}} </ p >
  28. </div>
  29. </div>
  30. </div>

JS code:

  1. var app = angular. module ( 'myApp' , []);
  2. app.controller('myCtrl', function ($scope) {
  3. //Bind the selection control in the Controller
  4. var datepicker1 = $('#datetimepicker1').datetimepicker({
  5. format: 'YYYY-MM-DD',
  6. local : moment. local ( 'zh-cn' )
  7. }).on('dp.change', function (e) {
  8. var result = new moment(e.date).format('YYYY-MM-DD');
  9. $scope.dateOne = result;
  10. $scope.$apply();
  11. });
  12. $('#datetimepicker2').datetimepicker({
  13. format : 'YYYY MM month DD day hh:mm' ,
  14. local : moment. local ( 'zh-cn' )
  15. }).on('dp.change', function (e) {
  16. var result = new moment (e. date ). format ( 'YYYY MM month DD day hh:mm' );
  17. $scope.dateTwo= result;
  18. $scope.$apply();
  19. });
  20. });

More:

Use of Bootstrap3 datetimepicker control

RequireJS instance

Bootstrap-based jQuery slider plugin using bootstrap-slider.js

Related: Bootstrap3 datetimepicker use instance in AngularJs