B4A Library [B4X] AS WheelDateTimePicker - based on ASWheelPicker

This is a date and time picker in IOS picker design.

This library is based on the ASWheelPicker, without it the library will not work.

EQ5gfV8j4u2d3PaEtXi6p57dQCY9h7883CRjIizpVHqLx7YXhY.jpeg

Use:
B4X:
AS_WheelDateTimePicker1.Create

ASWheelDateTimePicker
Author: Alexander Stolte
Version: 1.00

  • ASWheelDateTimePicker_MonthName
    • Fields:
      • April As String
      • August As String
      • December As String
      • February As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • January As String
      • July As String
      • June As String
      • March As String
      • May As String
      • November As String
      • October As String
      • September As String
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • ASWheelDateTimePicker_MonthNameShort
    • Fields:
      • April As String
      • August As String
      • December As String
      • February As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • January As String
      • July As String
      • June As String
      • March As String
      • May As String
      • November As String
      • October As String
      • September As String
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • ASWheelDateTimePicker_WeekNameShort
    • Fields:
      • Friday As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • Monday As String
      • Saturday As String
      • Sunday As String
      • Thursday As String
      • Tuesday As String
      • Wednesday As String
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • AS_WheelDateTimePicker
    • Events:
      • SelectedDateChanged (Date As Long)
      • SelectedTimeChanged (Hour As Int, Minute As Int)
    • Fields:
      • mBase As B4XView
      • Tag As Object
    • Functions:
      • Class_Globals As String
      • CreateASWheelDateTimePicker_MonthName (January As String, February As String, March As String, April As String, May As String, June As String, July As String, August As String, September As String, October As String, November As String, December As String) As ASWheelDateTimePicker_MonthName
      • CreateASWheelDateTimePicker_MonthNameShort (January As String, February As String, March As String, April As String, May As String, June As String, July As String, August As String, September As String, October As String, November As String, December As String) As ASWheelDateTimePicker_MonthNameShort
      • CreateASWheelDateTimePicker_WeekNameShort (Monday As String, Tuesday As String, Wednesday As String, Thursday As String, Friday As String, Saturday As String, Sunday As String) As ASWheelDateTimePicker_WeekNameShort
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • getHour As Int
      • getMinute As Int
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
    • Properties:
      • Hour As Int [read only]
      • Minute As Int [read only]
Changelog
  • 1.00
    • Release
  • 1.01
    • BugFixes
  • 1.02
    • Add set Hour
    • Add set Minute
    • Add set Date
  • 1.03
    • Add Refresh
  • 1.04
    • BugFixes
    • PickerType = DatePicker - The days in the month now adjust automatically
    • Add Designer Property TextColor
    • Add Designer Property FadeColor
    • Add Designer Property HapticFeedback
  • 1.05
    • Add Designer Property TodayText
      • Default: Today
    • Add get and set TodayText - Call Refresh if you change something
  • 1.06
    • BugFixes
  • 1.07
    • BugFixes - AM and PM mode works now as expected
    • BugFixes - setDate Number of days is now adjusted
  • 1.08
    • Add get and set FadeColor
    • Add get and set TextColor
    • Add get and set SelectorColor
    • Add get and set BackgroundColor
    • MonthName now comes from the DateUtils
  • 1.09
    • BugFixes
  • 1.10
    • BugFixes
  • 1.11
    • Add Designer Property MinuteSteps - 1-5-10-15 Block Interval
      • Default: False
  • 1.12
    • BugFixes
  • 1.13
    • Add get WheelPicker - gets the wheelpicker to modify font etc.
  • 1.14 (read more)
    • You need AS_WheelPicker V3.15+ for this update
    • If a month has 30 or 28 days, then these are now no longer removed from the list, but the new EnabledRow is used and the affected items are deactivated.
      • This prevents the list from behaving in an unusual way.
    • Add MinDate and MaxDate - You can specify a DateRange what may be selected
  • 1.15
    • You need AS_WheelPicker V3.20+
    • Breaking Change: You need to call Create
      • The view will not be built without it
      • Now you can make changes to the proepties without calling refresh at the beginning
      • Faster loading time
      • No crashes
    • Add SetDateTextOrder - You can change the text order of the date text
    • BugFixes
    • Add Event CustomDrawItemChange
Have Fun :)
 

Attachments

  • AS WheelDateTimePicker Example.zip
    176.3 KB · Views: 293
  • AS_WheelDateTimePicker.b4xlib
    6.7 KB · Views: 296
Last edited:

hazaal

Member
Licensed User
Longtime User
Hi,

Nice picker, after playing with it for a while, I have couple of questions

Screenshot_20230705_134613.jpg


1) How to change the font size and style? It's a way too small for elderly people like me :)
And afterwards there will be a need to change the height of "rows" so that bigger font will fit there?

2) Which color settings should I use to get rid of that gray fading? I have changed every color in designer, and now there is not even a hint of gray nor black color, but still it's fading from gray to fadecolor

Br,
-Harri
 

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.13
    • Add get WheelPicker - gets the wheelpicker to modify font etc.

1) How to change the font size and style? It's a way too small for elderly people like me :)
And afterwards there will be a need to change the height of "rows" so that bigger font will fit there?
You need 3.14+ from AS_WheelPicker and 1.13 from AS_WheelDateTimePicker. Then do this:
B4X:
    Dim ItemTextProperties As ASWheelPicker_ItemTextProperties = AS_WheelDateTimePicker1.WheelPicker.ItemTextProperties
    ItemTextProperties.TextFont = xui.CreateDefaultFont(25)
    AS_WheelDateTimePicker1.WheelPicker.ItemTextProperties = ItemTextProperties

    AS_WheelDateTimePicker1.WheelPicker.RowHeightSelected = 50dip
    AS_WheelDateTimePicker1.WheelPicker.RowHeightUnSelected = 50dip
2) Which color settings should I use to get rid of that gray fading? I have changed every color in designer, and now there is not even a hint of gray nor black color, but still it's fading from gray to fadecolor
It's called FadeColor in the designer, if you set the Alpha to 0, then there is no Shadow anymore.
 

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.14
    • You need AS_WheelPicker V3.15+ for this update
    • If a month has 30 or 28 days, then these are now no longer removed from the list, but the new EnabledRow is used and the affected items are deactivated.
      • This prevents the list from behaving in an unusual way.
    • Add MinDate and MaxDate - You can specify a DateRange what may be selected
You need AS_WheelPicker V3.15+ for this update
MinDate and MaxDate

B4X:
AS_WheelDateTimePicker4.MinDate = DateUtils.SetDate(2020,2,8)
AS_WheelDateTimePicker4.MaxDate = DateTime.Now + DateTime.TicksPerDay*5
AS_WheelDateTimePicker4.Refresh
ezgif.com-resize (3).gif

ezgif.com-resize (3).gif

Is it possible to set a maximum and minimum date for the date picker?
Now it is possible.
I had already started the feature a few months ago and cut my teeth. I had tried to remove the inactive days/months from the list. But that had led every time to unwanted behavior of the lists. So I had discarded the whole thing again. Then I had now seen in other apps always like the solve in their WheelPicker, instead of removing the items from the list, the simply disable the inactive days. This is now a much better variant. :)
 

parijs

Active Member
Licensed User
Longtime User
Hi

How do I get rid of time in


Private Sub AS_WheelDateTimePicker4_SelectedDateChanged(Date As Long)
Log("SelectedTimeChanged: " & DateUtils.TicksToString(Date))
xlbl_DateTime.Text = DateUtils.TicksToString(Date)
End Sub
 

marcick

Well-Known Member
Licensed User
Longtime User
Hi Alexander,
when it is for example "Mon Aug 30" in England it is "Lun 30 Ago" in Italy but I have a "Lun Ago 30" instead
How to swap the day before the month ?

Besides, how to manage the TextSize ? (I need the AutoscaleAll in the designer script)
I don't see the ItemTextProperty as in AS WheelPicker
 
Last edited:

Alexander Stolte

Expert
Licensed User
Longtime User
when it is for example "Mon Aug 30" in England it is "Lun 30 Ago" in Italy but I have a "Lun Ago 30" instead
How to swap the day before the month ?
I received your request and implemented a solution yesterday. Unfortunately, the WheelPicker doesn't like me and I spent 6 hours yesterday removing unwanted behavior. I managed except for one error that only occurs in B4A and only in release mode.

