Thursday, 23 July 2015

What is Entity Framework?

Entity framework is an Object/Relational Mapping (O/RM) framework. It is an enhancement to ADO.NET that gives developers an automated mechanism for accessing & storing the data in the database.


Entity framework is useful in three scenarios.
  • First, if you already have existing database or you want to design your database ahead of other parts of the application. 
  • Second, you want to focus on your domain classes and then create the database from your domain classes. 
  • Third, you want to design your database schema on the visual designer and then create the database and classes.

Entity Framework Architecture:


EDM (Entity Data Model): EDM consists of three main parts - 

  • Conceptual model, 
  • Mapping and 
  • Storage model.
 1. Conceptual Model: The conceptual model contains the model classes and their relationships.This will be independent from your database table design.

 2. Storage Model: Storage model is the database design model which includes tables, views, stored procedures, and their relationships and keys.

3. Mapping: Mapping consists of information about how the conceptual model is mapped to the storage model.


LINQ to Entities: LINQ to Entities is a query language used to write queries against the object model. It returns entities, which are defined in the conceptual model. You can use your LINQ skills here.

Entity SQL
: Entity SQL is another query language just like LINQ to Entities. However, it is a little more difficult than L2E and the developer will have to learn it separately.

Object Service:Object service is a main entry point for accessing data from the database and to return it back. Object service is responsible for materialization, which is the process of converting data returned from an entity client data provider (next layer) to an entity object structure.

Entity Client Data Provider:The main responsibility of this layer is to convert L2E or Entity SQL queries into a SQL query which is understood by the underlying database. It communicates with the ADO.Net data provider which in turn sends or retrieves data from the database.

ADO.Net Data Provider
:This layer communicates with the database using standard ADO.Net.

Versions Set up:

Entity Framework 5.0 API was distributed in two places, in NuGet package and in .NET framework. The .NET framework 4.0/4.5 included EF core API, whereas EntityFramework.dll via NuGet package included EF 5.0 specific features.

This has been changed with EF 6.0 which is included in EntityFramework.dll only and is not dependent on .NET framework.

Create Entity Data Model(EDM):

Entity Data Model is a model that describes entities and the relationships between them. Let's create first simple EDM for  database using Visual Studio 2012 and Entity Framework 6.

1. Open Visual Studio 2012 and create a console project.


Go to PROJECT menu of visual studio -> {project name} properties - and make sure that the project's target framework is .NET Framework 4.5, as shown below.



2. Now, add Entity Data Model by right clicking on the project in the solution explorer -> Add -> click New Item and select ADO.NET Entity Data Model from popup, Give the new item the name 'School' and click Add button.



3. Entity Data Model Wizard in VS2012 opens with four options to select from: EF Designer from database for database first approach, Empty EF Designer model for model first approach, Empty Code First model and Code First from database for Code-First approach. We will focus on the database-first approach in the basic tutorials so select EF Designer from database option and clickNext.



4. You can choose from your existing DB Connections or create a new connection by clicking on the 'New Connection' button. We will use the existing DB connection to the SchoolDB Database. This will also add a connection string to your app.config file with the default suffix with DB name. You can change this if you want. Click 'Next' after you set up your DB connection.



5. In this step, you need to choose the version of Entity Framework. We will use Entity Framework 6.0 in the basic tutorials so select Entity Framework 6.0 and click Next.



Note: If you have already installed the latest version of Entity Framework using NuGet manager as shown in the Setup Environment section then this step of the wizard will no longer appear since you have already installed Entity Framework.

6. This step will display all the Tables, Views and Stored Procedures (SP) in the database. Select the Tables, Views and SPs you want, keep the default checkboxes selected and click Finish. You can change Model Namespace if you want.





Pluralize or singularize generated object names checkbox
singularizes an entityset name, if the table name in the database is plural. For example, if SchoolDB has Students table name then entityset would be singular Student. Similarly, relationships between the models will be pluralized if the table has one-to-many or many-to-many relationship with other tables. For example, Student has many-to-many relationship with Course table so Student entity set will have plural property name 'Courses' for the collection of courses.

The second checkbox, Include foreign key columns in the model, includes foreign key property explicitly to represent the foreign key. For example, Student table has one-to-many relationship with Standard table. So every student is associated with only one standard. To represent this in the model, Student entityset includes StandardId property with Standard navigation property. If this checkbox is unchecked then it will only include the Standard property, but not the StandardId in the Student entityset.

The third checkbox, Import selected stored procedures and functions into entity model, automatically creates Function Imports for the stored procedures and functions. You don't need to manually import this, as was necessary prior to Entity Framework 5.0.




7. After clicking on 'Finish', a School.edmx file will be added into your project.

Open EDM designer by double clicking on School.edmx. This displays all the entities for selected tables and the relationships between them as shown below:


EDM also adds a connection string in the config file as shown below.

