Three Demos of Angular JS date / time picker (with range)

The extended-datetimepicker for Angular Material

The extended-datetimepicker is a date and time picker solution for Angular based projects. This is a mobile-friendly component that enables month navigation by swiping the smartphone. Swiping left will take to the previous month while the right to the next month.

After the date or time picker is opened by clicking inside the input field or using a button etc. the date can be selected by double click or single click the date and press the OK button.

Developer page Download plug-in

How to install and use the Angular datetime picker?

You may install the extended-datetimepicker via Bower or npm as follows.

Via Bower:

bower install extended-datetimepicker

Via npm:

npm install extended-datetimepicker

How to use it?

You need to add the dependency in the Angular Module:

angular.module(‘myAwesomeModule’, [

//other dependencies ignored

‘ngMaterialDatePicker’

]);

See the markup and complete code in the demos below.

A demo of date picker in an input field

In this demo, only the date can be picked. Click inside the input field and the calendar will display. Either double click the date or select a date and press Ok for selecting the date. You can see the selected date in the input field. See the complete code and output on the demo page:

Full code for this example:

<!DOCTYPE html>
<html ng-app="mdDatetimePickerDemo">
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.0-rc3/angular-material.min.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="css/angular-datetimepicker/material-datetimepicker.css" type="text/css"/>
<head>


</head>
<body ng-controller="DemoCtrl" layout="column">
<md-content class="md-padding">
    <div layout="column">
        <h1>Extended Angular Material DatePicker</h1>
    </div>

    <md-card layout="column">
        <md-toolbar class="md-primary">
            <div class="md-toolbar-tools">
                <h2>
                    <span>A demo of date picker</span>
                </h2>
            </div>
        </md-toolbar>
        <md-card-content class="md-padding">
            <p>
                You can double click / double tap to make selections.
            </p>

            <div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
                <md-input-container flex-gt-md="30">
                    <label>Datepicker Only</label>
                    <input time="false" date="true" mdc-datetime-picker type="text" id="date"
                           placeholder="Date"
                           ng-model="date" min-date="minDate" max-date="maxDate">
                </md-input-container>
                <div  flex-gt-md="grow" flex-md="initial" ex-source-code target="input"></div>
            </div>



        </md-card-content>

    </md-card>
</md-content>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.0-rc3/angular-material.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.min.js"></script>
<script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
<script type="text/javascript" src="js/angular-datetimepicker/beautifier.js"></script>
<script type="text/javascript" src="js/angular-datetimepicker/angular-material-datetimepicker.js"></script>
<script type="text/javascript" src="js/angular-datetimepicker/demo.js"></script>

</body>
</html>

The code for the date picker:

            <div layout-gt-md="row" layout="column" layout-align-gt-md="center center">

                <md-input-container flex-gt-md="30">

                    <label>Datepicker Only</label>

                    <input time="false" date="true" mdc-datetime-picker type="text" id="date"

                           placeholder="Date"

                           ng-model="date" min-date="minDate" max-date="maxDate">

                </md-input-container>

                <div  flex-gt-md="grow" flex-md="initial" ex-source-code target="input"></div>

            </div>

A demo of Angular Time Picker only

For creating only the time picker, use the date=”false” time=”true” attributes in the input field. For this demo, the time picker will display and just like the date only picker, you may double click the time for selection, have a look:

The input field code:

<input mdc-datetime-picker date="false" time="true" type="text" id="time" short-time="true"

  placeholder="Time"

   min-date="minDate"

   format="hh:mm a"

   ng-model="time">

An example of date and time picker with date range

You may also enable the visitors to pick the date and time in a single call. This can be done by using the “true” value for both date and time attributes.

In this demo, you may select the date and time along with the date range selection. For that, two input boxes are given for selecting the range. The date in the second input must be greater than the first date field. The user won’t be able to select the back dates in the second date picker for date range section:

Online Demo

See the complete code on the demo page.

For learning more about this excellent plug-in, visit the developer page.