Besides, how to manage the TextSize ? (I need the AutoscaleAll in the designer script)
I don't see the ItemTextProperty as in AS WheelPicker
I'll look at this in the next update.
 

marcick

Well-Known Member
Licensed User
Longtime User
Sorry for this trouble.
when I want to do something that looks great I always take iOS as model.
If it can help, this is how datetime picker looks in iOS out of the box. Large text and horizontally compact.
Note that if you try to increase text size in your control, it does not fit horizontally.

IMG_5203.jpeg
 

Alexander Stolte

Expert
Licensed User
Longtime User
Sorry for this trouble.
The xCustomListview has its different quirks on all 3 platforms.
when I want to do something that looks great I always take iOS as model.
If it can help, this is how datetime picker looks in iOS out of the box. Large text and horizontally compact
In the next update you can change the order as follows:
B4X:
'Weekname - Fri
'Monthname - Jun
'DayOfMonth - 19
'Example:1,2,3 = Fri Jun 19
'Example:2,1,3 = Jun Fri 19
'Example:3,2,1 = 19 Jun Fri
AS_WheelDateTimePicker3.SetDateTextOrder(1,2,3)
 

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.15
    • You need AS_WheelPicker V3.20+
    • Breaking Change: You need to call Create
      • The view will not be built without it
      • Now you can make changes to the proepties without calling refresh at the beginning
      • Faster loading time
      • No crashes
    • Add SetDateTextOrder - You can change the text order of the date text
    • BugFixes
    • Add Event CustomDrawItemChange
Breaking Change
You must now call .Create before the view is built.

This change is necessary because a .refresh messes up a lot of things when building the view and causes crashes. Now you can change properties at the start and then they are applied directly after you have called .Create.
Example project are updated.
SetDateTextOrder
B4X:
'Weekname - Fri
'Monthname - Jun
'DayOfMonth - 19
'Example:1,2,3 = Fri Jun 19
'Example:2,1,3 = Jun Fri 19
'Example:3,2,1 = 19 Jun Fri
AS_WheelDateTimePicker3.SetDateTextOrder(1,2,3)
 

marcick

Well-Known Member
Licensed User
Longtime User
I'm using this code in B4A to show the (already created) datepicker with a specific datetime, but it shows always "today 13:00"
wher I'm wrong ?

B4X:
    DtpckrStorici.MinDate=StartDate
    DtpckrStorici.MaxDate=EndDate
    Sleep(0)
    DtpckrStorici.Date=MyDate
    DtpckrStorici.Refresh
 

marcick

Well-Known Member
Licensed User
Longtime User
MyDate in the code above is for example "2 sept 2023 15:54" (long variable), but I see today date instead. Ok for hours and minutes but the date itself is non set

B4X:
DtpckrStorici.MinDate=StartDate
    DtpckrStorici.MaxDate=EndDate
    Sleep(0)
    DateTime.DateFormat="dd/MM/yyyy"
    Dim MyDate As Long=DateTime.DateParse("02/09/2023")
    DtpckrStorici.Date=MyDate
    DtpckrStorici.Refresh
 
Last edited:

Alexander Stolte

Expert
Licensed User
Longtime User
You dont need to call "Refresh" the property do the scroll for you. Just use a Sleep(0) before you set the date and time.
B4X:
    AS_WheelDateTimePicker3.Create
    Sleep(0)
    AS_WheelDateTimePicker3.Date = DateUtils.SetDate(2023,12,31)
 

marcick

Well-Known Member
Licensed User
Longtime User
is this the correct code ?

B4X:
    Dim EsportaDal as long= ... full datetime
    Sleep(0)
    DtpckrStorici.Date=DateUtils.SetDate(DateTime.GetYear(EsportaDal),DateTime.GetMonth(EsportaDal), DateTime.GetDayOfMonth(EsportaDal))
    DtpckrStorici.Hour=DateTime.GetHour(EsportaDal)
    DtpckrStorici.Minute=DateTime.GetMinute(EsportaDal)
 

marcick

Well-Known Member
Licensed User
Longtime User
Yes, it works. I just ask confirmation that is correct all that code just to pass a long datetime.

