FXDatePickerImage

FXDatePicker

一个可自定义 DatePicker 的 SwiftUI 库。

特性

FXDatePicker vs. iOS DatePicker

使用方法

步骤 1：添加一个绑定 Date 变量

在您的 Swift 文件中创建一个 Date 变量，用于保存从日期选择器中选择的日期。

@State private var selectedDate: Date = Date()

步骤 2：配置 specialDates (可选)

如果您想在特定日期显示图像，请创建一个 specialDates 数组。此步骤是可选的。如果您喜欢没有特殊日期的标准日历，则可以跳过此步骤。

let specialDates: [SpecialDate] = [
    // Your special dates and images here
]

步骤 3：初始化 FXDatePicker

将 FXDatePicker 添加到您的视图中。您可以选择是否使用 specialDates。

使用 specialDates 的示例

FXDatePickerView(selectedDate: $selectedDate, specialDates: specialDates)

不使用 specialDates 的示例

FXDatePickerView(selectedDate: $selectedDate)

范围

range

FXDatePicker 还支持在指定的范围内选择日期。 这对于需要将日期选择限制在特定时间段内的应用程序特别有用。 以下是如何使用不同类型的日期范围的 FXDatePicker 的示例。

使用 ClosedRange

要使用闭合范围（包含开始日期和结束日期的范围），请首先创建一个 ClosedRange<Date> 变量。 例如，要为当前月份创建一个范围

private var closeRange: ClosedRange<Date> {
    let calendar = Calendar.current
    let startOfToday = calendar.startOfDay(for: Date())

    guard let endOfRange = calendar.date(bySetting: .day, value: 18, of: startOfToday) else {
        fatalError("Could not create start or end date for range")
    }

    return startOfToday...endOfRange
}

然后，使用此范围初始化 FXDatePicker

FXDatePickerView(selectedDate: $selectedDate, specialDates: specialDates, in: cloaseRange)

使用 PartialRangeFrom

对于从特定日期开始并无限期延伸到未来的范围

FXDatePickerView(selectedDate: $selectedGregorianDate, specialDates: specialDates, in: Date()...)

使用 PartialRangeThrough

对于过去任何时间开始并在特定日期结束的范围

FXDatePickerView(selectedDate: $selectedGregorianDate, specialDates: specialDates, in: ...Date())

使用 specialDates 添加自定义标记

通过 specialDates 数组，您可以向日历中的特定日期添加自定义标记。 您可以使用自定义图像或 SF Symbols 来突出显示这些日期。 每个特殊日期都使用其类型 (SpecialDateType) 定义，该类型可以是用于图像的 ImageType 或用于 SF Symbols 的 SFSymbolsType。 以“日/月/年”格式格式化日期。

向日期添加 SF Symbols

要使用 SF Symbol 标记日期，请创建一个 SpecialDate 实例，并将 dateString 和 dateType 设置为 .sfSymbols。 提供日期、符号的名称及其颜色

SpecialDate(dateString: "2/1/2024", 
dateType: .sfSymbols(SFSymbolsType(imageName: "airplane.departure",
color: .blue)))
]

在上面的示例中，蓝色的飞机起飞符号将出现在 2024 年 1 月 2 日。

向日期添加图像

对于自定义图像，请将 dateType 设置为 .image，并提供日期以及图像的名称

     SpecialDate(dateString: "13/1/2024",
     dateType: .image(ImageType(imageName: "home")))

自定义 | 可用修饰符

calenderType

FXDatePickerView(selectedDate: $selectedDate, specialDates: specialDates)
.calenderType(.hijri(.islamicUmmAlQura))

默认为 .gregorian.

伊斯兰历 (Hijri Calendar)

对于伊斯兰历，您需要指定日历的类型。 在沙特阿拉伯，默认为 .islamicUmmAlQura。 但是，您可以从多种伊斯兰历类型中进行选择，例如 .islamic、.islamicCivil 或 .islamicTabular。

设置不同伊斯兰历类型的示例

.calenderType(.hijri(.islamicCivil))

自定义说明

适应当地月亮观测：伊斯兰历基于农历周期，其日期可能因月亮观测而异。 这种变化有时可能需要将日历调整一天左右。

用户的灵活性：建议允许用户在您的应用程序中更改伊斯兰历的类型。 这种灵活性可以适应地区差异和月亮观测实践中的个人偏好，确保您的应用程序对于不同的用户群保持相关性和实用性。

