SwiftUI—方便用户选择日期的DatePicker日期拾取器

简介: SwiftUI—方便用户选择日期的DatePicker日期拾取器

PickerDate相当于UIKit中的UIDatePicker控件,用于实现时间和日期项目的选择。

示例代码:


struct ContentView : View {
    var myDateFormatter: DateFormatter { //添加一个日期格式化类型的属性,您将用它对用户所选的日期和时间进行格式化,并显示在文本视图中
        let formatter = DateFormatter() //初始化一个日期格式化类型的实例
        formatter.dateStyle = .long //并设置他的日期格式化类型为长类型,即依次显示月份、天数和年份
        return formatter
    }
    @State var selectedDate = Date() //和DatePicker进行绑定,当用户选择某个日期时,该属性的值也将同步更改
    var body: some View {
        VStack {
            DatePicker(selection: $selectedDate, displayedComponents: DatePickerComponents.hourAndMinute) { //添加一个DatePicker视图,将它和selectedDate属性进行绑定,并设置DatePicker的组件类型为小时和分钟
                Text("Date")
            }
            DatePicker(selection: $selectedDate, displayedComponents: DatePickerComponents.date) {
                Text("Date")
            }
            DatePicker(selection: $selectedDate,in: Date()...Date().advanced(by: 7*24*3600), displayedComponents: [.date, .hourAndMinute]) { //对日期列表的日期范围进行了限定,最小值为今天,最大值为7天之后的日期。
                Text("Date")
            }
            Text("Your Choice: \(selectedDate, formatter: myDateFormatter)") //用来显示用户所选的日期
        }
    }
}


2466108-92228edbc9fcb07b.webp.jpg

目录
打赏
0
0
0
0
5
分享
相关文章
|
9月前
Element UI【组件拓展】el-datetime-picker-before 禁止选择未来时间的日期时间选择器(精确到时分秒)
Element UI【组件拓展】el-datetime-picker-before 禁止选择未来时间的日期时间选择器(精确到时分秒)
291 1
|
11月前
|
用Python实现指定日期的日历
用Python实现指定日期的日历
Ant Design Vue 日期选择器,绑定的日期和框内不一致,日期格式化,纠正时差
Ant Design Vue 日期选择器,绑定的日期和框内不一致,日期格式化,纠正时差
1016 0
Ant Design Vue 日期选择器,绑定的日期和框内不一致,日期格式化,纠正时差
JavaScript日历制作并实现拖动选择日期
JavaScript日历制作并实现拖动选择日期
111 0
不受限时间段的日期范围选择器DatePicker
不受限时间段的日期范围选择器DatePicker封装记录全过程。
363 1
不受限时间段的日期范围选择器DatePicker
关于Element-Ui 时间范围选择器DatePicker禁用范围日期问题
饿了么组件库的[DatePicker](https://element.eleme.cn/#/zh-CN/component/date-picker) 日期范围选择,
elementUI中的el-date-picker日期月份时间选择器禁用选中当前和以后的日期
elementUI中的el-date-picker日期月份时间选择器禁用选中当前和以后的日期
1257 0
C# DateTimePicker控件如何精确设置显示时分秒
C# DateTimePicker控件如何精确设置显示时分秒
677 0
C# DateTimePicker控件如何精确设置显示时分秒
SwiftUI—方便用户选择项目的Picker拾取器
SwiftUI—方便用户选择项目的Picker拾取器
528 0
SwiftUI—方便用户选择项目的Picker拾取器
下一篇
oss创建bucket