<?xml version="1.0"?>
<configuration>
  <configSections>
    <!-- For more information on Entity Framework configuration, visit http://go.microsoft.com/fwlink/?LinkID=237468 -->
    <section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false"/>
  </configSections>
  <startup>
    <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.5"/>
  </startup>
  <entityFramework>
    <defaultConnectionFactory type="System.Data.Entity.Infrastructure.SqlConnectionFactory, EntityFramework"/>
    <providers>
      <provider invariantName="System.Data.SqlClient" type="System.Data.Entity.SqlServer.SqlProviderServices, EntityFramework.SqlServer"/>
    </providers>
  </entityFramework>
  <connectionStrings>
    <add name="SchoolDBEntities" connectionString="metadata=res://*/SchoolDB.csdl|res://*/SchoolDB.ssdl|res://*/SchoolDB.msl;provider=System.Data.SqlClient;provider connection string=&quot;data source=.\sqlexpress;initial catalog=SchoolDB;integrated security=True;multipleactiveresultsets=True;application name=EntityFramework&quot;" providerName="System.Data.EntityClient"/>
  </connectionStrings>
</configuration>


In this way, you can create a simple EDM from your existing database.
Next: Model Browser,EntityMapping

Tuesday, 7 July 2015

Export table data to Excel and MS word in Jquery

Export to Excel:

html table which contains data as shown below.

<table id="tblviewtimesheet">
    <thead>
        <tr>
           
            <th>ID</th>
            <th>Emp Name</th>
            <th>Project Name</th>
            <th>Salary</th>
            <th>address</th>
            <th>designation</th>
        </tr>
    </thead>
    <tbody>
        <tr data-ng-repeat="emp in employeess[currentPage]">
         
            <td>
                <span>{{emp.Id}}</span>
            </td>
           
            <td>
                <span>{{emp .EmployeeName}}</span>
            </td>
            <td>
                <span>{{emp .Project}} ({{emp .ProjectCode}})</span>
            </td>
           
            <td>
                <span>{{emp .Salary}}</span>
            </td>
            <td>
                <span>{{emp .address}}</span>
            </td>
            <td>
                
               <span>{{emp.designation}}</span>
            </td>
            
        </tr>
    </tbody>

</table>



Script to export above table to Excel:


take one button in html write a on click function as shown



function fnExcelReport() {

    tab = document.getElementById('tblviewtimesheet');


    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
    {
        txtArea1.document.open("txt/html", "replace");
        txtArea1.document.write(tab);
        txtArea1.document.close();
        txtArea1.focus();
        sa = txtArea1.document.execCommand("SaveAs", true, "ViewTimesheet.xls");
    }
    else                 //other browser not tested on IE 11
        sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab), '_self');
    return (sa);
}


Script to export to Ms word:

   function fnWordreport() {

    var tab_text = "<table border='2px'><tr bgcolor='#827066'>";
    var textRange; var j = 0;
    tab = document.getElementById('tblreportdetails'); // id of table
    for (j = 0 ; j < tab.rows.length ; j++) {
        tab_text = tab_text + tab.rows[j].innerHTML + "</tr>";
        //tab_text=tab_text+"</tr>";
    }

    tab_text = tab_text + "</table>";
    tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
    tab_text = tab_text.replace(/<img[^>]*>/gi, ""); // remove if u want images in your table
    tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params

    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
    {
        txtArea1.document.open("txt/html", "replace");
        txtArea1.document.write(tab_text);
        txtArea1.document.close();
        txtArea1.focus();
        sa = txtArea1.document.execCommand("SaveAs", true, "Reportdetails.doc");
    }
    else                 //other browser not tested on IE 11
        sa = window.open('data: application/msword,' + encodeURIComponent(tab_text), '_self');

    return (sa);
}

Monday, 6 July 2015

date picker in angular js

Code for Date picker (to get dates between two date intervals)

(Week calendar and Date Calendar):

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example - example-week-input-directive-production</title>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>


</head>
<body ng-app="weekExample">

  <script>
        angular.module('weekExample', [])
          .controller('DateController', ['$scope'function ($scope) {
              $scope.example = {
                  value: new Date(2013, 0, 3)
              };
          }]);
    
    </script>

  
    <form name="myForm" ng-controller="DateController as dateCtrl">
        <label>
            Pick a date between in 2013:start
            <input id="exampleInput" type="week" name="input" ng-model="example.value"
                   placeholder="YYYY-W##" min="2012-W32"
                   max="2013-W52" required />
        </label>
        <input type="date" ng-model="sdate"   id="startdate"/>
       
     
        <div role="alert">
            <span class="error" ng-show="myForm.input.$error.required">
                Required!
            </span>
            <span class="error" ng-show="myForm.input.$error.week">
                Not a valid date!
            </span>
        </div>
        <tt>value = {{example.value | date: "yyyy-Www"}}</tt><br />
 
    </form>
</body>

</html>

just you need to place the above code in your html page to get week calendar and date calendar

Date picker with css:

example -1

html page:

