Question

我正在使用angurla js，用于web开发的bootstrap。我想在文本框中显示日期选择器。

我在这里找到了解决方案https://angular-ui.github.io/ui-date/ 但看起来需要包含jquery，jquery ui，这对于日期选择器的应用程序来说是不必要的开销。

日期选择器的角度是否有内置功能？

以下是我的标题https://plnkr.co/edit/aV65Nab9U9I6YlK2g4sY?p=preview 在出生日期字段中，我想添加日期选择器。

<!DOCTYPE html>
<html lang="en" ng-app="autoQuote">

<head>

  <!-- start: Meta -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- end: Meta -->
  <link rel="shortcut icon" href="<?php echo base_url(); ?>assets/themes/default/img/favicon.ico">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-resource.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.1.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
  <script src="app.js"></script>
  <script src="autoQuoteCtrl.js"></script>
  <script src="dtoResource.js"></script>
  <script src="questionResource.js"></script>
  <script src="controlDirectives.js"></script>
  <script src="postDtoFactory.js"></script>
  <script src="custom-required.validator.js"></script>
</head>

<body>
  <div class="col-md-2"></div>
  <div class="container-fluid col-md-8">
    <div class="row" ng-if='questions'>
      <div class="col-md-12 text-center">
        <div class="page-header">
          <h1>
                User Form</small>
            </h1>
        </div>
        <div ng-controller="autoQuoteCtrl">
            <form class="form-horizontal text-center" role="form" name="DTOstep1" ng-submit="onSubmit()" novalidate>
                <div class="row">
                    <div class="form-group">
                        <label class="col-sm-5 control-label" for="dob">Date of Birth</label>
                        <div class="col-sm-6">
                            <input type="text" id="dob" class="form-control" name="dob" ng-model="answers.dob"  required>
                        </div>                    
                    </div>
                    <span class="form-error" ng-show="submitted && DTOstep1.dob.$error.required">This field is required.</span>
                </div>

            <div class="col-sm-5"></div>
            <div class="col-sm-6">
              <input name="saveDto" type="submit" class="btn btn-success btn-lg" value="Continue" />
              <input type="button" class="btn btn-info" name="formclone" value="+ Add More Cars" ng-click="appendClonedDiv()" />
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-2"></div>
</body>

</html>

Answer 1

您可以将输入类型用作日期<input type="date" id="dob" class="form-control" name="dob" ng-model="answers.dob" required>

plnkr.co/edit/lIzYjMVmmP26cr3rZrxF?p=preview

Answer 2

angular.js本身没有使用日期选择器（这不是它的范围）。但angular-ui.js（here）提供了一个非常强大的日期选择器模块......

例如，见plunkr。

Answer 3

搜索并发现ngMaterial提供了类似的功能。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-aria.min.js"></script>

var app = angular.module("autoQuote", ["ui.router", "ngResource","ngAnimate","ngMaterial"]);

<md-datepicker ng-model="answers.myDate" md-placeholder="Enter date"></md-datepicker>

如何使用角度js在文本框上显示日期日历？

3 个答案: