如何使用 Angular js 在文本框中显示日期日历？答案

【问题标题】：How to show date calendar on text box using angular js?如何使用 Angular js 在文本框中显示日期日历？
【发布时间】：2016-08-26 06:35:30
【问题描述】：

我正在使用 angurla js，引导程序进行 Web 开发。我想在文本框中显示日期选择器。

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

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

下面是我的 plunker 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>

【问题讨论】：

我正在使用这个 - github.com/dalelotts/angular-bootstrap-datetimepicker
页面中需要包含的文件太多了。
您可以使用输入类型作为日期 plnkr.co/edit/lIzYjMVmmP26cr3rZrxF?p=preview
我使用github.com/Gillardo/bootstrap-ui-datetime-picker。易于实施且非常强大。

标签： javascript jquery angularjs twitter-bootstrap datepicker

【解决方案1】：

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

plnkr.co/edit/lIzYjMVmmP26cr3rZrxF?p=preview

【讨论】：

【解决方案2】：

angular.js 本身不支持日期选择器（这不是它的范围）。但是angular-ui.js（here）提供了一个datepicker模块，功能相当强大……

例如看这个plunkr。

【讨论】：

这个使用 jquery.min.js。不使用查询怎么办。
AFAIK，你不能。对不起。也许有可能，但我从未见过不使用 jquery 作为依赖项或至少 jqLite 实现的日期选择器（但我不确定它是否足够）。
如果可以使用 jqlite 则可以，并且 jqlite 是 inbuit 的，所以不需要在 html 的头部包含 jquery 文件。

【解决方案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>

【讨论】：