角度jsを使用してテキストボックスに日付カレンダーを表示する方法は？

私はangurla js、Web開発用のブートストラップを使用しています。テキストボックスに日付選択ツールを表示します。角度jsを使用してテキストボックスに日付カレンダーを表示する方法は？

ここに解決策が見つかりました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>

出典

2016-08-26 Praveen D

私はこの1つを使用しています - https://github.com/dalelotts/angular-bootstrap-datetimepicker – smoksnes

非常に多くのファイルがあるページに含める必要があります。 –

入力タイプを日付として使用できます。 https://plnkr.co/edit/lIYYjMVmmP26cr3rZrxF？p = preview –

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>

出典

2016-09-08 12:38:03

あなたは（それがスコープですされていない）ネイティブに日付ピッカーをスポーツではないん日付<input type="date" id="dob" class="form-control" name="dob" ng-model="answers.dob" required>

plnkr.co/edit/lIzYjMVmmP26cr3rZrxF?p=preview

出典

2016-08-26 07:32:15

angular.jsとして入力タイプを使用することができます。しかしangular-ui.js（hereは）

は、たとえば、このplunkrを参照してください...非常に強力、DatePickerのモジュールを提供します。

出典

2016-08-26 07:46:00 MarcoS

これはjquery.min.jsを使用しています。どのように我々はクエリを使用せずに行うことができます。 –

AFAIK、あなたは*できません。ごめんなさい。たぶん可能かもしれませんが、jquery、依存関係、または少なくともjqLiteを使用せずにdatepickerを実装したことは一度もありませんでしたが、十分ではないかと思います。 – MarcoS

jqliteを使用して可能であれば、jqliteは角度がないので、htmlの先頭にjqueryファイルを含める必要はありません。 –

角度jsを使用してテキストボックスに日付カレンダーを表示する方法は？

答えて

関連する問題