<!doctype html>
<html ng-app="rev">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.7.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
    <div ng-controller="DatepickerDemoCtrl">
        <h4>Start</h4>
        <div class="form-horizontal">
            <p>
                <input type="text" datepicker-popup="{{format}}" ng-model="start" is-open="startOpened" min="minStartDate" max="maxStartDate" datepicker-options="dateOptions" close-text="Close" />
                <button class="btn" ng-click="openStart()"><i class="icon-calendar"></i></button>
            </p>
        </div>
        <h4>End</h4>
        <div class="form-horizontal">
            <p>
                <input type="text" datepicker-popup="{{format}}" ng-model="end" is-open="endOpened" min="minEndDate" max="maxEndDate" datepicker-options="dateOptions" close-text="Close" />
                <button class="btn" ng-click="openEnd()"><i class="icon-calendar"></i></button>
            </p>
        </div>
    </div>
</body>
</html>


example .js:

angular.module('rev', ['ui.bootstrap']);
var DatepickerDemoCtrl = function ($scope, $timeout) {
    $scope.start = new Date('11/20/13');
    $scope.end = new Date();

    $scope.minStartDate = 0; //fixed date
    $scope.maxStartDate = $scope.end; //init value
    $scope.minEndDate = $scope.start; //init value
    $scope.maxEndDate = $scope.end; //fixed date same as $scope.maxStartDate init value

    $scope.$watch('start', function (v) {
        $scope.minEndDate = v;
    });
    $scope.$watch('end', function (v) {
        $scope.maxStartDate = v;
    });

    $scope.openStart = function () {
        $timeout(function () {
            $scope.startOpened = true;
        });
    };

    $scope.openEnd = function () {
        $timeout(function () {
            $scope.endOpened = true;
        });
    };

    $scope.dateOptions = {
        'year-format': "'yy'",
        'starting-day': 1
    };
};

Example -2

Html page:

@{
    ViewBag.Title = "date1";
}

<!doctype html>
<html ng-app="rev">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
    @*<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">*@
    <link rel="stylesheet" type="text/css" href="http://720kb.github.io/csshelper/assets/ext/src/helper.css">

    <link href="~/Content/angular-datepicker.css" rel="stylesheet" />
    <style>
        input[type="text"] {
            border: 2px solid grey;
        }

        *:focus {
            outline: 4px solid red;
        }
    </style>
    <title>Angularjs Datepicker</title>
</head>
<body>
 
    <div class="separator50"></div>
    <div class="col6 offset-left2">
        <div class="col3">
            <div datepicker>
                <input ng-model="date1" type="text" class="angular-datepicker-input" />
            </div>
            Date 1 is: {{date1}}
        </div>
        <div class="col3">
            <div class="datepicker"
                 date-format="MMMM d, y"
                 date-min-limit="2014/09/07"
                 date-max-limit="2018/09/07"
                 button-prev='
                <i class="fa fa-arrow-circle-left"></i>'
                button-next='<i class="fa fa-arrow-circle-right"></i>'>
                <input ng-model="date2" type="text" class="angular-datepicker-input" />
            </div>
            Date 2 is: {{date2}}
        </div>
        <div class="col3">
            <datepicker>
                <input ng-model="date3" type="text" class="angular-datepicker-input" />
            </datepicker>
            Date 3 is: {{date3}}
        </div>
    </div>
   <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
  
   

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular-route.min.js"></script>
    <script src="~/Scripts/angular-datepicker.js"></script>
 
    <script src="~/Scripts/index.js"></script>
</body>
</html>


Index.js:



  'use strict';

  var app = angular.module('rev', [
    'ngRoute',
    'rev.datepicker'
  ]);


angular-datepicker.js:



/*global angular navigator*/

