I Need a simple timepicker...

Bootstrap Studio Help
1

I need a timepicker that works well on mobile, and can select in 15 minute increments, 12hr format. ui-bootstrap seemed to have the best one, I copy pasted the example code and... not working. Any ideas as to why? All the libraries are installed.

routes.php: <!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Routes Table</title>

        <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>-->
        <script type="text/javascript" src="node_modules/angular_ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>
        <script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
        <script type="text/javascript" src="node_modules/angular_animate/angular-animate.min.js"></script>
        <script type="text/javascript" src="datetimepicker.js"></script>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </head>
<body>

<div ng-app="startTime">
<div ng-controller="TimepickerDemoCtrl">

  <div uib-timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></div>

  <pre class="alert alert-info">Time is: {{mytime | date:'shortTime' }}</pre>

<p><div class="row"> 
    <div class="col-xs-6">
        Hours step is:
      <select class="form-control" ng-model="hstep" ng-options="opt for opt in options.hstep"></select>
    </div>
    <div class="col-xs-6">
        Minutes step is:
      <select class="form-control" ng-model="mstep" ng-options="opt for opt in options.mstep"></select>
    </div>
  </div></p>

<p><hr></p>

<p><button type="button" class="btn btn-info" ng-click="toggleMode()">12H / 24H</button>
  <button type="button" class="btn btn-default" ng-click="update()">Set to 14:00</button>
  <button type="button" class="btn btn-danger" ng-click="clear()">Clear</button></p>

<p></div>
</div>
</body>
</html>

```</p>

<p>datetimepicker.js</p>

angular.module(‘startTime’,[‘ui.bootstrap’]).controller(‘TimepickerDemoCtrl’, function ($scope, $log) {
$scope.mytime = new Date();

$scope.hstep = 1;
$scope.mstep = 15;

$scope.options = {
hstep: [1, 2, 3],
mstep: [1, 5, 10, 15, 25, 30]
};

$scope.ismeridian = true;
$scope.toggleMode = function() {
$scope.ismeridian = ! $scope.ismeridian;
};

$scope.update = function() {
var d = new Date();
d.setHours( 14 );
d.setMinutes( 0 );
$scope.mytime = d;
};

$scope.changed = function () {
$log.log('Time changed to: ’ + $scope.mytime);
};

$scope.clear = function() {
$scope.mytime = null;
};
});


<p>I'm kinda new to JS... can't figure out why this isn't working...
-Thanks in Advance!</p>
2

Hmmm, well there could be a few things happening here. For starters, Bootstrap (not the Bootstrap Studio app) requires the use of the jQuery JavaScript framework for Bootstrap to work so you need to not have it commented out. So also the Angular JavaScript framework could be causing a conflict because they are both trying to use the "$" symbol. You would need to use the noConflict below.

http://api.jquery.com/jQuery.noConflict/

"Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If you need to use another JavaScript library alongside jQuery, return control of $ back to the other library with a call to $.noConflict(). Old references of $ are saved during jQuery initialization; noConflict() simply restores them."

If there is anyone who is also using Angular.js and it's working for them, I'll let them help you with that as I am not using it.

Another possibility is that your using the wrong datetimepicker.js.

Which one of these are you trying to use https://angular-ui.github.io/bootstrap/#/timepicker or this https://github.com/xdan/datetimepicker or is it something else. If so please give a URL to it so we can check it out.

Saj