B4A Library DateTimePicker View

DateTimePicker view is based on the CustomListView and snapCLV with a design similar to the ios datetime picker. This view has only been tested in B4A, it is not very useful in B4i since for ios the built-in picker is better.


Screenshot_20200524-010539.jpg
screenshot_DateTimePicker.jpg
screenshot2.jpg


1. Add the module and layout to your project (attached files). You should not modify this layout, it is for internal use only.
Download de layout file depending on the platform you want to use, .bal for B4A. For B4i and B4j download the zip file with the corresponding name.
2. Add the DateTimePicker custom view to your own layout in the designer.
3. Set the min,max dates and it is ready to use.

Remember to add the CustomListView and XUI library to your project.

Example:
B4X:
Sub Globals
    Private DateTimePicker1 As DateTimePicker
End Sub
Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("1") 'Layout with the datetimepicker custom view

    ToastMessageShow("Click the activity",True)
    DateTimePicker1.SetMinDate(DateTime.Now-DateTime.TicksPerDay*15)
    DateTimePicker1.SetMaxDate(DateTime.Now+DateTime.TicksPerDay*15)
    DateTimePicker1.SetSelectedValue(DateTime.Now)
    DateTimePicker1.Show
End Sub
Sub Activity_Click
    If DateTimePicker1.Selected > 0 Then
        Log($"$DateTime{DateTimePicker1.Selected}"$)
        ToastMessageShow($"$DateTime{DateTimePicker1.Selected}"$,True)
    End If
End Sub

UPDATE:
Version 1.4

-Added "fade away" effect
-Return the date as long value or a list of the selected values, each as a string
-Fixed an issue that didn't draw the lines in B4j

Version 1.3
-Probably Multiplatform. Download de layout file depending on the platform you want to use, .bal for B4A. For B4i and B4j download the zip file with the corresponding name.
-Fixed an issue that may prevent some cases to compile.

Version 1.2
-Fixed an issue that returned datetime = -1
-Now you can set the text color, line color and background color
-Other minor details
 

Attachments

  • datetimelayout.bal
    4.2 KB · Views: 734
  • datetimelayoutB4i.zip
    1.5 KB · Views: 475
  • datetimelayoutB4j.zip
    1.5 KB · Views: 484
  • screenshot_DateTimePicker.jpg
    screenshot_DateTimePicker.jpg
    108.1 KB · Views: 470
  • DateTimePicker.bas
    18.6 KB · Views: 496
  • DateTimePicker_1.14_B4A_example.zip
    13.9 KB · Views: 640
  • DateTimePicker_1.14_B4J_example.zip
    7.2 KB · Views: 510
Last edited:

TILogistic

Expert
Licensed User
Longtime User
Congratulations,

It could be expanded with more options like this class does.


regards.
 

Cebuvi

Active Member
Licensed User
Longtime User
Would it be possible that the minutes and seconds were in a continuous wheel?
That is: 57 58 59 0 1 ......... 57 58 59 0

Thanks.
 

jtare

Active Member
Licensed User
Longtime User
UPDATE.
Version 1.2

-Fixed an issue that returned datetime = -1
-Now you can set the text color, line color and background color
-Other minor details

Files in first post.
 
Last edited:

jtare

Active Member
Licensed User
Longtime User
You suggest you to replace the DateTimePicker.bas in the first post by the last one.
Users are used to find the latest version in the first post.
Good point. I just moved the latest files to the first post. Thanks
 

Star-Dust

Expert
Licensed User
Longtime User
DateTimePicker view is based on the CustomListView with a design similar to the ios datetime picker. This view has only been tested in B4A, it is not very useful in B4i since for ios the built-in picker is better.


View attachment 94622

Add the module and layout to your project (attached files). You should not modify this layout, it is for internal use only.
Add the DateTimePicker view in the designer
Set the min,max dates and it is ready to use.

Remember to add the CustomListView library to your project.

Example:
B4X:
Sub Globals
    Private DateTimePicker1 As DateTimePicker
End Sub
Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("1") 'Layout with the datetimepicker custom view

    ToastMessageShow("Click the activity",True)
    DateTimePicker1.SetMinDate(DateTime.Now-DateTime.TicksPerDay*15)
    DateTimePicker1.SetMaxDate(DateTime.Now+DateTime.TicksPerDay*15)
    DateTimePicker1.SetSelectedValue(DateTime.Now)
    DateTimePicker1.Show
End Sub
Sub Activity_Click
    If DateTimePicker1.Selected > 0 Then
        Log($"$DateTime{DateTimePicker1.Selected}"$)
        ToastMessageShow($"$DateTime{DateTimePicker1.Selected}"$,True)
    End If
End Sub

UPDATE: Version 1.2
-Fixed an issue that returned datetime = -1
-Now you can set the text color, line color and background color
-Other minor details
Did you indicate B4X because it is multiplatform?
What other platforms does it work on besides B4A?
 

jtare

