misha130 / ion-datepicker Goto Github PK

The Selected date is allways today and not the value that i defined.

But when i press cancel the right date is flashing up and it closes imediately.

How can i resolve this issue?
I belive it has to behave like in the gif in #9 .

export class EditEvent {
  initDate:Date=Date.parse('yesterday -6 days');
  constructor(public navCtrl: NavController, public navParams: NavParams) {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad EditEvent id:', this.navParams.get('id'));
  }

  setDate(date: Date){
    console.log(date);
    this.initDate=date;
  }

}

<ion-content padding>
  <span ion-datepicker
  (ionChanged)="setDate($event);"
  [value] = "initDate"
  [locale] = "'Pages.EditEvent.datepickerLang' | translate"
  [okText] = "'alert.ok' | translate"
  [cancelText] = "'alert.cancel' | translate"
  clear class="ScheduleDate">
		<span>{{initDate | date}} <ion-icon name="clipboard" item-left ></ion-icon> </span>
	</span>
</ion-content>

ionic info:

Your system information:

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.4.2
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.2.1 Build version 8C1002

All works well, but if I try to deploy on the device with --prod configuration and use the directive, the following error is thrown:

ERROR Error: Uncaught (in promise): Error: No component factory found for undefined. Did you add it to @NgModule.entryComponents?
Error: No component factory found for undefined. Did you add it to @NgModule.entryComponents?

Even with okText and cancelText, the text on the buttons is empty:

<span ion-datepicker (ionChanged)="onSetDate($event);" (ionCanceled)="onCancelDate($event);" [value]="localDate" [min]="localDate" full="false" calendar="true" class="ScheduleDate" [okText]="Ok" [cancelText]="Cancel">

This is with Ionic 3.5

Set Min & Max Dates
min:new Date(),
max:new Date(new Date().setDate(new Date().getDate()+30)),

Below is the HTML -
<span ion-datepicker (ionChanged)="eventFromDate($event);" [value]="from" [min]="min" full="true" calendar="true" clear class="ScheduleDate">
{{from | date:'dd-MM-yyyy' }}

Now click on next month button for few times - Move to couple of months, and click back to go previous month, but it will not work.

I am not reporting on an issue here, just wanted to say thank you for a brilliant job! There were no problems installing, it worked on the first try, and it was not hard to change any functionality to my needs. I also changed the UI to fit in with my design. Once again - thank you very much!

The german shortname for selected month has only two letters. So Juni (June) and Juli (July) is the same.
It's nesessary to use min. 3 letters.

But there is enough space to show the full name too (is my preferred solution).

Please list the values of the options or explain how to use this option. Thanks.

Nice work!

The very first time the calendar displays, I have to click OK or Cancel twice in order to dismiss it. After that however, clicking OK/Cancel once dismisses the calendar correctly.

The datepicker doesn't work with Ionic 3. I tried with an empty tab project using ionic 3 settings from here:

https://github.com/driftyco/ionic/blob/master/CHANGELOG.md

Hey, I'm really liking this library! I am curious if the ionSelected function found on the interface is going to be implemented? I see it's in the code, but not in the Readme. For the functionality I'm looking for, I need to have a function to handle every time a date is selected.

Thanks!

When setting monday as the week start and sunday is the 1st day of the month the day will not appear.

I hate mondays.

How to apply language changes for calendar control....

https://github.com/ocombe/ng2-translate

Why does the component has these hard coded style? Example:

<button (tap)="onDone($event)" ion-button="" class="button button-clear button-small disable-hover button button-ios button-default button-default-ios"> <span class="button-inner">{{config.okText || 'OK'}}</span><div class="button-effect"></div> </button>

Hello,
I have Ionic2 application that I chosed to use your repo,
I'm trying to make this kinda thing to work:
<ion-input full="true" [min]="HerdDate" ion-datepicker type="text" [(ngModel)]="HerdDate" value="{{HerdDate | date}}">

HerdDate is public HerdDate: Date = new Date();
when I do {{ HerdDate | date }} on the template I get 8 Jan, 2017 and I would like to push that results into HerdDate how can I do it?
Thanks

BTW ~ There is a way to design the DatePicker?

Hello,

Pls fix the issue -

1. First choose a date ex: 2 March, then click Ok. Now you could see control is set with valid date.
2. Now clickc again choose 10 March, click on Cancel. Now the control should have 2 March as date, but you could see 10 March as date, which is invalid.

or is it possible to make this configurable with a boolean?

is it possible to change date display format to "dd/MM/yy" from " Thu Aug 31 2017 16:56:13 GMT+0530 (IST)"

I just noticed that the calendar modal doesn't show the weekdays for me, and the dates are oddly aligned.
I would expect the calendar to have a header like [S, M, T, W, Th, F, Sa] and for the dates to align with that.

Instead, I get Sunday showing up in a middle column:

Hi i have an issue when i set the localeStrings. It look as follows:

Cannot read property 5 of undefined at datepickercomponent.getSelectedWeekday. Here is the object i used:

{
monday: true,
weekdays: ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'],
months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]

}

Hello,

Can we add this datepicker as a pop instead of a modal? Thanks

Is there an option to set monday as first date? Thanks!

Hi Misha,

We recently updated our project to ionic 3 and changed all the pages to lazy loading(added one more module.ts). Right now, every page will blow out if that page has datepicker-ionic2 included.
The main error is "Can't bind to 'Value' since it isn't a known property fo span. (ionCHanged) ='xxx' ".

Do you have any suggestion? please help.

I am using the code from the example and when using a browser window in a desktop size rather than on a phone the two buttons at the bottom are on top of the last rows of days, making it not possible to select those.

Hello, you did a great job with this component thank you. I post this message because I am struggling trying to change the years, there is no way I can modify by clicking on it. Maybe I made a stupid mistake but I will be grateful if you can help me.

Also, is there a way to modify the theme color (primary, secondary color...) ?

Thanks, Nicolas

When we select a year from the dropdown option, the year is getting selected but after the year is selected, you go and select the date from calendar, the year is changing again by itself.
Please look into this issue.

Can disable Day of Week ? Example All disable Example Disable Saturday and Sunday

Instead of Wed Mar 25 2015 08:00:00 GMT+0800 (+08) format we would like to use a format like DD/MM/YYYY. Is this possible?

Hi,
I am planning to use ion-datepicker for both mobile devices and desktop. For mobile devices the look is perfect usability wise. But in desktop full screen date picker looks a bit weird. Is there a way to have a small size date picker for desktop.
I can see that in previous version there was a full property which isn't there now. Can you please guide me with the same.
Thanks in advance.

I want to change the calendar ui look like as @dovk changed in issue #6 ....

can you tell me how to change that one...

I can running with ionic serve fine with 2.3.1 , then build production successful .
But call the datepicker inner apk , got the "No component factory found for undefined" error?

Hello,

In october 2017 the first day is a sunday, if you have a datepicker with "doesStartFromMonday === true" then the first day is not shown. (see screenshot)

I've fixed it by adding 1 line DatePicker.service ->
DateService.createDateList(currentDate) {
var firstDayOfWeek = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).getDay();
if (this.doesStartFromMonday() && firstDayOfWeek === 0) firstDayOfWeek = 7;
...
}

It would be nice if you could fix this in the npm archive, otherwise we'll have to copy the datepicker files into our source tree.

many thanks,
Johan.

I tried to use this calendar but it gives me this error,

<span ion-datepicker (ionChanged)="setDate($event)"
[ERROR ->][value]="localDate"
[min]="localDate"
full="true"
"): ng:///AppModule/TrackerPage.html@13:2
Can't bind to 'min' since it isn't a known property of 'span'.

The example in the Readme file for dismissing the datepicker through the class is incorrect. It should be this:

Dismiss the datepicker from the class

    import { DatePickerDirective } from 'ion-datepicker';

	@ViewChild(DatePickerDirective) private datepickerDirective:DatePickerDirective;

    public closeDatepicker(){
        this.datepickerDirective.modal.dismiss();
    }
    

Note this is ionic 3.6.1

