CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap
dearn44
dearn44

Reputation: 3422

Use bootstrap date picker with angular

Can I use the bootstrap 3 date picker component with angular?

I tried following this tutorial but I failed with only the input appearing but no calendar when clicked.

EDIT: This pen somewhat resembles my actual code, and what I wanted was to add the datetime picker. I know there are a few date pickers for angular but the one I linked fits better with my design I believe.

angular.module('materialApp.directives')
    .directive('psDatetimePicker', function (moment) {
        var format = 'MM/DD/YYYY hh:mm A';

Have I done any obvious mistakes?

Upvotes: 0

Views: 1782

Answers (3)

cmgsakell
cmgsakell

Reputation: 13

Taking a look at the documentation for your bootstrap timepicker and without seeing your code - I would guess you don't have everything loaded. Make sure you've included everything required... especially the bootstrap.js to include collapse... and you'd still need to use the bootstrap datetimepicker mentioned by Tarun.

Minimal Requirements

jQuery
Moment.js
Bootstrap.js (transition and collapse are required if you're not using the full Bootstrap)
Bootstrap Datepicker script
Bootstrap CSS
Bootstrap Datepicker CSS
Locales: Moment's locale files are here

<head>
  <!-- ... -->
  <script type="text/javascript" src="/bower_components/jquery/jquery.min.js"></script>
  <script type="text/javascript" src="/bower_components/moment/min/moment.min.js"></script>
  <script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
  <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
</head>

Upvotes: 0

Pawan B
Pawan B

Reputation: 4623

Try bootstrap-datepicker

github repo : https://github.com/eternicode/bootstrap-datepicker

Demo : http://www.eyecon.ro/bootstrap-datepicker/

Try this for date with time :

https://eonasdan.github.io/bootstrap-datetimepicker/

Upvotes: 0

Tarun Dugar
Tarun Dugar

Reputation: 8971

You can use ui-bootstrap's(AngularJS module) datepicker. Reference here.

Upvotes: 2

Related Questions