Как добавить bootstrap указатель даты и времени в angularjs - PullRequest
Новая
       15

Как добавить bootstrap указатель даты и времени в angularjs

0 голосов
/ 22 января 2020

Я разрабатываю приложение, используя angularjs. Мне нужно добавить в форму выбора даты и времени. но не уверен, как его добавить.

1 Ответ

0 голосов
/ 22 января 2020

Вы можете использовать этот angularjs -датчик времени :) 

var app = angular.module('myApp', ['angularjs-datetime-picker']);
app.run(function($rootScope) {
  $rootScope.gmtDate = new Date('2015-01-01 00:00:00 -00:00');
});
app.controller("ctrl", function($scope) {
  $scope.model = "1/1/1991";
  $scope.rows = ['Paul', 'John', 'Lucie'];
  $scope.temp = false;

  $scope.addRow = function() {
    $scope.temp = false;
    $scope.addName = "";
  };

  $scope.deleteRow = function(row) {
    $scope.rows.splice($scope.rows.indexOf(row), 1);
  };

  $scope.plural = function(tab) {
    return tab.length > 1 ? 's' : '';
  };

  $scope.addTemp = function() {
    if ($scope.temp) $scope.rows.pop();
    else if ($scope.addName) $scope.temp = true;

    if ($scope.addName) $scope.rows.push($scope.addName);
    else $scope.temp = false;
  };

  $scope.isTemp = function(i) {
    return i == $scope.rows.length - 1 && $scope.temp;
  };
});
body {
  padding: 20px;
}

.search {
  margin-left: 10px;
}
<!DOCTYPE html>

<html ng-app="myApp" ng-init="
  date1='01-01-2015 00:00:00';
  date2='Thu Jan 01 2015 00:00:00 GMT-0500 (EST)';
  date3='2015-01-01T00:00:00-0400';
  date4='2015-01-01';">

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/angularjs-datetime-picker-v2@0.2.2/angularjs-datetime-picker.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/angularjs-datetime-picker-v2@0.2.2/angularjs-datetime-picker.css">

  <!--  -->

  <!-- <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> -->
  <meta charset=utf-8 />
  <title>Angular JS Demo</title>
</head>

<body ng-controller="ctrl">

  &lt;input ng-model="date4" datetime-picker date-only /&gt; <br>
  <input ng-model="date1" datetime-picker="" date-only="" size="30" class="ng-pristine ng-valid ng-valid-date ng-touched"> <br> <br> &lt;input ng-model="date2" datetime-picker date-format="yyyy-MM-dd" date-only /&gt; <br>
  <input ng-model="date2" datetime-picker="" date-format="yyyy-MM-dd" size="30" date-only="" class="ng-pristine ng-valid ng-valid-date ng-touched"> <br> <br> <br> &lt;input ng-model="date3" datetime-picker date-format="yyyy-MM-dd HH:mm:ss" close-on-select="false"
  /&gt; <br>
  <input ng-model="date3" datetime-picker="" date-format="yyyy-MM-dd HH:mm:ss" close-on-select="false" size="30" class="ng-pristine ng-valid ng-valid-date ng-touched"> <br> <br> &lt;input ng-model="date4" datetime-picker hour="23" minute='59'/&gt;<br>
  <input ng-model="date4" datetime-picker="" hour="23" minute="59" size="30" class="ng-pristine ng-valid ng-valid-date ng-touched"> <br> <br> gmtDate : "2020-01-01T11:58:00.000Z"<br> &lt;input type="date" ng-model="gmtDate" size="30" /&gt;<br>

  <input datetime-picker ng-model="addName" />


  <h2>{{rows.length}} Friend{{plural(rows)}} <span ng-show="temp">?<small class="muted"><em > (only {{rows.length-1}} actually....)</em></small></span></h2>


  <form class="form-horizontal">
    <span ng-class="{'input-append':addName}">
    <input id="add" type="text" placeholder="Another one ?" ng-model="addName" ng-change="addTemp()"/>
    <input type="submit" class="btn btn-primary" ng-click="addRow()" ng-show="addName" value="+ add"/>
    </span>

    <span class="search input-prepend" ng-class="{'input-append':search}">
      <span class="add-on"><i class="icon-search"></i></span>
    <input type="text" class="span2" placeholder="Search" ng-model="search">
    <button type="submit" class="btn btn-inverse" ng-click="search=''" ng-show="search" value="+ add"><i class="icon-remove icon-white"></i></button>
    </span>
  </form>
  <table class="table table-striped">
    <tr ng-repeat="row in rows | filter : search" ng-class="{'muted':isTemp($index)}">
      <td>{{$index+1}}</td>
      <td>{{row}}</td>
      <td>
        <button class="btn btn-danger btn-mini" ng-click="deleteRow(row)" ng-hide="isTemp($index)"><i class="icon-trash icon-white"></i></button>
      </td>
    </tr>
  </table>

</body>

</html>
...