datePickerTheme

使用 datePickerTheme 自定义 DatePicker 的主题。 例如

FXDatePickerView(selectedDate: $selectedDate, specialDates: specialDates)
.datePickerTheme(main:
 .init(
accentColor: Color(uiColor: UIColor(red: 0.23, green: 0.80, blue: 0.81, alpha: 1.00)),
monthTitle: .white,
daysName: Color(uiColor: UIColor(red: 0.45, green: 0.48, blue: 0.48, alpha: 1.00)),
daysNumbers: Color(uiColor: UIColor(red: 0.83, green: 0.84, blue: 0.84, alpha: 1.00)),
previousDaysNumber: Color(uiColor: UIColor(red: 0.44, green: 0.47, blue: 0.47, alpha: 1.00)),
backgroundStyle: .color(Color(uiColor: UIColor(red: 0.22, green: 0.25, blue: 0.25, alpha: 1.00)))
 )

backgroundStyle 接受 Color 或任何类型的渐变，例如使用 radialGradient 作为 backgroundColor

FXDatePickerView(selectedDate: $selectedDate, specialDates: specialDates)
            .datePickerTheme(main:
                .init(
                accentColor: Color(UIColor(red: 0.82, green: 0.26, blue: 0.42, alpha: 1.00)),
                monthTitle: Color(UIColor(red: 0.86, green: 0.87, blue: 0.88, alpha: 1.00)),
                daysName: Color(UIColor(red: 0.80, green: 0.80, blue: 0.83, alpha: 1.00)),
                daysNumbers: Color(UIColor(red: 0.83, green: 0.83, blue: 0.87, alpha: 1.00)),
                previousDaysNumber: Color(UIColor(red: 0.66, green: 0.66, blue: 0.69, alpha: 1.00)),
                backgroundStyle:
                        .radialGradient(
                       Gradient(colors:
                          [Color(UIColor(red: 0.19, green: 0.19, blue: 0.22, alpha: 1.00)),
                           Color(UIColor(red: 0.11, green: 0.11, blue: 0.14, alpha: 1.00))
                          ]
                               ),
                          center: .center,
                          startRadius: 1,
                         endRadius: 300)
                   )
               )

默认主题具有白色背景和蓝色强调色。 根据您的喜好调整颜色或渐变，以获得个性化的 DatePicker 外观。

hideMarkers

hideMarkers() 修饰符允许您将 FXDatePickerView 用作常规日历，而不显示任何特殊日期标记。 如果您想要更简洁的外观，或者在某些用例中不需要特殊日期指示器，这将特别有用。

示例 要应用此修饰符，只需将 .hideMarkers() 链接到您的 FXDatePickerView 实例。 这是你可以做到的

FXDatePickerView(selectedDate: $selectedDate, specialDates: specialDates)
    .hideMarkers()

这是应用 hideMarkers() 修饰符后的外观

使用此修饰符，FXDatePickerView 将呈现，而不显示与 specialDates 相关的任何标记。 这使日历视图保持简单，并专注于基本的日期选择功能。

disableSwipe

.disableSwipe() 修饰符与 FXDatePickerView 一起使用，用于禁用滑动功能。 这在您希望防止用户通过滑动来更改日期的情况下特别有用，从而确保通过其他方式（如按钮或外部控件）控制日期导航。

示例 要应用此修饰符，只需将 .disableSwipe() 链接到您的 FXDatePickerView 实例。 这是你可以做到的

FXDatePickerView(selectedDate: $selectedDate, specialDates: specialDates)
    .disableSwipe()

在此示例中，FXDatePickerView 将不再响应用于日期导航的滑动操作，用户将需要使用 UI 中提供的按钮来更改所选日期。

hideDatePicker

.hideDatePicker() 修饰符与 FXDatePickerView 一起使用，用于隐藏点击月份标题时使用 PickerView 视图更改月份/年份的功能。

示例

要应用此修饰符，只需将 .hideDatePicker() 链接到您的 FXDatePickerView 实例。 这是你可以做到的

FXDatePickerView(selectedDate: $selectedDate, specialDates: specialDates)
    .hideDatePicker()

此修饰符隐藏了在 FXDatePickerView 中点击月份标题时负责更改月份或年份的 UI 元素。

安装

Swift Package Manager

dependencies: [
    .package(url: "https://github.com/X901/FXDatePicker.git")
]

要求