Another problem: you recently fixed an issue introducing ".SetDateTextOrder" and it is ok. But when you set the PickerType as "DatePicker" not "TimePicker" there is not the option to set the correct order.
We have in Italy "day, month, year" but I get always "month, day, year" as for english notation.
Also, using the same code above, I always obtain "agosto 01 1900" not the expected date

Sorry to bore you so much but I have no other doors to knock ...
 

Alexander Stolte

Expert
Licensed User
Longtime User
Another problem: you recently fixed an issue introducing ".SetDateTextOrder" and it is ok. But when you set the PickerType as "DatePicker" not "TimePicker" there is not the option to set the correct order.
We have in Italy "day, month, year" but I get always "month, day, year" as for english notation.
Also, using the same code above, I always obtain "agosto 01 1900" not the expected date
I'm sorry, but I'm not going to include that. I've been trying for the last 2 hours, but the B4XOrderedMap suddenly stopped working as it should and kept returning the wrong sort order. Also, no matter what time zone you live in, it's more than obvious to the user what each slider is for. With date entries where there are only numbers, I understand that, but here it is more than obvious where what is.
 

marcick

Well-Known Member
Licensed User
Longtime User
Please do not worry. I understand things are always more difficult than what they seem. And I know you did a great effort to share this stuff almost for free. Anyway, the format the date are represented is typical of the country and should be in conformity. I’ll decide what to do and eventually come back to the built in date picker. Also I can’t see the correct date shown ( I see agosto 1 1900) but it’s for sure my fault and I’ll try again to see where I’m wrong. Bye.
 

marcick

Well-Known Member
Licensed User
Longtime User
I have crashes when using AsWheelDateTimePicker in conjunction with FileHandler, only running in Release, Debug works ok.
I attach a sample B4x project (look only the B4A code).
Run it and try to save the file from the MainPage (no DatePicker present), no error.
Then switch to page2 where a DatePicker is present and try again to save the file -->> crash.
Removing the DatePicker the crash disappear.

edit: Alexander, looks like the test project is too large to upload here, tell me where and I'll send you directly.

B4X:
Sub Class_Globals
    Private Root As B4XView 'ignore
    Private xui As XUI 'ignore
    Private Dtpckr1 As AS_WheelDateTimePicker
End Sub

'You can add more parameters here.
Public Sub Initialize As Object
    Return Me
End Sub

'This event will be called once, before the page becomes visible.
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("Page2")
    Dtpckr1.Create
End Sub


Private Sub BtnSaveFile_Click
    Dim Filehandler1 As FileHandler
    Filehandler1.Initialize
    Wait For (Filehandler1.SaveAs(File.OpenInput(File.DirAssets, "testfile"), "application/octet-stream", "testfile")) Complete (Success As Boolean)
End Sub


B4X:
** Activity (main) Create (first time) **
Call B4XPages.GetManager.LogEvents = True to enable logging B4XPages events.
** Activity (main) Resume **
** Activity (main) Pause event (activity is not paused). **
sending message to waiting queue (OnActivityResult)
running waiting messages (1)
** Activity (main) Resume **
** Activity (main) Pause event (activity is not paused). **
java.lang.RuntimeException: android.os.TransactionTooLargeException: data parcel size 654596 bytes
Bundle stats:
  android:viewHierarchyState [size=654332]
    android:views [size=653732]
PersistableBundle stats:
  [null]
    at android.app.servertransaction.PendingTransactionActions$StopInfo.run(PendingTransactionActions.java:146)
    at android.os.Handler.handleCallback(Handler.java:958)
    at android.os.Handler.dispatchMessage(Handler.java:99)
    at android.os.Looper.loopOnce(Looper.java:205)
    at android.os.Looper.loop(Looper.java:294)
    at android.app.ActivityThread.main(ActivityThread.java:8177)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:552)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:971)
Caused by: android.os.TransactionTooLargeException: data parcel size 654596 bytes
    at android.os.BinderProxy.transactNative(Native Method)
    at android.os.BinderProxy.transact(BinderProxy.java:584)
    at android.app.IActivityClientController$Stub$Proxy.activityStopped(IActivityClientController.java:1439)
    at android.app.ActivityClient.activityStopped(ActivityClient.java:96)
    at android.app.servertransaction.PendingTransactionActions$StopInfo.run(PendingTransactionActions.java:135)
    ... 8 more
 
Top