(function withAngular(angular) {

  'use strict';

  angular.module('rev.datepicker', [])
              .directive('datepicker', ['$window', '$compile', '$locale', '$filter', '$interpolate', function manageDirective($window, $compile, $locale, $filter, $interpolate) {

    var A_DAY_IN_MILLISECONDS = 86400000;
    return {
      'restrict': 'AEC',
      'scope': {
        'dateSet': '@',
        'dateMinLimit': '@',
        'dateMaxLimit': '@',
        'dateMonthTitle': '@',
        'dateYearTitle': '@',
        'buttonNextTitle': '@',
        'buttonPrevTitle': '@'
      },
      'link': function linkingFunction($scope, element, attr) {
        //get child input
        $scope.dateMonthTitle = $scope.dateMonthTitle || 'Select month';
        $scope.dateYearTitle = $scope.dateYearTitle || 'Select year';
        $scope.buttonNextTitle = $scope.buttonNextTitle || 'Next';
        $scope.buttonPrevTitle = $scope.buttonPrevTitle || 'Prev';

        var selector = attr.selector
          , thisInput = angular.element(selector ? element[0].querySelector('.' + selector) : element[0].children[0])
          , theCalendar
          , defaultPrevButton = '<b class="datepicker-default-button">&lang;</b>'
          , defaultNextButton = '<b class="datepicker-default-button">&rang;</b>'
          , prevButton = attr.buttonPrev || defaultPrevButton
          , nextButton = attr.buttonNext || defaultNextButton
          , dateFormat = attr.dateFormat
          , dateMinLimit
          , dateMaxLimit
          , date = new Date()
          , isMouseOn = false
          , isMouseOnInput = false
          , datetime = $locale.DATETIME_FORMATS
          , pageDatepickers
          , htmlTemplate = '<div class="_720kb-datepicker-calendar" ng-blur="hideCalendar()">' +
          //month+year header
          '<div class="_720kb-datepicker-calendar-header" ng-hide="isMobile()">' +
          '<div class="_720kb-datepicker-calendar-header-left">' +
          '<a href="javascript:void(0)" ng-click="prevMonth()" title="{{buttonPrevTitle}}">' + prevButton + '</a>' +
          '</div>' +
          '<div class="_720kb-datepicker-calendar-header-middle _720kb-datepicker-calendar-month">' +
          '{{month}} <a href="javascript:void(0)" ng-click="showYearsPagination = !showYearsPagination"><span>{{year}} <i ng-if="!showYearsPagination">&dtrif;</i> <i ng-if="showYearsPagination">&urtri;</i> </span> </a>' +
          '</div>' +
          '<div class="_720kb-datepicker-calendar-header-right">' +
          '<a href="javascript:void(0)" ng-click="nextMonth()" title="{{buttonNextTitle}}">' + nextButton + '</a>' +
          '</div>' +
          '</div>' +
          //Mobile month+year pagination
          '<div class="_720kb-datepicker-calendar-header" ng-show="isMobile()">' +
          '<div class="_720kb-datepicker-calendar-header-middle _720kb-datepicker-mobile-item _720kb-datepicker-calendar-month">' +
          '<select ng-model="month" title="{{dateMonthTitle}}" ng-change="selectedMonthHandle(month)">' +
          '<option ng-repeat="item in months" ng-selected="month === item" ng-disabled=\'!isSelectableMaxDate(item + " " + day + ", " + year) || !isSelectableMinDate(item + " " + day + ", " + year)\' ng-value="item">{{item}}</option>' +
          '</select>' +
          '</div>' +
          '</div>' +
          '<div class="_720kb-datepicker-calendar-header" ng-show="isMobile()">' +
          '<div class="_720kb-datepicker-calendar-header-middle _720kb-datepicker-mobile-item _720kb-datepicker-calendar-month">' +
          '<select ng-model="mobileYear" title="{{dateYearTitle}}" ng-change="setNewYear(mobileYear)">' +
          '<option ng-repeat="item in paginationYears" ng-selected="year === item" ng-value="item" ng-disabled="!isSelectableMinYear(item) || !isSelectableMaxYear(item)">{{item}}</option>' +
          '</select>' +
          '</div>' +
          '</div>' +
          //years pagination header
          '<div class="_720kb-datepicker-calendar-header" ng-show="showYearsPagination">' +
          '<div class="_720kb-datepicker-calendar-years-pagination">' +
          '<a ng-class="{\'_720kb-datepicker-active\': y === year, \'_720kb-datepicker-disabled\': !isSelectableMaxYear(y) || !isSelectableMinYear(y)}" href="javascript:void(0)" ng-click="setNewYear(y)" ng-repeat="y in paginationYears">{{y}}</a>' +
          '</div>' +
          '<div class="_720kb-datepicker-calendar-years-pagination-pages">' +
          '<a href="javascript:void(0)" ng-click="paginateYears(paginationYears[0])" ng-class="{\'_720kb-datepicker-item-hidden\': paginationYearsPrevDisabled}">' + prevButton + '</a>' +
          '<a href="javascript:void(0)" ng-click="paginateYears(paginationYears[paginationYears.length -1 ])" ng-class="{\'_720kb-datepicker-item-hidden\': paginationYearsNextDisabled}">' + nextButton + '</a>' +
          '</div>' +
          '</div>' +
          //days column
          '<div class="_720kb-datepicker-calendar-days-header">' +
          '<div ng-repeat="d in daysInString"> {{d}} </div> ' +
          '</div>' +
          //days
          '<div class="_720kb-datepicker-calendar-body">' +
          '<a href="javascript:void(0)" ng-repeat="px in prevMonthDays" class="_720kb-datepicker-calendar-day _720kb-datepicker-disabled">{{px}}</a>' +
          '<a href="javascript:void(0)" ng-repeat="item in days" ng-click="setDatepickerDay(item)" ng-class="{\'_720kb-datepicker-active\': day === item, \'_720kb-datepicker-disabled\': !isSelectableMinDate(year + \'/\' + monthNumber + \'/\' + item ) || !isSelectableMaxDate(year + \'/\' + monthNumber + \'/\' + item)}" class="_720kb-datepicker-calendar-day">{{item}}</a>' +
          '<a href="javascript:void(0)" ng-repeat="nx in nextMonthDays" class="_720kb-datepicker-calendar-day _720kb-datepicker-disabled">{{nx}}</a>' +
          '</div>' +
          '</div>' +
                     '</div>';

        // Respect previously configured interpolation symbols.
        htmlTemplate = htmlTemplate.replace(/{{/g, $interpolate.startSymbol())
            .replace(/}}/g, $interpolate.endSymbol());

        $scope.$watch('dateSet', function dateSetWatcher(value) {

          if (value) {

            date = new Date(value);

            $scope.month = $filter('date')(date, 'MMMM');//December-November like
            $scope.monthNumber = Number($filter('date')(date, 'MM')); // 01-12 like
            $scope.day = Number($filter('date')(date, 'dd')); //01-31 like
            $scope.year = Number($filter('date')(date, 'yyyy'));//2014 like
                                         $scope.setDaysInMonth($scope.monthNumber, $scope.year);
            $scope.setInputValue();
          }
        });

        $scope.$watch('dateMinLimit', function dateMinLimitWatcher(value) {
          if (value) {

            dateMinLimit = value;
          }
        });

        $scope.$watch('dateMaxLimit', function dateMaxLimitWatcher(value) {
          if (value) {

            dateMaxLimit = value;
          }
        });

        $scope.month = $filter('date')(date, 'MMMM');//December-November like
        $scope.monthNumber = Number($filter('date')(date, 'MM')); // 01-12 like
        $scope.day = Number($filter('date')(date, 'dd')); //01-31 like
         if ($scope.dateMaxLimit) {
            $scope.year = Number($filter('date')(new Date($scope.dateMaxLimit), 'yyyy'));//2014 like
         } else {
            $scope.year = Number($filter('date')(date, 'yyyy'));//2014 like
         }
        $scope.months = datetime.MONTH;
        $scope.daysInString = ['0', '1', '2', '3', '4', '5', '6'].map(function mappingFunc(el) {

          return $filter('date')(new Date(new Date('06/08/2014').valueOf() + A_DAY_IN_MILLISECONDS * el), 'EEE');
        });

        //create the calendar holder
        thisInput.after($compile(angular.element(htmlTemplate))($scope));

        //get the calendar as element
        theCalendar = element[0].querySelector('._720kb-datepicker-calendar');
        //some tricky dirty events to fire if click is outside of the calendar and show/hide calendar when needed
        thisInput.bind('focus click', function onFocusAndClick() {

          isMouseOnInput = true;

          $scope.showCalendar();
        });

        thisInput.bind('focusout blur', function onBlurAndFocusOut() {

          isMouseOnInput = false;
        });

        angular.element(theCalendar).bind('mouseenter', function onMouseEnter() {

          isMouseOn = true;
        });

        angular.element(theCalendar).bind('mouseleave', function onMouseLeave() {

          isMouseOn = false;
        });

        angular.element(theCalendar).bind('focusin', function onCalendarFocus() {

          isMouseOn = true;
        });

        angular.element($window).bind('click focus', function onClickOnWindow() {

          if (!isMouseOn &&
            !isMouseOnInput && theCalendar) {

            $scope.hideCalendar();
          }
        });

        $scope.isMobile = function isMobile() {

          if (navigator.userAgent && (navigator.userAgent.match(/Android/i)
             || navigator.userAgent.match(/webOS/i)
             || navigator.userAgent.match(/iPhone/i)
             || navigator.userAgent.match(/iPad/i)
             || navigator.userAgent.match(/iPod/i)
             || navigator.userAgent.match(/BlackBerry/i)
             || navigator.userAgent.match(/Windows Phone/i))){

              return true;
          }
        };

        $scope.resetToMinDate = function manageResetToMinDate() {

          $scope.month = $filter('date')(new Date(dateMinLimit), 'MMMM');
          $scope.monthNumber = Number($filter('date')(new Date(dateMinLimit), 'MM'));
          $scope.day = Number($filter('date')(new Date(dateMinLimit), 'dd'));
          $scope.year = Number($filter('date')(new Date(dateMinLimit), 'yyyy'));
        };

        $scope.resetToMaxDate = function manageResetToMaxDate() {

          $scope.month = $filter('date')(new Date(dateMaxLimit), 'MMMM');
          $scope.monthNumber = Number($filter('date')(new Date(dateMaxLimit), 'MM'));
          $scope.day = Number($filter('date')(new Date(dateMaxLimit), 'dd'));
          $scope.year = Number($filter('date')(new Date(dateMaxLimit), 'yyyy'));
        };

        $scope.nextMonth = function manageNextMonth() {

          if ($scope.monthNumber === 12) {

            $scope.monthNumber = 1;
            //its happy new year
            $scope.nextYear();
          } else {

            $scope.monthNumber += 1;
          }
          //set next month
          $scope.month = $filter('date')(new Date($scope.year, $scope.monthNumber - 1), 'MMMM');
          //reinit days
          $scope.setDaysInMonth($scope.monthNumber, $scope.year);

          //check if max date is ok
          if (dateMaxLimit) {
            if (!$scope.isSelectableMaxDate($scope.year + '/' + $scope.monthNumber + '/' + $scope.day)) {

              $scope.resetToMaxDate();
            }
          }
          //deactivate selected day
          $scope.day = undefined;
        };

        $scope.selectedMonthHandle = function manageSelectedMonthHandle (selectedMonth) {

          $scope.monthNumber = Number($filter('date')(new Date('01 ' + selectedMonth + ' 2000'), 'MM'));
          $scope.setDaysInMonth($scope.monthNumber, $scope.year);
          $scope.setInputValue();
        };

        $scope.prevMonth = function managePrevMonth() {

          if ($scope.monthNumber === 1) {

            $scope.monthNumber = 12;
            //its happy new year
            $scope.prevYear();
          } else {

            $scope.monthNumber -= 1;
          }
          //set next month
          $scope.month = $filter('date')(new Date($scope.year, $scope.monthNumber - 1), 'MMMM');
          //reinit days
          $scope.setDaysInMonth($scope.monthNumber, $scope.year);
          //check if min date is ok
          if (dateMinLimit) {

            if (!$scope.isSelectableMinDate($scope.year + '/' + $scope.monthNumber + '/' + $scope.day)) {

              $scope.resetToMinDate();
            }
          }
          //deactivate selected day
          $scope.day = undefined;
        };

        $scope.setNewYear = function setNewYear (year) {

          //deactivate selected day
          $scope.day = undefined;

          if (dateMaxLimit && $scope.year < Number(year)) {

            if (!$scope.isSelectableMaxYear(year)) {

              return;
            }
          } else if (dateMinLimit && $scope.year > Number(year)) {

            if (!$scope.isSelectableMinYear(year)) {

              return;
            }
          }

          $scope.year = Number(year);
          $scope.setDaysInMonth($scope.monthNumber, $scope.year);
          $scope.paginateYears(year);
        };

        $scope.nextYear = function manageNextYear() {

          $scope.year = Number($scope.year) + 1;
        };

        $scope.prevYear = function managePrevYear() {

          $scope.year = Number($scope.year) - 1;
        };

        $scope.setInputValue = function manageInputValue() {

          if ($scope.isSelectableMinDate($scope.year + '/' + $scope.monthNumber + '/' + $scope.day)
              && $scope.isSelectableMaxDate($scope.year + '/' + $scope.monthNumber + '/' + $scope.day)) {

            var modelDate = new Date($scope.year + '/' + $scope.monthNumber + '/' + $scope.day);

            if (attr.dateFormat) {

              thisInput.val($filter('date')(modelDate, dateFormat));
            } else {

              thisInput.val(modelDate);
            }

            thisInput.triggerHandler('input');
            thisInput.triggerHandler('change');//just to be sure;
          } else {

            return false;
          }
        };

        $scope.classHelper = {
            'add': function add(ele, klass){
                if (ele.className.indexOf(klass) > -1){
                    return;
                }
                var classes = ele.className.split(' ');
                classes.push(klass);
                ele.className = classes.join(' ');
            },
            'remove': function remove(ele, klass){
                var i, classes;
                if (ele.className.indexOf(klass) === -1){
                  return;
                }
                classes = ele.className.split(' ');
                for (i = 0; i < classes.length; i += 1){
                  if (classes[i] === klass){
                        classes = classes.slice(0, i).concat(classes.slice(i + 1));
                        break;
                  }
                }
                ele.className = classes.join(' ');
            }
        };

        $scope.showCalendar = function manageShowCalendar() {
          //lets hide all the latest instances of datepicker
          pageDatepickers = $window.document.getElementsByClassName('_720kb-datepicker-calendar');

          angular.forEach(pageDatepickers, function forEachDatepickerPages(value, key) {
            if (pageDatepickers[key].classList) {
              pageDatepickers[key].classList.remove('_720kb-datepicker-open');
            } else {
              $scope.classHelper.remove(pageDatepickers[key], '_720kb-datepicker-open');
            }
          });

          if (theCalendar.classList) {
            theCalendar.classList.add('_720kb-datepicker-open');
          } else {
            $scope.classHelper.add(theCalendar, '_720kb-datepicker-open');
          }
        };

        $scope.hideCalendar = function manageHideCalendar() {
          if (theCalendar.classList){
            theCalendar.classList.remove('_720kb-datepicker-open');
          } else {
            $scope.classHelper.remove(theCalendar, '_720kb-datepicker-open');
          }
        };


        $scope.setDaysInMonth = function setDaysInMonth(month, year) {

          var i
            , limitDate = new Date(year, month, 0).getDate()
            , firstDayMonthNumber = new Date(year + '/' + month + '/' + 1).getDay()
            , lastDayMonthNumber = new Date(year + '/' + month + '/' + limitDate).getDay()
            , prevMonthDays = []
            , nextMonthDays = []
            , howManyNextDays
            , howManyPreviousDays
            , monthAlias;

          $scope.days = [];

          for (i = 1; i <= limitDate; i += 1) {

            $scope.days.push(i);
          }
          //get previous month days is first day in month is not Sunday
          if (firstDayMonthNumber !== 0) {

            howManyPreviousDays = firstDayMonthNumber;

            //get previous month
            if (Number(month) === 1) {

              monthAlias = 12;
            } else {

              monthAlias = month - 1;
            }
            //return previous month days
            for (i = 1; i <= new Date(year, monthAlias, 0).getDate(); i += 1) {

              prevMonthDays.push(i);
            }
            //attach previous month days
            $scope.prevMonthDays = prevMonthDays.slice(-howManyPreviousDays);
          } else {
            //no need for it
            $scope.prevMonthDays = [];
          }

          //get next month days is first day in month is not Sunday
          if (lastDayMonthNumber < 6) {

            howManyNextDays = 6 - lastDayMonthNumber;
            //get previous month

            //return next month days
            for (i = 1; i <= howManyNextDays; i += 1) {

              nextMonthDays.push(i);
            }
            //attach previous month days
            $scope.nextMonthDays = nextMonthDays;
          } else {
            //no need for it
            $scope.nextMonthDays = [];
          }
        };

        $scope.setDatepickerDay = function setDatepickeDay(day) {

          $scope.day = Number(day);
          $scope.setInputValue();
          $scope.hideCalendar();
        };

        $scope.paginateYears = function paginateYears (startingYear) {

           $scope.paginationYears = [];

           var i
              , theNewYears = []
              , daysToPrepend = 10, daysToAppend = 10;

           if ($scope.isMobile()) {
              daysToPrepend = 50;
              daysToAppend = 50;
              if ( $scope.dateMinLimit && $scope.dateMaxLimit) {
                 startingYear = new Date($scope.dateMaxLimit).getFullYear();
                 daysToPrepend = startingYear - new Date($scope.dateMinLimit).getFullYear();
                 daysToAppend = 1;
              }
           }

           for (i = daysToPrepend; i > 0; i -= 1) {

              theNewYears.push(Number(startingYear) - i);
           }

           for (i = 0; i < daysToAppend; i += 1) {

              theNewYears.push(Number(startingYear) + i);
           }

          //check range dates
          if (dateMaxLimit && theNewYears && theNewYears.length && !$scope.isSelectableMaxYear(Number(theNewYears[theNewYears.length - 1]) + 1)) {

            $scope.paginationYearsNextDisabled = true;
          } else {

            $scope.paginationYearsNextDisabled = false;
          }

          if (dateMinLimit && theNewYears && theNewYears.length && !$scope.isSelectableMinYear(Number(theNewYears[0]) - 1)) {

            $scope.paginationYearsPrevDisabled = true;
          } else {

            $scope.paginationYearsPrevDisabled = false;
          }

          $scope.paginationYears = theNewYears;
        };

        $scope.isSelectableMinDate = function isSelectableMinDate (aDate) {
          //if current date
          if (!!dateMinLimit &&
             !!new Date(dateMinLimit) &&
             new Date(aDate).getTime() < new Date(dateMinLimit).getTime()) {

            return false;
          }

          return true;
        };

        $scope.isSelectableMaxDate = function isSelectableMaxDate (aDate) {

          //if current date
          if (!!dateMaxLimit &&
             !!new Date(dateMaxLimit) &&
             new Date(aDate).getTime() > new Date(dateMaxLimit).getTime()) {

            return false;
          }

          return true;
        };

        $scope.isSelectableMaxYear = function isSelectableMaxYear (year) {

          if (!!dateMaxLimit &&
            year > new Date(dateMaxLimit).getFullYear()) {

            return false;
          }

          return true;
        };

        $scope.isSelectableMinYear = function isSelectableMinYear (year) {

          if (!!dateMinLimit &&
            year < new Date(dateMinLimit).getFullYear()) {

            return false;
          }

          return true;
        };

        //check always if given range of dates is ok
        if (dateMinLimit && !$scope.isSelectableMinYear($scope.year)) {

          $scope.resetToMinDate();
        }

        if (dateMaxLimit && !$scope.isSelectableMaxYear($scope.year)) {

          $scope.resetToMaxDate();
        }

        $scope.paginateYears($scope.year);
        $scope.setDaysInMonth($scope.monthNumber, $scope.year);
      }
    };
  }]);
}(angular));

