raychenfj / ion-multi-picker

Multi Item Picker - An Ionic Custom Multi Picker Component
https://raychenfj.github.io/ion-multi-picker/
Other
236 stars 103 forks source link

SelectedIndex of child column will always reset to 0 when change parent coumn #27

Closed adoniscoder closed 7 years ago

adoniscoder commented 7 years ago

Hi, I want to use the library for showing date from another region to user. So I created a years , months and days array to show dates to user. in the target date region (persian date) the first 6 months of year are 31 days and next 5 months are 30 days and finally last month of year 29 or 30 depending of leap year or not. so I used parentVal attribute in days array to assign days to specific month but the problem is when user change the month for example 2 the days array will be refreshed but when I want to scroll the days it's only go on 2 and it's restart again and goes to 1. it's problem doesn't exist on first month and when month changes it's not working correct.

my function which make data for array:

  `public getYears(){
    let year = this.getCurrentJalaliYear();
    let years = [];
    for(let i=0;i<10;i++){
        let nextYear = parseInt(year)+i;
        years.push({text:nextYear.toString(),value:nextYear});
    }
    return years;
}

public getMonthes(){
    let monthes = [];
    let year = this.getCurrentJalaliYear();
    for(let i=1;i<=12;i++){
        for(let j=0;j<10;j++){
            let nextYear = parseInt(year)+j;
            monthes.push({text:i.toString(),value:i,parentVal:nextYear});
        }
    }
    return monthes;
}

public getDays(){
    let days = [];
    for(let i=1;i<=12;i++){
        if(i <= 6){
            for(let j=1;j<=31;j++){
                days.push({text:j.toString(),value:j,parentVal:i});
            }
        }else if(i > 6 && i<12){
            for(let j=1;j<=30;j++){
                days.push({text:j.toString(),value:j,parentVal:i});
            }
        }else{
            for(let j=1;j<=29;j++){
                days.push({text:j.toString(),value:j,parentVal:i});
            }
        }
    }
    return days;
}` 

initialize step of array : `
let y = this.persianDate.getYears(); let m = this.persianDate.getMonthes(); let d = this.persianDate.getDays();

        this.datesArray = [
            {
                 options: y
            },{
                options: m
            },{
                options: d
            }

           ];`

and the view : `

Disabled Picker
     <ion-multi-picker item-content [multiPickerColumns]="datesArray"></ion-multi-picker>

`

raychenfj commented 7 years ago

Hi @hahmadicorp , Your use case is interesting, glad to know the persian date. :) Initially, I didn't think about using it as a date picker, since Ionic2 provide an official one already. Will see what I can do and keep you post.

adoniscoder commented 7 years ago

Thanks for your response @raychenfj yes I know ionic have date picker and also date time but there is not very good support of other dates specifically for persian date!; I tried that but the result wasn't good. so I decided to write my own

raychenfj commented 7 years ago

Hi @hahmadicorp

Version 1.1.1 should fix your issue. Also,You can try the dependent picker in the demo https://raychenfj.github.io/ion-multi-picker/, see if it works as you expect ? It should keep the selected index of child column.