angular timepicker not working in angular application

Question

I am trying to use:

Source: index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="lib/angular-dragula/dist/angular-dragula.min.css" redl ="stylesheet">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" />

   <link href="css/style.css" rel="stylesheet">
   <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
     <script src="lib/ionic/js/ionic.bundle.js"></script>
      <script src="lib/angular-ui-bootstrap/src/position/position.js"></script>
 <script src="lib/angular-dateparser/dist/angular-dateparser.js"></script>
 <script src="lib/angular-timepicker/src/angular-timepicker.js"></script></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>


  </head>

  <body ng-app="starter">
    <ion-nav-view></ion-nav-view>
  </body>
</html>

Directive:

  <input type="text" dn-timepicker ng-model="time" />

With this line, all that I really get is an input field with no timepicker. I have included script reference to angular UI bootstrap and angular-dateparser as well.

Are there no JavaScript errors? Are all the referenced scripts loading correctly? — Rohan Büchner
– Rohan Büchner, Commented Sep 29, 2015 at 11:10
Yes, there are no javascript errors and the scripts are loading correctly. — sim kaur
– sim kaur, Commented Sep 29, 2015 at 11:10
I'm either blind... or you've renamed the file... but where is you Angular reference (which leads back to my first point)? — Rohan Büchner
– Rohan Büchner, Commented Sep 29, 2015 at 11:14
Anyone??? I have been trying stuff but not able to get it working — sim kaur
– sim kaur, Commented Sep 29, 2015 at 11:30

Grégory Desmaziers · Accepted Answer · 2015-09-29 12:10:13Z

3

You need to add the dnTimepicker in your app modules depencies :

In your app.js :

angular.module('yourApp', ['dnTimepicker']) ...

answered Sep 29, 2015 at 12:10

Grégory Desmaziers

1893 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sim kaur Over a year ago

My bad. Not that I am new to this but since it was nowhere mentioned, I assumed there isn't a need to add module dependency. Thanks :)

Jimmy · Accepted Answer · 2015-12-03 06:05:51Z

0

Please check my design: https://github.com/jmloveyj/angularjs-timepicker. It is very simple and easy to polish.

AngularJS directive of timepicker and datepicker with IOS alarm style. You can fit it in your mobile html5 app for ios style animation feel timepicker. It is a base. You can decorate your own style timepicker by modifying css. timepicker demo

answered Dec 3, 2015 at 6:05

Jimmy

1

1 Comment

Prafulla Kumar Sahu Over a year ago

You should answer this question here, so that other people who will visit this page will also learn.

Collectives™ on Stack Overflow

angular timepicker not working in angular application

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related