Easy Code Stuff: Using Date Time Pickers In AngularJS

You may have used many Date Pickers using JQuery. In AngulrJS also you can use JQuery way to create Date Pickers. But it's not good way to do it. Because you will dynamically create multiple Date Pickers. So you have to initialize all of the Date Pickers after it's loads to the DOM. Otherwise it won't give you the Date Pickers. In AngularJS, it's slightly different. In AngularJS, You may have to use a AngularJS Directive to bind it.

Before doing it in AngularJS, lets see how we can do using JQuery. Lets Start With JQuery UI Date Picker. If you don't have the java script files, please download the below files.

Copy the below codes and view it in a browser. You will get the JQuery UI Date Picker.

<html>
<head>
    <link href="jquery-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
</head>
<body>
    <label>Date</label>
    <input type="text" id="datepicker" />
</body>
<script type="text/javascript" >
    $(document).ready(function () {
        $("#datepicker").datepicker();
    });
</script>
</html>

Now lets do it in AngularJS way. Hope you have basic knowledge of module and all. First of all add the AngularJS file. Then define the "ng-app" in <body> tag.

Now we need to create a directive and add it our app as below.

var app = angular.module('app', []);
app.directive('datepicker', function () {
    return {
        require: 'ngModel',
        link: function (scope, el, attr, ngModel) {
            $(el).datepicker({
                onSelect: function (dateText) {
                    scope.$apply(function () {
                        ngModel.$setViewValue(dateText);
                    });
                }
            });
        }
    };
});

Lets see the full code now.

<html>
<head>
    <link href="jquery-ui.css" rel="stylesheet" type="text/css"></link>
    <script src="angular.js" type="text/javascript"></script>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery-ui.js" type="text/javascript"></script>
</head>
<body ng-app="app">
    <label>Date</label>
    <input datepicker="" ng-model="mydate" type="text" />
</body>
<script type="text/javascript">
    var app = angular.module('app', []);
    app.directive('datepicker', function () {
        return {
            require: 'ngModel',
            link: function (scope, el, attr, ngModel) {
                $(el).datepicker({
                    onSelect: function (dateText) {
                        scope.$apply(function () {
                            ngModel.$setViewValue(dateText);
                        });
                    }
                });
            }
        };
    });
</script>
</html>

If you run this code in browser, you will get the JQuery-UI Date Picker same as what we got using JQuery.

There are many Date Pickers and Date Time Pickers with different implementations. Above example used JQuery-UI Date Picker. Lets see some of other Date Pickers and Date Time Pickers. I found the following Date Picker and Date Time Picker given by XDSOFT plugin.

Lets see how we can use this plugin in our AngularJS Applications. First of all download the resources from below link.

xdsoft.net datetimepicker

Lets see how we can implement this in JQuery.

<html>
<head>
    <link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.datetimepicker.full.js"></script>
</head>
<body>
    <h3>DatePicker</h3>
    <input type="text" id="pickerDate" />
    <br /><br />
    
    <h3>DateTimePicker</h3>
    <input type="text" id="datetimepicker" />
    <br /><br />
    
    <h3>TimePicker</h3>
    <input type="text" id="pickerTime" />
</body>
<script type="text/javascript">
    $(document).ready(function () {
        
        $('#pickerDate').datetimepicker({ 
            timepicker:false,
            format:'d/m/Y',  
        });
  
        $('#datetimepicker').datetimepicker({});

        $('#pickerTime').datetimepicker({
            datepicker:false,
            format:'H:i',
            step:15
        });

    });
</script>
</html>

Copy the codes and view it in a browser. You will get the XDSoft Date Pickers.

Now lets create a directive for the XDSoft Date Pickers.

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

app.directive('XDSoftDP_Date', function () {
    return {
        require: 'ngModel',
        link: function (scope, el, attr, ngModel) {
            $(el).datepicker({
  timepicker:false,
                onSelect: function (dateText) {
                    scope.$apply(function () {
                        ngModel.$setViewValue(dateText);
                    });
                }
            });
        }
    };
});

app.directive('XDSoftDP_Time', function () {
    return {
        require: 'ngModel',
        link: function (scope, el, attr, ngModel) {
            $(el).datepicker({
  datepicker:false,
                onSelect: function (dateText) {
                    scope.$apply(function () {
                        ngModel.$setViewValue(dateText);
                    });
                }
            });
        }
    };
});

app.directive('XDSoftDP_DateTime', function () {
    return {
        require: 'ngModel',
 link: function (scope, el, attr, ngModel) {
     $(el).datetimepicker({
  onSelect: function (dateText) {
      scope.$apply(function () { 
                        ngModel.$setViewValue(dateText);
             });
   }
     });
        }
    };
});

Hope you understood how it works. Like this you can add any of options given by the pickers. Simply add those options available in JQuery to AngularJS Directive.

Easy Code Stuff

Jan 4, 2016

Using Date Time Pickers In AngularJS

No comments:

JWT Token Decode Using Jquery