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: 311
  • datetimelayoutB4i.zip
    1.5 KB · Views: 140
  • datetimelayoutB4j.zip
    1.5 KB · Views: 149
  • screenshot_DateTimePicker.jpg
    screenshot_DateTimePicker.jpg
    108.1 KB · Views: 64
  • DateTimePicker.bas
    18.6 KB · Views: 52
  • DateTimePicker_1.14_B4A_example.zip
    13.9 KB · Views: 75
  • DateTimePicker_1.14_B4J_example.zip
    7.2 KB · Views: 51
Last edited:

oparra

Well-Known Member
Licensed User
Congratulations,

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


regards.
 

Cebuvi

Active Member
Licensed 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
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
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
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
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
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
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).
 
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
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
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: 43
Top