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.

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:

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

 

[rabbitBUSH]

Thanks for responding....
I thought for some reason that the library in #1 there was still labelled as an earlier version. Il go back and grab it .

I will make a test dummy for you when I get to the machine. But - I probably did something dumb - like not intialising properly etc. etc.. ( so maybe no test dummy necessary - will review it).

Also, thanks for the example. Did make a work around. I wanted a Really simple user input side . I like the whole dialogue look of yours.

What I couldn't get right was a return value from the user selected date (only got the current date back not the one in the header box). I am sure your example will reveal my coding omissions. Maybe it's a documentation thing?

I tried another library before I found yours, but there are issues with how it worked under B4XPages - also couldn't get it's selected date return value.

I'll let you know here what transpires.

 

[rabbitBUSH]

Hello again @jtare :
I have 1.14 now.

Sorted out the idiocy on my side which got rid of the "Unknown member" thing.... {{It seems I have a library in the Additional called DateTimePicker 1.01 that caused that problem - turned it off and solved. Now it just sees the Class module DateTimePicker.bas. Incidentally, the 1.01 produced a really nice Month-view dialogue - the one I liked to be using.}} These last comments a probably most relevant to #16 (haven't looked at #17 example yet.).

I thought that there could be an issue with B4XPages and so I redid your example as B4XPages using the flow logic I expect to be using (and which did not work with the other library). SO, that conversion is working. (#11 true)

I could not find how you got the layout in the middle image at the top of #1. I noted (#16) that your intent was to not extend outside of the current year - though obviously that would be workable. Essentially I only need ddmmyyyy no time needed and my date range would be something like 2000->2040. (will figure that out with SetMinDate SetMaxDate -> and unpacking #14 text again and #17 example.)

That's about it. Thanks again for giving me your time and attention, I'll swim upstream from here, Cheers.

(PS seemed there was no necessity to produce a Test Dummy)

 

[jtare]

I could not find how you got the layout in the middle image at the top of #1.

You can achieve that changing the colors. Look this example:

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

I hope it helps

 

[Sergey_New]

It should be possible. Try changing the layout under Base_Resize

I ask you to make the necessary changes. I can't do anything. I only need the hour and minute fields and nothing more.

 

[jtare]

I ask you to make the necessary changes. I can't do anything. I only need the hour and minute fields and nothing more.

Give me some time and I can make a demo project with your request.

 

[Sergey_New]

Give me some time

Thanks, I'll wait!

 

[jtare]

Thanks, I'll wait!

I have attached the demo project with the requested changes to show just hour and minute fields. Please try it and let me know if there is any issues.

In this version you can change between Datetime picker and Time picker by selecting your choice in the designer custom properties:

 

[Sergey_New]

Please try it and let me know if there is any issues.

I tried it, in Time mode everything works, but in DateTime mode an error occurs.
There is a wish that the “:” symbol for separating hours and minutes would be reflected and the scrolling would be endless.

 

[jtare]

but in DateTime mode an error occurs.

Make sure you are passing the min and max date in Datetime mode:

DateTimePicker1.SetMinDate(DateTime.Now-DateTime.TicksPerDay*15) 'Requiered only for Picker Type: Datetime
DateTimePicker1.SetMaxDate(DateTime.Now+DateTime.TicksPerHour*13) 'Requiered only for Picker Type: Datetime

 

[Sergey_New]

Make sure you are passing the min and max date in Datetime mode

Understood. It's just that in your example these lines were commented out.
Can we expect your decision regarding the proposals? Thank you!

 

[jtare]

Can we expect your decision regarding the proposals?

I can add the ":" in between the hours and minutes, but it will take me some time.

 

[Sergey_New]

but it will take me some time.

I will wait as long as you need.
I also ask you to consider the possibility:
- change the font size and, accordingly, the height of lines,
- set the minimum required DateTimePicker width.
Sorry for bothering.