ios - expedia のようなカレンダー用の DSLCalendarView のカスタム実装

Question

リポジトリ https://github.com/PeteC/DSLCalendarViewを変更して、ユーザーが開始日と終了日をタップしてその間の日付を自動的に選択できるようにしようとしています。付随するデモに次のコードを実装することで、これを実現しました。

問題は、カレンダーをドラッグして日付範囲を選択する元の実装が壊れていることです。

ヘルプ/ガイダンスは大歓迎です。また、同じことを達成する他のライブラリを知っていれば、本当に感謝しています。私が探している機能は次のとおりです。 ユーザーが最初の日付、最後の日付を選択し、中央の日付を選択として表示できるようにします。

ViewController.m で

- (DSLCalendarRange*)calendarView:(DSLCalendarView *)calendarView didDragToDay:(NSDateComponents *)day selectingRange:(DSLCalendarRange *)range {

    if (!self.startDate) {

        //        self.startDate = [self.dateFormatter dateFromString:[NSString stringWithFormat:@"%d/%d/%d",range.startDay.month, range.startDay.day,range.startDay.year]];
        //self.startDate = range.s

        self.startDate = range.startDay;

        self.hasSelectedStartDate = YES;

        return [[DSLCalendarRange alloc] initWithStartDay:self.startDate endDay:self.startDate];



        NSLog(@"start date set to: %@",self.startDate);
    }
    else if (self.startDate && !self.endDate)
    {

        //self.endDate = [self.dateFormatter dateFromString:[NSString stringWithFormat:@"%d/%d/%d",range.startDay.month, range.startDay.day,range.startDay.year]];
        self.endDate = range.endDay;

        NSLog(@"Start date is: %@",self.startDate);
        NSLog(@"end date set to: %@",self.endDate);

        return [[DSLCalendarRange alloc] initWithStartDay:self.startDate endDay:self.endDate];


    } else if (self.startDate && self.endDate)
    {
        return [[DSLCalendarRange alloc] initWithStartDay:self.startDate endDay:self.endDate];

        self.hasSelectedStartDate = NO;
    }
    NSLog(@"Select range programattically");

}

DSLCalendarView.m では、上記の実装を補完するために、次のコードを touchedEnded に追加しました。

//added code: Aakash
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
//added condition here besides the other code
if ([self.delegate respondsToSelector:@selector(hasSelectedStartDate)]) {
    self.flag = [self.delegate performSelector:@selector(hasSelectedStartDate)];
    NSLog(@"Value: %hhd",self.flag);
}

if (!self.draggedOffStartDay && [self.draggingStartDay isEqual:touchedView.day] && !self.flag) {
self.selectedRange = [[DSLCalendarRange alloc] initWithStartDay:touchedView.day endDay:touchedView.day];
}

タッチ処理の元のコードは次のとおりです。

