Implementing DatePicker using Angular UI in MVC5 ~ MiTechDev.com

Mitechdev.com is a programming blog which focused on Web Programming and development

Friday, 24 June 2016

Implementing DatePicker using Angular UI in MVC5

06:20:00 Posted by raviteja swayampu , , No comments
Hi every one in this tutorial i am going to explain about How to implement popup date picker using Angular UI in ASP.NET MVC5 application.Previously i shown how to implement date picker using jquery UI.It is very simple and easy to implement.In the same way for Angular enabled websites we implement date pickers using Angular User Interface.
These following are some simple implementations using Angular in MVC5
As a part of the Angular UI series today i am explaining about how to work with angular UI popup date picker.The final UI of Date picker is like below.

Implementing DatePicker using Angular UI in MVC5

Implementing Datepicker

Step 1: Create web application 

1.open visual studio 2013 and create New project.
2.Use MVC template to create necessary files for the project web applicaton.
3.Add below script reference files for Date picker.
Note : we can include these reference files through Nuget package Manager console or can download directly from site.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!--application script files for angular components-->
    <script src="~/Scripts/app.js"></script>

Step 2 :create Controller and View

1.Create Controller and name it as HomeController.cs.
2.Create Index action and add a View and name it as Index.cshtml.
3.Replace the Index.cshtml code with the below code
@{
    ViewBag.Title = "Home Page";
}
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!--application script files for angular components-->
    <script src="~/Scripts/app.js"></script>

    <div ng-app="ui.bootstrap.demo" ng-controller="DatepickerPopupDemoCtrl">
        <h4>Popup</h4>
        <div class="row">
            <div class="col-md-6">
                <p class="input-group">
                    <input type="text" class="form-control"
                           uib-datepicker-popup="{{format}}"    @*format of the date picked*@
                           ng-model="dtpicker"                  
                           is-open="popup1.opened"              @*to show or hide the popup it is used*@
                           popup-placement="bottom-right"       @*display position of the datepicker either bottom/right/right-left/bottom-left etc*@
                           datepicker-options="dateOptions"     @*datepicker options like minDate,maxDate etc*@
                           ng-required="true"
                           close-text="Close"                   @*by deault 'Done' you can chage it*@
                           alt-input-formats="altInputFormats"  @*a list of alternative formats for manual entry*@
                           show-button-bar="true"           @*By default button bar showed at end of datepicker popup*@
                           close-on-date-selection="true" />    @*Closes the popup after selection of date*@
                    @*datepicker-popup-template-url="url of template" --we can over ride popup template url
                    datepicker-template-url="url"  --override datepicker url*@
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>
                </p>
            </div>
        </div>
        <div class="row">
            <h3>You selected:</h3><br />
            <!--Displays the selected date here-->
            <pre>Selected date is: <em>{{dtpicker | date:'fullDate' }}</em></pre>
        </div>
    </div>
4.Here,in the above code i almost explained about the directives used in the Date picker input element.
5.For more details and options please click here.

Step 3: Add Angular script files 


1.create a script file in the Scripts folder(in this application i named i as app.js).
2.Now replace the code with the below code..
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function ($scope) {
    $scope.dateOptions = {
        //dateDisabled: disabled,   disables the popup
        formatYear: 'yy',
        maxDate: new Date(2020, 5, 22),
        minDate: new Date(),
        startingDay: 1,
    };
    /*// Disable weekend selection
    function disabled(data) {
        var date = data.date,
          mode = data.mode;
        return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
    }*/
    $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
    $scope.format = $scope.formats[0];
    $scope.open = function () {
        $scope.popup1.opened = true;
    };
    $scope.popup1 = {
        opened: false
    };
    /*we can set date
    $scope.setDate = function (year, month, day) {
        $scope.dtpicker = new Date(year, month, day);
    };*/
});
3.We must include the dependencies ngAnimate and ui.bootstrap to the angular application.
4. we can specify the format,can disable the selection of week ends.
5.Finally run the application and see the output in browser.

Implementing DatePicker using Angular UI in MVC5

Download the source code of the application here Source

Conclusion:

I hope this tutorial may helpful for many readers.Please subscribe to this blog www.mitechdev.com to get posts to your mail inbox.And follow through social networks(Facebook,twitter,google plus) for daily updates...


0 comments:

Post a Comment