scott1991/ionic-datepicker

##Introduction:

This is an ionic-datepicker bower component, which can be used in any Ionic framework's application. No additional plugins required for this component.

View Demo

##Prerequisites.

node.js, bower and gulp.

##How to use:

In your project repository install the ionic-datepicker using bower

bower install ionic-datepicker --save OR npm i ionic-datepicker --save

This will install the latest version released.

Give the path of ionic-datepicker.bundle.min.js in your index.html file.

<!-- path to ionic/angularjs -->
<script src="lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js"></script>

The path will change if you have installed with npm.

In your application module inject the dependency ionic-datepicker, in order to work with the ionic time picker

angular.module('mainModuleName', ['ionic', 'ionic-datepicker']){
//
}

Use the below format in your template's corresponding controller

    $scope.datepickerObject = {
      titleLabel: 'Title',	//Optional
      todayLabel: 'Today',	//Optional
      closeLabel: 'Close',	//Optional
      setLabel: 'Set',	//Optional
      errorMsgLabel : 'Please select time.',	//Optional
      setButtonType : 'button-assertive',  //Optional
      inputDate: new Date(),	//Optional
      mondayFirst: true,	//Optional
      disabledDates:disabledDates,	//Optional
      monthList:monthList,	//Optional
<<<<<<< HEAD
      weekList:weekList,	//Optional
=======
>>>>>>> rajeshwarpatlolla/master
      from: new Date(2015, 7, 2),	//Optional
      to: new Date(2015, 7, 29),	//Optional
      callback: function (val) {	//Mandatory
        datePickerCallback(val);
      }
    };

$scope.datepickerObject is the main object, that we need to pass to the directive. The properties of this object are as follows.

a) titleLabel(Optional) : The label for 'Title' of the ionic-datepicker popup. Default value is Select Date

b) todayLabel(Optional) : The label for Today button. Default value is Today

c) closeLabel(Optional) : The label for Close button. Default value is Close

d) setLabel(Optional) : The label for Set button. Default value is Set

e) errorMsgLabel(Optional) : The label for the error message. Default value is Please select a date.

f) setButtonType(Optional) : This the type of the Set button. Default value is button-positive. You can give any valid ionic framework's button classes.

g) inputDate(Optional) : This is the date object to pass to the directive. You can give any date object to this property. Default value is new Date(). But if you wish to show the initial date in the HTML page, then you should define this property.

h) mondayFirst(Optional) : Set true if you wish to show monday as the first day. Default value is false.

i) disabledDates(Optional) : If you have a list of dates to disable, you can create an array like below. Default value is an empty array.

var disabledDates = [
      new Date(1437719836326),
      new Date(),
      new Date(2015, 7, 10), //months are 0-based, this is August, 10th!
      new Date('Wednesday, August 12, 2015'), //Works with any valid Date formats like long format
      new Date("08-14-2015"), //Short format
      new Date(1439676000000) //UNIX format
    ];

j) monthList(Optional) : This is an array with a list of all months. You can use this if you want to show months in some other language or format. You can create an array like below.

var monthList = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];

The default values are

["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

k) from(Optional) : This is a date object, from which you wish to enable the dates. You can use this property to disable previous dates by specifying from: new Date(). By default all the dates are enabled. Please note that months are 0 based.

l) to(Optional) : This is a date object, to which you wish to enable the dates. You can use this property to disable future dates by specifying to: new Date(). By default all the dates are enabled. Please note that months are 0 based.

m) callback(Mandatory) : This the callback function, which will get the selected date in to the controller. You can define this function as follows.

var datePickerCallback = function (val) {
  if (typeof(val) === 'undefined') {
	console.log('No date selected');
  } else {
	console.log('Selected date is : ', val)
  }
};

Then use the below format in your template / html file

<ionic-datepicker input-obj="datepickerObject">
  <button class="button button-block button-positive"> {{datepickerObject.inputDate | date:'dd - MMMM - yyyy'}}</button>
</ionic-datepicker>