Using 720kb Angular Datepicker On AngularJs

What Will I Learn?

In this tutorial we will learn how to implement Date picker on AngularJS application that we make. Currently the Date picker is an important element on the form, the form will feel very old school if the user is asked to fill the date manually on the input text.

Requirements

• Install AngularJs
• Download Angular Datepicker from this Link
• Basic Javascript Knowledge
• Basic Html + Javascript Knowledge

Difficulty

• Basic

Tutorial Contents

On the first step for Datepicker installation, I will download Angular Datepicker from the official site, I have give you the link in the requirement section above. Extact the downloaded package and move to the src folder you will find the angular-datepicker.css and angular-datepicker.js

.
├── src
  └── angular-datepicker.css
  └── angular-datepicker.js

Now lets copy and move the file to your css and js folder. After move the file to your css and js folder lets configure the file on your AngularJS main html page. To implement the css file add the following line before the closing of head tag on your html file

<link href="../css/angular-datepicker.css" rel="stylesheet" type="text/css" />

To implement the js file add the following line before the closing of body tag on your html file.

<script src="../js/angular-datepicker.js"></script>

On your AngularJS main file, For this case I use app.js as my main file. Please add 720kb.datepicker on your angular module. The angular module must be same as this following block code.

var app = angular.module("myApp", ["ngClickCopy", "myApp.controller","ngRoute", "ngCookies","720kb.datepicker"]);

Now lets add a directive function on our app.js file

 app.directive("datepicker", function () {
      return {
        restrict: "A",
        require: "ngModel",
        link: function (scope, elem, attrs, ngModelCtrl) {
          var updateModel = function (dateText) {
            scope.$apply(function () {
              ngModelCtrl.$setViewValue(dateText);
            });
          };
          var options = {
            dateFormat: "dd/mm/yy",
            onSelect: function (dateText) {
              updateModel(dateText);
            }
          };
          elem.datepicker(options);
        }
      }
    });

Now lets open our html page and integrate the Datepicker on the Form Input Element. You can follow this block code.

 <datepicker date-format="yyyy-MM-dd"> <input type="text" class="form-control"  ng-model="birthdate"></datepicker>

Now, you can open your browser and your host and see the result. If there is not an error the date picker will be showing like this

Customize Datepicker
When we use Datepicker, we will be given default view from Datepicker but we also can customize the Datepicker. After selecting the date the result of default Datepicker will be showing like this

We can change the formating of the date by changing the date-format element

 date-format="dd-MM-yyyy"

Now in this example we can see the date format has changed, it means we managed to customize it. By using this tutorial we have mastering 720kb Datepicker in our project, with some creations and styling capabilities with html and css you can customize the look of Datepicker more user friendly like this following image.

You can create the view like the image above by following this block code with a little extra css styling that you can create yourself

 <div class="wrapper-md">
        <div class="panel-body">
          <div class="panel panel-default">
            <div class="panel-heading font-bold">                  
             Pencarian 
            </div>
            <div class="panel-body">
              <form class="form-inline" role="form">
                <div class="form-group">
                  <label class="sr-only" for="exampleInputDate1">Dari Tanggal</label>
                  <datepicker date-format="yyyy-MM-dd"> <input type="text" class="form-control"  placeholder="Dari Tanggal" ng-model="tglawal"></datepicker>
                </div>
                <div class="checkbox m-l m-r-xs">
                  <label class="i-checks">
                    <input type="checkbox" ng-click="cekTanggal" ng-model="myVar"><i></i> Ke Tanggal
                  </label>
                </div>
                <div class="form-group" ng-show="myVar">
                  <label class="sr-only" for="exampleInputDate2">To Tanggal</label>
                  <datepicker date-format="yyyy-MM-dd"> <input type="text" class="form-control"  placeholder="Ke Tanggal" ng-model="tglakhir"></datepicker>
                </div>
                <div class="form-group">
                  <label class="sr-only" for="exampleInputPassword2">Klinik</label>
                  <select class="form-control"  id="selklinik" style="margin-left:5px">
                    <option value="0">SEMUA KLINIK</option>                                
                    <option value="1">IKGP/IKGM</option>
                    <option value="2">PERIODONSIA</option>
                    <option value="3">ILMU PENYAKIT MULUT</option>
                    <option value="4">ILMU KEDOKTERAN GIGI ANAK</option>
                    <option value="5">KONSERVASI</option>
                    <option value="6">PROSTODONSIA</option>
                    <option value="7">ILMU BEDAH MULUT</option>
                    <option value="8">ORTODONSIA</option>
                    <option value="9">RADIOLOGI KEDOKTERAN GIGI</option>
                  </select>
                </div>
 <button class="btn btn-primary btn-addon" style="margin-left:5px"><i class="fa fa-search"></i>Search</button>
              </form>
            </div>
          </div>
        </div>
      </div>

So this is my tutorial on how to implement 720kb Datepicker in AngularJS. If you have any questions you can ask on the comment field below.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---