#pragma mark - Touches

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    DSLCalendarDayView *touchedView = [self dayViewForTouches:touches];
    if (touchedView == nil) {
        self.draggingStartDay = nil;
        return;
    }

    self.draggingStartDay = touchedView.day;
    self.draggingFixedDay = touchedView.day;
    self.draggedOffStartDay = NO;

    DSLCalendarRange *newRange = self.selectedRange;
    if (self.selectedRange == nil) {
        newRange = [[DSLCalendarRange alloc] initWithStartDay:touchedView.day endDay:touchedView.day];
    }
    else if (![self.selectedRange.startDay isEqual:touchedView.day] && ![self.selectedRange.endDay isEqual:touchedView.day]) {
        newRange = [[DSLCalendarRange alloc] initWithStartDay:touchedView.day endDay:touchedView.day];
    }
    else if ([self.selectedRange.startDay isEqual:touchedView.day]) {
        self.draggingFixedDay = self.selectedRange.endDay;
    }
    else {
        self.draggingFixedDay = self.selectedRange.startDay;
    }

    if ([self.delegate respondsToSelector:@selector(calendarView:didDragToDay:selectingRange:)]) {
    newRange = [self.delegate calendarView:self didDragToDay:touchedView.day selectingRange:newRange];
    }
    self.selectedRange = newRange;

    [self positionCalloutViewForDayView:touchedView]; }

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    if (self.draggingStartDay == nil) {
        return;
    }

    DSLCalendarDayView *touchedView = [self dayViewForTouches:touches];
    if (touchedView == nil) {
        self.draggingStartDay = nil;
        return;
    }

    DSLCalendarRange *newRange;
    if ([touchedView.day.date compare:self.draggingFixedDay.date] == NSOrderedAscending) {
        newRange = [[DSLCalendarRange alloc] initWithStartDay:touchedView.day endDay:self.draggingFixedDay];
    }
    else {
        newRange = [[DSLCalendarRange alloc] initWithStartDay:self.draggingFixedDay endDay:touchedView.day];
    }

    if ([self.delegate respondsToSelector:@selector(calendarView:didDragToDay:selectingRange:)]) {
        newRange = [self.delegate calendarView:self didDragToDay:touchedView.day selectingRange:newRange];
    }
    self.selectedRange = newRange;

    if (!self.draggedOffStartDay) {
        if (![self.draggingStartDay isEqual:touchedView.day]) {
            self.draggedOffStartDay = YES;
        }
    }

    [self positionCalloutViewForDayView:touchedView]; }

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    if (self.draggingStartDay == nil) {
        return;
    }

    DSLCalendarDayView *touchedView = [self dayViewForTouches:touches];
    if (touchedView == nil) {
        self.draggingStartDay = nil;
        return;
    }


    if (!self.draggedOffStartDay && [self.draggingStartDay isEqual:touchedView.day]) {
    self.selectedRange = [[DSLCalendarRange alloc] initWithStartDay:touchedView.day endDay:touchedView.day];
    }

    self.draggingStartDay = nil;

    // Check if the user has dragged to a day in an adjacent month
    if (touchedView.day.year != _visibleMonth.year || touchedView.day.month != _visibleMonth.month) {
        // Ask the delegate if it's OK to animate to the adjacent month
        BOOL animateToAdjacentMonth = YES;
        if ([self.delegate respondsToSelector:@selector(calendarView:shouldAnimateDragToMonth:)]) {
            animateToAdjacentMonth = [self.delegate calendarView:self shouldAnimateDragToMonth:[touchedView.dayAsDate dslCalendarView_monthWithCalendar:_visibleMonth.calendar]];
        }

        if (animateToAdjacentMonth) {
            if ([touchedView.dayAsDate compare:_visibleMonth.date] == NSOrderedAscending) {
                [self didTapMonthBack:nil];
            }
            else {
                [self didTapMonthForward:nil];
            }
        }
    }

    if ([self.delegate respondsToSelector:@selector(calendarView:didSelectRange:)]) {
        [self.delegate calendarView:self didSelectRange:self.selectedRange];
    }
     }

score 0 · Accepted Answer

CXDurationPicker は、expedia カレンダーに最も近いコンポーネントです。 https://github.com/concurlabs/CXDurationPicker

expedia のカレンダーピッカーの動作を模倣するために、いくつかの変更も行いました。

独自のデリゲートを定義する

#pragma mark - CXDurationPickerViewDelegate
- (void)durationPicker:(CXDurationPickerView *)durationPicker
        endDateChanged:(CXDurationPickerDate)pickerDate {

    NSDate *firstDate = [CXDurationPickerUtils dateFromPickerDate:durationPicker.startDate];
    NSDate *secondDate = [CXDurationPickerUtils dateFromPickerDate:durationPicker.endDate];

    [self updateStartDate:firstDate EndDate:secondDate AtIndex:selectedId];
    [self dismissDatePicker:nil];
}

- (void)durationPicker:(CXDurationPickerView *)durationPicker
     singleDateChanged:(CXDurationPickerDate)pickerDate {
    NSLog(@"singleDateChanged");
}

