Ionic-datepicker Bower component for Ionic framework applications

Hi Guys, I released a new version of ionic-datepicker(v0.5.0). CSS classes for customisation are added and feature for disabling specific dates is also added.

Hi Guys, I released a new version of ionic-datepicker(v0.6.0). With a bug fix of selected date color. And a new feature to show Monday as the first day of the week.

Hi! first congrats for this great component! i just update to the last version, but the month and year select boxes are trimmed and does not show month and year, it happens only on the device, on the browser is ok, is there a fix ?

I have released a new version v0.7.0 of ionic-datepicker, which has few bug fixes and also few new features.

I have released a new version of ionic-datepicker i.e. v0.8.0. Please use this updated version to get the latest features.

I have released a new version of ionic-datepicker i.e. v0.9.0, with a feature and a bug fix. If anybody wish to use this plugin, use this latest version.
Thank you so much for all of you, for suggesting features and finding bugs.

Great Work first of all!

I am facing a small problem when i am using val.toJSON() for saving it in my database. The date i am getting is one day earlier.

for e.g. if i select 16th october 2015 the val.toJSON() makes it 2015-10-15T18:30:00.000Z

Can i have help over the reason?

Hi,
I’m new to both angular js & ionic. I’m using this Datepicker for one of my android app. Currently, stuck one point.

What I need is dynamically build the datepicker on the page from data obj. In simple case I know how to use the Datepicker but, at the time of dynamic generation of Datepicker, I don’t know how to do.

In normal case following ionic datepicker directive code, I’m using

<ionic-datepicker input-obj="datepickerObject">
	<button class="button icon-left ion-calendar"> {{datepickerObject.inputDate | date:datepickerObject.dateFormat}}</button>
</ionic-datepicker>

But, in case of dynamic generation, it needs to be something like this -

// For Start_Date
<ionic-datepicker input-obj="'datepickerObject_Start_Date">
	<button class="button icon-left ion-calendar">
		{{datepickerObject_Start_Date.inputDate | date:datepickerObject_Start_Date.dateFormat}}
	</button>
</ionic-datepicker>

// For End_Date
<ionic-datepicker input-obj="'datepickerObject_End_Date">
	<button class="button icon-left ion-calendar">
		{{datepickerObject_End_Date.inputDate | date:datepickerObject_End_Date.dateFormat}}
	</button>
</ionic-datepicker>

I’m getting those Start_Date & End_Date in “fieldRowKey” javascript variable. But, I can’t able to understand how to concate that in run time.

Ex -
"'datepickerObject_'+fieldRowKey" 
OR 
"{{'datepickerObject_'fieldRowKey}}"

I know it’s just matter of string concatenation and I tried in lot many way but, not getting teh right way to do.

Need some guidance.

Thanks

OK, This issue has been fixed.

When the date picker is open, today’s date is showing as default selected and the “selected_date_full” also showing the today’s date. But when we select any other date and then click on ‘Today’ button, today’s date column is selected, but selected date is not reflecting in the top section (‘selected_date_full’).

Please check the new release v1.0.0. This new version has lots of features and lots of bug fixes.

A new version has been released with few bug fixes. Please take a look at the new version v1.1.0 of the ionic-datepicker.

Hi rajeshwarpatlolla,

Could you please guide me on how to hide old/ future dates, i am new to Ionic.

<-ionic-datepicker input-obj=“nextAcionDateObj” >
<-button class=“button button-block button-stable”>
<-i class=“icon ion-calendar”> {{nextAcionDateObj.inputDate | date:‘dd - MMMM - yyyy’}}<-/button>
<-/ionic-datepicker>

controller:
$scope.nextAcionDateObj = {
setButtonType : ‘button-dark’, //Optional
todayButtonType : ‘button-dark’, //Optional
closeButtonType : ‘button-dark’, //Optional

 	callback: function (val) {  //Mandatory
    	datePickerCallback(val);
  	},
  	dateFormat: 'dd-MM-yyyy' //Optional
 };


 $scope.nextAcionDateObj.inputDate = new Date(); 

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

Thanks,
Pradeep

There are two properties from and to, which will disable past and future dates. Please check the documentation once again. I have mentioned about these variables and how to use them.

Thank you!!! could you please tell me how to make calendar to hide today .
i.e from: new Date() displays calendar from today’s date but, i want to hide current date and start the calendar from tomorrow.

Hi @pradi_smg7, You can check the below code.

var x = new Date();
x.setDate(x.getDate()+1)
```
Now the variable **x** will have tomorrow's date, which you can pass in the object.

Hello Rajeshwar,

Hope you are doing well and good.

Can you give me solution for ionic datepicker? I want to change date format of return val.

$scope.openDatePickerOne = function(val) {
var ipObj1 = {
callback: function(val) { //Mandatory
console.log('Return value from the datepicker popup is : ’ + val, new Date(val));
console.log (I want to change date format of val)
},
setLabel: ‘Ok’,
todayLabel: ‘Today’,
closeLabel: ‘Close’,
mondayFirst: false,
inputDate: new Date(),
weeksList: [“S”, “M”, “T”, “W”, “T”, “F”, “S”],
monthsList: [“Jan”, “Feb”, “March”, “April”, “May”, “June”, “July”, “Aug”, “Sept”, “Oct”, “Nov”, “Dec”],
templateType: ‘popup’,
showTodayButton: false,
dateFormat: ‘MMM dd yyyy’,
closeOnSelect: false,
disableWeekdays: [],
from: new Date(2016, 1, 1),
to: new Date(2016, 10, 30),
inputDate: new Date()
};
ionicDatePicker.openDatePicker(ipObj1);
};

Please refer to this link, which will provide some more info about the date object in java script, with which you will be able to change the format of the date.

Hi @rajeshwarpatlolla, what is the use of dateFormat property in the configuring object?

This format will be the format of date that you can see in the header.