I have this DatePicker inside a VStack, working fine:
VStack {
DatePicker(selection: $birthDate, displayedComponents: .date) {
Text("")
}.padding(10)
.labelsHidden()
.datePickerStyle(WheelDatePickerStyle())
}
I'd like to be able to have the default date set to 40 years in the past so the user doesn't have to spin the year so far (most people aren't newborns). This can be done with DatePicker as shown in this SO answer. I don't know how to implement that in SwiftUI. Thanks for any help.
Why not just like this?
struct ContentView: View {
#State private var birthDate: Date = Calendar.current.date(byAdding: DateComponents(year: -40), to: Date()) ?? Date()
var body: some View {
VStack {
DatePicker(selection: $birthDate, displayedComponents: .date) {
Text("")
}
.padding(10)
.labelsHidden()
.datePickerStyle(WheelDatePickerStyle())
}
}
}
You should initialise birthDate in the following way (tested & works with Xcode 11.2 / iOS 13.2)
#State private var birthDate: Date
init() {
_birthDate = State<Date>(initialValue: Calendar.current.date(byAdding:
DateComponents(year: -40), to: Date()) ?? Date())
}
Related
I have a basic SwiftUI date picker that shows a calendar widget when tapped:
DatePicker(
"Date",
selection: $date,
in: ...Date(),
displayedComponents: [.date]
)
When you select a date (8th October in the example above), the calendar remains on screen and in order to collapse it, you need to tap outside of it.
Is it possible to automatically collapse it when a date is selected?
I ended up with a rather hacky solution that seems to do the job:
Add a #State variable that holds the calendar ID:
#State private var calendarId: Int = 0
Chain the DatePicker call with .id, .onChange and .onTapGesture actions:
DatePicker(
"Date", selection: $date, in: ...Date(), displayedComponents: [.date]
)
.id(calendarId)
.onChange(of: date, perform: { _ in
calendarId += 1
})
.onTapGesture {
calendarId += 1
}
#chris.kobrzak provided a good direction, and I ended up solving this with:
struct ContentView: View {
#State var calendarId: UUID = UUID()
#State var someday: Date = Date()
var body: some View {
VStack {
DatePicker("Day", selection: $someday, displayedComponents: [.date])
.labelsHidden()
.id(calendarId)
.onChange(of: whatday) { _ in
calendarId = UUID()
}
AnotherView(someday)
}
}
}
This is just an updated answer following #Chris Kobrzak as above.
I am using XCode 14.1 and iOS 15+ and 16+ (iPad and iPhone) and it seems to work without error today in Nov 2022.
I have seen some folk using the same .id() method complain that it doesn’t work.
I haven’t tested this but note that I am using the CompactDatePickerStyle(), maybe it doesn’t work the same on other styles.
The reason this hack works is the .id() is for the ‘view’ (DatePicker being a view). When you change the id of a view you basically reset it (in this case closing the DatePicker).
There is a good explanation about .id() here: https://swiftui-lab.com/swiftui-id/
Why this isn’t built into the control seems rather a joke but hey…
Note I have ripped the following out of a real App. I've edited it in a dumb text editor to post on here so there may be some silly syntax errors and odd remnants of the original code.
import SwiftUI
struct FooView: View {
#Published var dateOfBirth: Date = Date()
#State private var datePickerId: Int = 0
private var dateOfBirthRange: ClosedRange<Date> {
let dateFrom = Calendar.current.date(byAdding: .year, value: -160, to: Date())!
let dateTo: Date = Date()
return dateFrom...dateTo
}
var body: some View {
Form {
ZStack(alignment: .leading) {
Text("Date of Birth")
.offset(y: -36)
.foregroundColor(Color.accentColor)
.scaleEffect(0.9, anchor: .leading)
DatePicker(
"",
selection: $dateOfBirth,
in: dateOfBirthRange,
displayedComponents: .date
)
.datePickerStyle(CompactDatePickerStyle())
.labelsHidden()
.id(datePickerId)
.onChange(of: dateOfBirth) { _ in
datePickerId += 1
}
}
.padding(.top, 24)
.animation(.default, value: "")
}
}
}
I had a similar problem and put a .graphical DatePicker in my own popover. The only downside is on iPhone popovers currently show as sheets but that's ok.
struct DatePickerPopover: View {
#State var showingPicker = false
#State var oldDate = Date()
#Binding var date: Date
let doneAction: () -> ()
var body: some View {
Text(date, format:.dateTime.year())
.foregroundColor(.accentColor)
.onTapGesture {
showingPicker.toggle()
}
.popover(isPresented: $showingPicker, attachmentAnchor: .point(.center)) {
NavigationStack {
DatePicker(selection: $date
, displayedComponents: [.date]){
}
.datePickerStyle(.graphical)
.toolbar {
ToolbarItem(placement: .cancellationAction) {
Button("Cancel") {
date = oldDate
showingPicker = false
}
}
ToolbarItem(placement: .confirmationAction) {
Button("Done") {
doneAction()
showingPicker = false
}
}
}
}
}
.onAppear {
oldDate = date
}
}
}
I have a calendar made with datePicker in swiftui 2, I am looking to customize this calendar I have already seen .datePickerStyle() and all these styles but it doesn't correspond to my expectations, I'm trying to reproduce that (below)
My current code
import SwiftUI
struct ExercisePageView: View {
#State var date = Date()
var dateFormat = DateFormat()
var dateStyle = GraphicalDatePickerStyle()
var closedRange: ClosedRange<Date> {
let currentDate = Calendar.current.date(byAdding: .day, value: 0, to: Date())!
let fiveDaysLater = Calendar.current.date(byAdding: .day, value: 5, to: Date())!
return currentDate...fiveDaysLater
}
var body: some View {
HStack {
VStack{
Text("\(dateFormat.dateToString("dd / MMMM", date))")
DatePicker("date picker test", selection: $date, in: closedRange , displayedComponents: .date)
.datePickerStyle(GraphicalDatePickerStyle())
.clipped()
.labelsHidden()
.accentColor(Color(UIColor.systemRed))
}
}
}
}
the result of my code
Ok so thank you for those who read this post we can not modify as it was said by Sweeper, you have to create your own component
How can I make the DatePicker stay opened in form?
I put the DatePicker inside of Form, so I have to tap form, to open the DatePicker.
But instead, I want it to be always open, even when the user didn't tap then form.
Would be there anyway to achieve this?
Here is my current code.
struct ContentView: View {
#State private var selectedDate = Date()
var body: some View {
VStack{
Form{
DatePicker(selection: self.$selectedDate, in: Date()..., displayedComponents: .date, label: { Text("Select a date") })
}
}
}
}
And here is what I have tried. Using this method
struct ContentView: View {
#State private var pickerReset = UUID()
#State private var selectedDate = Date()
var body: some View {
VStack{
Form{
DatePicker(selection: self.$selectedDate, in: Date()..., displayedComponents: .date, label: { Text("Select a date") }).id(self.pickerReset)
}
}.onAppear{
//I tired to show datePicker with UUID(), but
//this line of code ratherly hide the datepicker
self.pickerReset = UUID()
}
}
}
You may try setting datePickerStyle explicitly:
struct ContentView: View {
#State private var selectedDate = Date()
var body: some View {
VStack {
Form {
DatePicker("", selection: $selectedDate, in: Date()..., displayedComponents: .date)
.datePickerStyle(WheelDatePickerStyle())
}
}
}
}
If you want you can use a second disabled DatePicker to show the selected date as well - to behave more like a standard DatePicker in a Form:
struct ContentView: View {
#State private var selectedDate = Date()
var body: some View {
VStack {
Form {
VStack {
DatePicker("Select a date", selection: $selectedDate, in: Date()..., displayedComponents: .date)
.disabled(true)
DatePicker("", selection: $selectedDate, in: Date()..., displayedComponents: .date)
.datePickerStyle(WheelDatePickerStyle())
}
}
}
}
}
I want to fetch and set date from DatePicker, but my date is not updating. SwiftUI is new to me and I am confused with what type of property wrapper to use. Please help in this and advice when and where to use #State, #Binding, #Published I read some articles but still concept is not clear to me.
Here I used MVVM and SwiftUI and my code as follows.
class MyViewModel:ObservableObject {
#Published var selectedDate : Date = Date()
#Published var selectedDateStr : String = Date().convertDateToString(date: Date())
}
struct DatePickerView: View {
#Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
#ObservedObject var viewModel : MyViewModel
var dateFormatter: DateFormatter {
let formatter = DateFormatter()
formatter.dateStyle = .long
return formatter
}
#State private var selectedDate = Date()
var body: some View {
VStack {
//Title
HStack{
Text("SELECT A DATE")
.foregroundColor(.white)
.font(.system(size: 20))
}
.frame(width:UIScreen.main.bounds.width,height: 60)
.background(Color.red)
//Date Picker
DatePicker(selection: $selectedDate, in: Date()-15...Date(), displayedComponents: .date) {
Text("")
}.padding(30)
Text("Date is \(selectedDate, formatter: dateFormatter)")
Spacer()
//Bottom buttons
Text("DONE")
.fontWeight(.semibold)
.frame(width:UIScreen.main.bounds.width/2,height: 60)
.onTapGesture {
self.viewModel.selectedDate = self.selectedDate
self.presentationMode.wrappedValue.dismiss()
}
}
}
}
//calling:
DatePickerView(viewModel: self.viewModel)
Reply against your second question about wrapper properties used in SwiftUI i.e #State, #Binding, #Published.
The most common #Things used in SwiftUI are:
• #State - Binding<Value>
• #Binding - Binding<Value>
• #ObservedObject - Binding<Value> (*)
• #EnvironmentObject - Binding<Value> (*)
• #Published - Publisher<Value, Never>
(*) technically, we get an intermediary value of type Wrapper, which turns a Binding once we specify the keyPath to the actual value inside the object.
So, as you can see, the majority of the property wrappers in SwiftUI, namely responsible for the view’s state, are being “projected” as Binding, which is used for passing the state between the views.
The only wrapper that diverges from the common course is #Published, but:
1. It’s declared in Combine framework, not in SwiftUI
2. It serves a different purpose: making the value observable
3. It is never used for a view’s variable declaration, only inside ObservableObject
Consider this pretty common scenario in SwiftUI, where we declare an ObservableObject and use it with #ObservedObject attribute in a view:
class ViewModel: ObservableObject {
#Published var value: Int = 0
}
struct MyView: View {
#ObservedObject var viewModel = ViewModel()
var body: some View { ... }
}
MyView can refer to $viewModel.value and viewModel.$value - both expressions are correct. Quite confusing, isn’t it?
These two expressions ultimately represent values of different types: Binding and Publisher, respectively.
Both have a practical use:
var body: some View {
OtherView(binding: $viewModel.value) // Binding
.onReceive(viewModel.$value) { value // Publisher
// do something that does not
// require the view update
}
}
Hope it may help you.
You can calculate the current date - 15 days using this:
let previousDate = Calendar.current.date(byAdding: .day, value: -15, to: Date())!
Then use the previousDate in DatePicker`s range:
DatePicker(selection: $selectedDate, in: previousDate...Date(), displayedComponents: .date) { ...
Summing up, your code can look like this:
struct DatePickerView: View {
#Environment(\.presentationMode) var presentationMode
#ObservedObject var viewModel: MyViewModel
var dateFormatter: DateFormatter {
let formatter = DateFormatter()
formatter.dateStyle = .long
return formatter
}
#State private var selectedDate = Date()
let previousDate = Calendar.current.date(byAdding: .day, value: -15, to: Date())!
var body: some View {
VStack {
//Title
HStack{
Text("SELECT A DATE")
.foregroundColor(.white)
.font(.system(size: 20))
}
.frame(width:UIScreen.main.bounds.width,height: 60)
.background(Color.red)
//Date Picker
DatePicker(selection: $selectedDate, in: previousDate...Date(), displayedComponents: .date) {
Text("")
}.padding(30)
Text("Date is \(selectedDate, formatter: dateFormatter)")
Spacer()
//Bottom buttons
Button(action: {
self.viewModel.selectedDate = self.selectedDate
self.presentationMode.wrappedValue.dismiss()
}) {
Text("DONE")
.fontWeight(.semibold)
}
}
}
}
Tested in Xcode 11.5, Swift 5.2.4.
I need to be able to add or minus 1 month from the current date.
So far I have this code:
import SwiftUI
struct DateView: View {
static let dateFormat: DateFormatter = {
let formatter = DateFormatter()
formatter.setLocalizedDateFormatFromTemplate("yyyy MMMM")
return formatter
}()
var date = Date()
var body: some View {
HStack {
Button(action: {
print("Button Pushed")
}) {
Image(systemName: "chevron.left")
.padding()
}
Spacer()
Text("\(date, formatter: Self.dateFormat)")
Spacer()
Button(action: {
print("Button Pushed")
}) {
Image(systemName: "chevron.right")
.padding()
}
}
.padding()
.background(Color.yellow)
}
}
struct DateView_Previews: PreviewProvider {
static var previews: some View {
DateView()
}
}
I would like to change the date displayed to be +1 month or -1 month depending on which chevron I will tap.
I am new to swift and swiftui and don't know what action I should use. I think it's related to DateComponents, but what should I do about it now? I am stuck. Please help me.
To better visualise what I have and want to do, here is an image of my current result:
Swift 5
Function to add or subtract month from current date.
func addOrSubtractMonth(month: Int) -> Date {
Calendar.current.date(byAdding: .month, value: month, to: Date())!
}
Now calling the function
// Subtracting
var monthSubtractedDate = addOrSubtractMonth(-7)
// Adding
var monthAddedDate = addOrSubtractMonth(7)
To Add date pass prospective value
To Subtract pass negative value
You can use the Calendar to add or subtract months/days/hours etc to your Date. Apple's documentation on the Calendar can be found here.
Below is a working example, showing how to increase/decrease the month by 1.
struct ContentView: View {
static let dateFormat: DateFormatter = {
let formatter = DateFormatter()
formatter.setLocalizedDateFormatFromTemplate("yyyy MMMM")
return formatter
}()
#State var date = Date()
var body: some View {
HStack {
Button(action: {
print("Button Pushed")
self.changeDateBy(-1)
}) {
Image(systemName: "chevron.left")
.padding()
}
Spacer()
Text("\(date, formatter: Self.dateFormat)")
Spacer()
Button(action: {
print("Button Pushed")
self.changeDateBy(1)
}) {
Image(systemName: "chevron.right")
.padding()
}
}
.padding()
.background(Color.yellow)
}
func changeDateBy(_ months: Int) {
if let date = Calendar.current.date(byAdding: .month, value: months, to: date) {
self.date = date
}
}
}