CODEWITHSUNDEEP
angularjs
sim kaur
sim kaur

Reputation: 163

angular timepicker not working in angular application

I am trying to use:

angular-timepicker

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.

Upvotes: 3

Views: 1105

Answers (2)

Jimmy
Jimmy

Reputation: 1

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

Upvotes: 0

Gr&#233;gory Desmaziers
Gr&#233;gory Desmaziers

Reputation: 189

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

In your app.js : 

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

Upvotes: 3

Related Questions