- (void)durationPicker:(CXDurationPickerView *)durationPicker
      startDateChanged:(CXDurationPickerDate)pickerDate {

    durationPicker.endDate = durationPicker.startDate;
    durationPicker.mode = CXDurationPickerModeEndDate;
}

#pragma mark - CXDurationPickerViewDelegate Optionals

- (void)durationPicker:(CXDurationPickerView *)durationPicker
invalidEndDateSelected:(CXDurationPickerDate)date {

    NSLog(@"Invalid end date selected.");

    durationPicker.startDate = durationPicker.endDate = date;
    durationPicker.mode = CXDurationPickerModeEndDate;
}

- (void)durationPicker:(CXDurationPickerView *)durationPicker invalidStartDateSelected:(CXDurationPickerDate)date {
    NSLog(@"Invalid start date selected.");
    durationPicker.startDate = durationPicker.endDate = date;
    durationPicker.mode = CXDurationPickerModeEndDate;
}

- (void)durationPicker:(CXDurationPickerView *)durationPicker
   didSelectDateInPast:(CXDurationPickerDate)date
               forMode:(CXDurationPickerMode)mode {

    NSLog(@"Date was selected in the past. Ignoring.");
}

CXDurationPickerDayView.m のコードを更新して、開始日と終了日が同じ日の場合の表示の問題を修正しました。

--- a/Popsoc/CXDurationPicker/CXDurationPickerView.m
+++ b/Popsoc/CXDurationPicker/CXDurationPickerView.m
@@ -482,8 +482,12 @@
     day.type = CXDurationPickerDayTypeStart;

     day = (CXDurationPickerDayView *) [self.days lastObject];

     day.type = CXDurationPickerDayTypeEnd;
+
+    if (self.days.count == 1) {
+        day.type = CXDurationPickerDayTypeSingle;
+    }

score 0 · Accepted Answer

私は DSLCalendarView ライブラリを修正しましたが、どちらの方法でも魅力的に機能します。

DSLCalendarView.m ファイルで、 - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event; を見つけます。方法。このメソッドでは、以下の if ステートメントが見つかります

if (!self.draggedOffStartDay && [self.draggingStartDay isEqual:touchedView.day]) {
    // comment out this original code
    // self.selectedRange = [[DSLCalendarRange alloc] initWithStartDay:touchedView.day endDay:touchedView.day];

    // add below code block
    if (!self.startDate) {
        self.startDate = self.draggingStartDay;
        self.selectedRange = [[DSLCalendarRange alloc] initWithStartDay:self.draggingStartDay
                                                                 endDay:touchedView.day];
    }
    else if (self.startDate && !self.endDate) {
        self.endDate = touchedView.day;
        self.selectedRange = [[DSLCalendarRange alloc] initWithStartDay:self.startDate
                                                                 endDay:touchedView.day];
    }
    else if (self.startDate && self.endDate) {
        self.startDate = self.draggingStartDay;
        self.endDate = nil;
        self.selectedRange = [[DSLCalendarRange alloc] initWithStartDay:self.draggingStartDay
                                                                 endDay:touchedView.day];
    }
}

2 つのグローバル変数 @property (非アトミック、強力) NSDateComponents *startDate; を宣言することを忘れないでください。@property (nonatomic, strong) NSDateComponents *endDate; 同じファイルにあります。

VC に以下のデリゲートメソッドを実装することで、結果を確認できます。

#pragma mark - DSLCalendarViewDelegate methods

- (void)calendarView:(DSLCalendarView *)calendarView didSelectRange:(DSLCalendarRange *)range {
    if (range) {
        NSLog(@"selected %ld/%ld/%ld - %ld/%ld/%ld", range.startDay.year, range.startDay.month, range.startDay.day, range.endDay.year, range.endDay.month, range.endDay.day);
    }
}

ios - expedia のようなカレンダー用の DSLCalendarView のカスタム実装

3 に答える 3

Related

Reference