- 1 year ago 233
AngularJS Question

How to show date calendar on text box using angular js?

I am using angurla js, bootstrap for web development.
I want to show date picker on text box.

I found solution here
But it looks like need to include jquery, jquery ui, that is unnecessary overhead on application only for date picker.

Is there inbuilt feature available in angular for date picker?

Below is my plunker
In Date of birth field I want to add date picker.

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


<!-- 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=""></script>
<script src=""></script>
<script src="//"></script>
<link rel="stylesheet" href="" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script type="text/javascript" src=""></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>

<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">
User Form</small>
<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>
<span class="form-error" ng-show="submitted && DTOstep1.dob.$error.required">This field is required.</span>

<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 class="col-md-2"></div>


Answer Source

Searched around and found ngMaterial provides features like that.

<script src=""></script>
  <script src=""></script>

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

<md-datepicker ng-model="answers.myDate" md-placeholder="Enter date"></md-datepicker>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download