Active Member
Licensed User
Longtime User
Did you indicate B4X because it is multiplatform?
What other platforms does it work on besides B4A?
Only works on B4A, a few modifications will be require to use it in the other platforms. They will become obvious once you open the class module. And maybe the datetimelayout.bal will need to be manually copied.

Edit: No longer true. V1.3 has been tested in B4A, B4i and B4j.
 
Last edited:

Star-Dust

Expert
Licensed User
Longtime User
Only works on B4A, a few modifications will be require to use it in the other platforms. They will become obvious once you open the class module. And maybe the datetimelayout.bal will need to be manually copied.
B4X misled me, it gives the idea that it is cross-platform.
 

jtare

Active Member
Licensed User
Longtime User
Can i use only for Time? Picker should show only Time, is this possible?
It should be possible. Try changing the layout under Base_Resize (Width As Double, Height As Double) to hide the custom list view that shows the days, and resize the other two to fill the view.
The selected value will still be a long integer, you simply pass to DateTime.GetHour(ticks as long) and it will return the hour, same for the minutes with DateTime.GetMinute(ticks As long).
 

adriano.freitas

Active Member
Very good job!

Just one thing that I don't think has been thought of and in some cases it can be bad: When you need to define a very wide range of dates, for example, a range of several years. The person doesn't have the year information (I added it to the code), however, the problem is that the person has to scroll a lot to find a date. How about tweaking this, maybe adding a year control?

Very grateful for your cooperation!
 

jtare

Active Member
Licensed User
Longtime User
Very good job!

Just one thing that I don't think has been thought of and in some cases it can be bad: When you need to define a very wide range of dates, for example, a range of several years. The person doesn't have the year information (I added it to the code), however, the problem is that the person has to scroll a lot to find a date. How about tweaking this, maybe adding a year control?

Very grateful for your cooperation!
It was designed for periods of time smaller than one year. Adding year control could be achieved in multiple ways such as adding a fourth selector, adding the year to the day selector, or make it a two step process where the user first selects the year and then the date within that year.
 

jtare

Active Member
Licensed User
Longtime User
Very good job!

Just one thing that I don't think has been thought of and in some cases it can be bad: When you need to define a very wide range of dates, for example, a range of several years. The person doesn't have the year information (I added it to the code), however, the problem is that the person has to scroll a lot to find a date. How about tweaking this, maybe adding a year control?

Very grateful for your cooperation!

An example of a simple two step date selector is attached. A nice looking one will need some work, this is very basic, just to demonstrate the concept.
 

Attachments

  • DateTimePicker_1.14_B4A_year_example.zip
    14.3 KB · Views: 398

rabbitBUSH

Well-Known Member
Licensed User
DateTimePicker view
Ok this is an old thread by I have come to a problem now :

I have been using this library which really does suit my immediate purposes - thank you for it.

However, it seems that (as noted in your post #1 that there is an update to this but i cannot find it - the version i have is 1.01.

Can you please direct me to where I can find the update. Thank you.

ALSO - when I try to get a selected date from the popup calendar (dt.Selected) I get the error that Selected
Unknown member: selected
I need to get the selected date whether in the past or future.

Can you give me some guidance.

Thank you very much and for providing libraries.
 

jtare

Active Member
Licensed User
Longtime User
Ok this is an old thread by I have come to a problem now :

I have been using this library which really does suit my immediate purposes - thank you for it.

However, it seems that (as noted in your post #1 that there is an update to this but i cannot find it - the version i have is 1.01.

Can you please direct me to where I can find the update. Thank you.

ALSO - when I try to get a selected date from the popup calendar (dt.Selected) I get the error that Selected
Unknown member: selected
I need to get the selected date whether in the past or future.

Can you give me some guidance.

Thank you very much and for providing libraries.

You can find version 1.4 in the first post, download the file "DateTimePicker.bas". An example is also attached in the first post.
Can you create a small project replicating the error you have encountered? I was not able to replicate it.

Example:
'DateTimePicker V1.4

Sub Globals
    Private DateTimePicker1 As DateTimePicker
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("1")
        
    ToastMessageShow("Click the activity",True)
    
    
    DateTimePicker1.SetMinDate(DateTime.Now-DateTime.TicksPerDay*15)
    DateTimePicker1.SetMaxDate(DateTime.Now+DateTime.TicksPerHour*13)
    DateTimePicker1.SetSelectedValue(DateTime.Now)
    
    DateTimePicker1.backgroundColor = Colors.Black
    DateTimePicker1.focusedTextColor = Colors.White
    DateTimePicker1.lineColor = Colors.Yellow
    DateTimePicker1.fadeAwayEffect = True 'New
    
    DateTimePicker1.Show

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Click
    If DateTimePicker1.Selected > 0 Then
        Log(DateTimePicker1.SelectedRawValues) 'New
        Log($"$DateTime{DateTimePicker1.Selected}"$)
        ToastMessageShow($"$DateTime{DateTimePicker1.Selected}"$,True)
    End If
End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub
 
Top