Use bootstrap date picker with angular

0
votes

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?

3
javascriptangularjstwitter-bootstrap
Can you show the code or create a fiddle? – Aruna Tebel
I cannot because the code on itself is too big, containing various other things. I'll try to create a fiddle. – dearn44
@tibzon maybe the pen helps. – dearn44
Would suggest doing this on a plnkr. Since your thing is named material app you might be interested in the date/time picker I made here too shusain.github.io/itDateTimePicker could use a hand hammering out a few bugs on it but it was built based on the material design one on my phone for my own apps. – shaunhusain
I actually came across your implementation but the name kinda stuck there, and a date picker of that type does not fit very well with the rest of the design. – dearn44

3 Answers

2
votes

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

0
votes

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>