I have designed a bower component ionic-datepicker, which can be used in any ionic framework application. No additional plugins required.
Please checkout the below Github repository for the bower component.
ionic-datepicker project @ Github
You can have a look at the ionic-timepicker bower component, which i have created earlier.
##Introduction:
This is an ionic-datepicker bower component which can be used with any Ionic framework’s application.
##Prerequisites.
- node.js, bower and gulp.
##How to use:
-
In your project repository install the ionic-datepicker using bower
bower install ionic-datepicker --save
This will install the latest version released.
- Then you can see the following directory structure see in your project folder
Give the path of style.css, templates.js and ionic-datepicker.js in your index.html file.
<link href="lib/ionic-datepicker/dist/style.css" rel="stylesheet">
<!-- path to ionic/angularjs js -->
<script src="lib/ionic-datepicker/dist/templates.js"></script>
<script src="lib/ionic-datepicker/dist/ionic-datepicker.js"></script>
-
In your application module inject the dependency
ionic-datepicker, in order to work with the ionic time pickerangular.module(‘mainModuleName’, [‘ionic’, ‘ionic-datepicker’]){
//
} -
Use the below format in your template’s corresponding controller
$scope.currentDate = new Date();
$scope.datePickerCallback = function (val) {
if(typeof(val)===‘undefined’){
console.log(‘Date not selected’);
}else{
console.log('Selected date is : ', val);
}
};
a) currentDate is the date object which we are passing to the ionic-datepicker.
b) datePickerCallback is the callback function which we have to pass to the ionic-datepicker. This function takes an argument which will return undefined if the user didnot selected any date. And returns a date object, if the user selects any date.
-
Then use the below format in your template / html file
{{ currentDate | date:'dd - MMMM - yyyy' }}
a) ionic-datepicker is the directive, to which we can pass required vales.
b) idate takes date object. If we don’t pass any value, the default value will be new Date().
c) disablepreviousdates takes true or false. true disables the past dates, and false doesn’t.
d) callback takes the callback function name which will be called once the date picker has been closed.
##Screen Shots:
Once you are successfully done with the above steps, you should be able to see the below screen shots.
I have used two buttons here.
The first screen shot shows only the buttons before clicking on them.
Once you click on the button you should see the second screen shot.
##Versions:
1) v0.1.0
The whole date picker functionality has been implemented, and can be installed with bower install ionic-datepicker --save
2) v0.1.1
Bug Fix. This is the latest version of ionic-datepicker component.
3) v0.1.2
Bug Fix. If we don’t pass the date to the time picker it will pick the todays date by default.
4) v0.1.3
5) v0.2.0
Disabling previous dates functionality added.
6) v0.3.0
a) User can select the years and months using the dropdown.
b) A callback function is added.
##License:
MIT
##Contact:
gmail : rajeshwar.patlolla@gmail.com
github : https://github.com/rajeshwarpatlolla
twitter : https://twitter.com/rajeshwar_9032
facebook : https://www.facebook.com/rajeshwarpatlolla
paypal : rajeshwar.patlolla@gmail.com
)