angular-datepicker.css:

datepicker a, [datepicker] a, .datepicker a{
  color:inherit;
  text-decoration:none;
}
datepicker a:hover, [datepicker] a:hover, .datepicker a:hover{
  text-decoration:none;
}
datepicker select, datepicker select:focus, datepicker select:hover,
.datepicker select, .datepicker select:focus, .datepicker select:hover
[datepicker] select, [datepicker] select:focus, [datepicker] select:hover{
  width:100%;
   overflow: hidden;
   background:none;
   color:#fff;
   background-color: #138EFA;
   border: 1px solid rgba(0,0,0,0.05);
   height: 30px;
   border-radius:2px;
}
datepicker, .datepicker, [datepicker],
._720kb-datepicker-calendar-header,
._720kb-datepicker-calendar-body,
._720kb-datepicker-calendar-days-header,
._720kb-datepicker-calendar-years-pagination-pages {
  font-family: Helvetica Neue;
  font-size: 13.5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  float: left;
  clear: right;
  position: relative;
}
._720kb-datepicker-calendar {
  background: white;
  color: #333;
  position: absolute;
  z-index: 999;
  min-width: 220px;
  margin: 0 auto;
  width: 101%;
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
  visibility: hidden;
  overflow:hidden;
  margin-left:-0.5%;
  padding: 0 0 2% 0;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
._720kb-datepicker-calendar._720kb-datepicker-open {
  visibility: visible;
}
._720kb-datepicker-calendar-header {
  text-align: center;
  font-size: 15px;
  line-height: 40px;
}
._720kb-datepicker-calendar-header:nth-child(odd) {
  background: #138EFA;
}
._720kb-datepicker-calendar-header:nth-child(even) {
  background: #7BC6FC;
}
._720kb-datepicker-calendar-header-left,
._720kb-datepicker-calendar-header-middle,
._720kb-datepicker-calendar-header-right {
  width: 15%;
  float: left;
}
._720kb-datepicker-calendar-header-middle {
  width: 70%;
}
._720kb-datepicker-calendar-body {
  width: 96%;
  margin: 2%;
  text-align: center;
}
._720kb-datepicker-calendar-day {
  cursor: pointer;
  font-size: 12.5px;
  width: 12.2%;
  margin:5px 1%;
  padding: 1.5% 0;
  float: left;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
}
._720kb-datepicker-calendar-day:hover,._720kb-datepicker-calendar-day._720kb-datepicker-active {
  background: rgba(0, 0, 0, 0.03);
}
._720kb-datepicker-calendar-header a, ._720kb-datepicker-calendar-header a:hover {
  text-decoration:none;
  padding:3% 9% 4% 9%;
  font-size: 13.5px;
  color:rgba(0, 0, 0, 0.55);
  font-weight: bold;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
._720kb-datepicker-calendar-header a:hover {
  color:rgba(0, 0, 0, 0.9);
  background: rgba(255, 255, 255, 0.45);
}
._720kb-datepicker-calendar-month {
  color:#fff;
}
._720kb-datepicker-calendar-month span {
  font-size: 13px;
  margin-left:1%;
  color:rgba(0, 0, 0, 0.4);
}
._720kb-datepicker-calendar-month a span  i {
  font-style: normal;
  font-size:15px;
}
._720kb-datepicker-calendar-month a, ._720kb-datepicker-calendar-month a:hover {
  padding: 3px;
  margin-left:1%;
}
._720kb-datepicker-calendar-years-pagination{
  padding:2% 0 0 0;
  float:left;
  clear: right;
  width: 100%;
}
._720kb-datepicker-calendar-years-pagination a, ._720kb-datepicker-calendar-years-pagination a:hover {
  font-size:12px;
  padding:0 7px;
  font-weight: normal;
  margin:3px 1% 0 1%;
  line-height: 20px;
  display: inline-block;
}
._720kb-datepicker-calendar-years-pagination a._720kb-datepicker-active {
  color:rgba(0, 0, 0, 0.9);
  font-weight: 500;
  background: rgba(255, 255, 255, 0.45);
}
._720kb-datepicker-calendar-years-pagination-pages a,._720kb-datepicker-calendar-years-pagination-pages a:hover{
  padding:5px 10px;
}
._720kb-datepicker-calendar-days-header{
  max-width: 100%;
  margin:0 auto;
  padding:0 2% 0 2%;
  background: rgba(19, 142, 250, 0.08);
  border-bottom:1px solid rgba(0,0,0,0.02);
}
._720kb-datepicker-calendar-days-header div{
 width: 13.2%;
 font-weight: 500;
 font-size: 11.5px;
 padding:10px 0.5%;
 float:left;
 text-align: center;
 color:rgba(0,0,0,0.7);
}
._720kb-datepicker-calendar-days
._720kb-datepicker-default-button{
  font-size: 18.5px;
  position: relative;
  bottom:-0.5px;
}
._720kb-datepicker-calendar-header-middle._720kb-datepicker-mobile-item{
  width:95%;
  float:none;
  margin:0 auto;
}
._720kb-datepicker-item-hidden{
  visibility:hidden;
}
._720kb-datepicker-calendar-day._720kb-datepicker-disabled,
._720kb-datepicker-calendar-day._720kb-datepicker-disabled:hover,
._720kb-datepicker-calendar-years-pagination a._720kb-datepicker-disabled,
._720kb-datepicker-calendar-years-pagination a._720kb-datepicker-disabled:hover,
._720kb-datepicker-calendar-years-pagination a._720kb-datepicker-active._720kb-datepicker-disabled,
._720kb-datepicker-calendar-years-pagination a._720kb-datepicker-active._720kb-datepicker-disabled:hover{
  color:rgba(0,0,0,0.2);
  background: rgba(25,2,0,0.02);
  cursor: default;
}