If I add the ion-datepicker directive, like in your example, to a span, the icon has to be touched twice to open the calendar.
The solution for this problem is to use a button or add the attribute "tabbable" (Description: http://technotip.com/5093/tappable-attribute-ionic-2/)

but then I have another problem. The date-selection does not work on every click. With the span and no tabbable attribute its fine.

Can anyone reproduce it?
I used an iPad Air with iOS 10.

Hi Misha130,
When I try to to build the project by using the command 'ionic build android --prod', it give me error. But it works if I remove the '--prod' and that will build in dev mode. I did some search on google, some guys said that is because your datepicker module does not support aot compiler.

Please help. Here is the error details:

ionic-app-scripts build "--prod"

[10:17:57] ionic-app-scripts 1.0.0
[10:17:57] build prod started ...
[10:17:57] clean started ...
[10:17:57] clean finished in less than 1 ms
[10:17:57] copy started ...
[10:17:57] ngc started ...
[10:17:58] build prod failed: Unexpected value 'DatePickerModule' imported by the module 'AppModule'
[10:17:58] ionic-app-script task: "build"
[10:17:58] Error: Unexpected value 'DatePickerModule' imported by the module 'AppModule'
Error: Unexpected value 'DatePickerModule' imported by the module 'AppModule'
at /Users/johnlu/Documents/logile/hybrid/newsvn/ELM/node_modules/@angular/compiler/bundles/compiler.umd.js:14675:33
at Array.forEach (native)
at CompileMetadataResolver._loadNgModuleMetadata (/Users/johnlu/Documents/logile/hybrid/newsvn/ELM/node_modules/@angular/compiler/bundles/compiler.umd.js:14660:51)
at CompileMetadataResolver.getUnloadedNgModuleMetadata (/Users/johnlu/Documents/logile/hybrid/newsvn/ELM/node_modules/@angular/compiler/bundles/compiler.umd.js:14636:23)
at addNgModule (/Users/johnlu/Documents/logile/hybrid/newsvn/ELM/node_modules/@angular/compiler/bundles/compiler.umd.js:12944:43)
at /Users/johnlu/Documents/logile/hybrid/newsvn/ELM/node_modules/@angular/compiler/bundles/compiler.umd.js:12957:16
at Array.forEach (native)
at _createNgModules (/Users/johnlu/Documents/logile/hybrid/newsvn/ELM/node_modules/@angular/compiler/bundles/compiler.umd.js:12956:28)
at analyzeNgModules (/Users/johnlu/Documents/logile/hybrid/newsvn/ELM/node_modules/@angular/compiler/bundles/compiler.umd.js:12700:16)
at analyzeAndValidateNgModules (/Users/johnlu/Documents/logile/hybrid/newsvn/ELM/node_modules/@angular/compiler/bundles/compiler.umd.js:12704:20)

npm ERR! Darwin 15.6.0

When using a locale with the week starting on monday, the week day in the header is off by one day. As you can see in the screenshot, the day is supposed to be Friday, but Saturday is shown.
The problem doesn't occur with locale 'en-UK', so I'm guessing it has to do with the week starting on monday.

[email protected] does not work on Android with --prod mode
Build success, but when in app datepicker is called, in console:
Error: Uncaught (in promise): Error: No component factory found for undefined. Did you add it to @NgModule.entryComponents?

Without "--prod" works fine.

Thanks in advance for the help.

cli packages:
    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:
    Cordova CLI : 7.0.1

local packages:
    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.0

System:
    Android SDK Tools : 25.2.5
    Node              : v7.10.0
    npm               : 4.5.0
    OS                : Windows 10

Nice plugin, please support "zh-CN","zh-TW" for Chinese users. Thank you.

Hello,
I want to use this package to let the user select his birthday date. But they can't change the year directly. Is there a way to achieve this?
Thanks

I'm using this with
(ionChanged)="setDate($event);"

No matter if I click ok or cancel the setDate function is called. I need setDate to be called only when OK button is called. Thanks!

Hi, when i click the datepicker and opens the modal, the cols of my page lost their css properties

Hi Bro,
I am trying to remove the following:
1.submit and ok button.
2.day,month,year,date at top of the calendar. I wanted to display only calendar UI.
I am trying to remove but it is not removing.Hope you had understand my problem.Can you please tell me how to do

How to display month and year only in datepicker.

converting
Fri Aug 18 2017 00:00:00 GMT+0530 (India Standard Time)
to ISO using toISOString() getting as
2017-08-17T18:30:00.000Z
which is one day before
can you suggest how to convert in to ISO

Hello!

Can I add time in my selector?

Is there anyway of making days not pickable? like i want to disable all Mondays form being selected
This is available in the ionic DateTime component with the option Dayvalues.

So is this available with this module ?

Hello a question the module can move the year and the month?

thanks!!!

I am getting below error any idea what am I doing wrong ?
ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'value' since it isn't a known property of 'span'. ("g> <span ion-datepicker locale="en" (ionChanged)="event($event)" okText="Ok" cancelText="Cancel" [ERROR ->][value]="localDate" clear > {{localDate | date:'dd-MM-yyyy' }}

Is it possbile to open the calendar programmatically?