Skip to content

dustinromey/ionic-datepicker

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

63 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

##Introduction:

This is a ionic-datepicker bower component which can be used with any Ionic framework's application.

View Demo

##Prerequisites.

  1. node.js, bower and gulp.

##How to use:

  1. In your project repository install the ionic date picker using bower

    bower install ionic-datepicker --save

  2. Then you can see the following directory structure see in your project folder

Directory structure

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>
  1. In your application module inject the dependency ionic-datepicker, in order to work with the ionic time picker
angular.module('mainModuleName', ['ionic', 'ionic-datepicker']){
 //
}
  1. Use the below format in your template's corresponding controller
$scope.currentDate = new Date();
  1. Then use the below format in your template / html file
<ionic-datepicker idate="currentDate" disablepreviousdates="true">
    <button class="button button-block button-positive"> {{ currentDate | date:'dd - MMMM - yyyy' }} </button>
</ionic-datepicker>

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.

##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.

Date picker buttons Date picker modal ##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

Bug Fix

5) v0.2.0

Disabling previous dates functionality 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

About

'ionic-datepicker' bower component for ionic framework applications

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 69.1%
  • HTML 23.5%
  • CSS 7.4%