First real DatePicker on Xojo WE

Lars_Lehmann · February 5, 2018, 3:35pm

Hi,

as you may know, I’m mostly working in Xojo webedition and I often struggle with the lack of good and performant controls.

One control I really missed is a simple Datepicker, where I didn’t need to implement a full framework or library such as jQuery or Bootstrap.

Now I want to share with you my simple result. I used the native date input control, whis is supported by all modern browsers as well by mobile browsers.

Here’s my Xojo-Code:
https://github.com/VanDerLars/XojoWE_NativeDatefield

I’ll add all my homemade controls to github in the next days. I hope there are some things you guys might find helpful.

Sebastian_Brito · February 5, 2018, 10:30pm

Hi Lars, thanks for your contribution, I have tried it and it gives me the following error:
NativeDatefield.ExecuteEvent, line 7
Type “App” has no member named “Date_Convert”
dim dat as Date = app.Date_Convert (val)

Roger_St-Arneault · February 5, 2018, 11:07pm

Hi Lars,

Thank you very much! It looks great. Will try it for sure.

Lars_Lehmann · February 6, 2018, 7:28am

[quote=372396:@Sebastian Brito]Hi Lars, thanks for your contribution, I have tried it and it gives me the following error:
NativeDatefield.ExecuteEvent, line 7
Type “App” has no member named “Date_Convert”
dim dat as Date = app.Date_Convert (val)[/quote]

Thanks Sebastian, I forgot to add a method. I updated the readme in the repo. You have to add a method to the app object as described, then it should work.

AlbertoD · February 6, 2018, 3:32pm

Thank you Lars.

I’m too new to web apps, and I can’t create a sample out of the code. I expected that just by dragging NativeDateField to WebPage1 (and adding the functions/script) I get a box with a triangle on the right side to click and get a calendar, but I don’t get that.

Lars_Lehmann · February 6, 2018, 3:34pm

If you drop the control at design time into the editor, you’ll see just a box with a icon. The Datefield is created at runtime when you run your app. This should work

You can attach your sample project, so I can help you direct with your own code.

AlbertoD · February 6, 2018, 3:47pm

I just see a box with no icon. Here is my test.

Lars_Lehmann · February 6, 2018, 3:59pm

You forgot to add the javascript to the app.HTMLheader as described in the git readme.

Lars_Lehmann · February 6, 2018, 4:01pm

If you work with xojo WE then I really recommend you tu use the browser console. There you get a lot of informations such as JS errors.

AlbertoD · February 6, 2018, 4:03pm

I think I don’t know how to do that. What I did was:

Create a Property under App
Name HTMLHeader
Type String
Then pasted the code there, but nothing happened
Then changed the code and pasted to ‘Default’

I guess both are wrong. I’ll try to search for app.HTMLheader to find the right way to put that code.

Lars_Lehmann · February 6, 2018, 4:05pm

select the app object
look in the inspector on the right side
point the HTMLHeader Property
Click on the little pencil right to it
Paste the JS code
Ready

AlbertoD · February 6, 2018, 4:20pm

Thank you. Still doesn’t work with Safari (that’s the default browser), but it works on FireFox and Chrome. Interesting that FireFox doesn’t show the icon but Chrome does, the calendars are very different between FireFox and Chrome.

After I select a Date, if I click anywhere outside the date box, I get this error:

[quote]The application has encountered an error and cannot continue.
Could not execute returned javascript: jQuery is not defined
Source: var ndt = jQuery(’#nativeDate_sQAFy0zm’);
ndt.val(‘2018-02-06’);[/quote]

Tim_Parnell · February 6, 2018, 4:51pm

This doesn’t work cross-browser. It relies on browser handling of input type="date" which, as Alberto mentioned, does not happen with Safari. Also in the Value setter it does require jQuery.

It could be improved to internalize the date parsing (instead of putting a method on the App object), proper setup of the HTML Headers, and automatically loading jQuery, but it’s not going to work as a cross-browser calendar/date input. I might also suggest you read through the documentation for the WebSDK for where to place things and how to self-contain the control. You may also find http://webgen.timi.me of interest.

John_Mark_Mendoza · March 10, 2018, 11:22pm

Hi Guyz!

I have a question.

I tried to do the ff.:

select the app object
look in the inspector on the right side
point the HTMLHeader Property
Click on the little pencil right to it
Paste the JS code
run

but I got this error:
Runtime Error
Press OK to Continue
Press Cancel to Quit

Please report what caused this error
along with the information below.

…\…\…\Common\SpawnCompiler\SpawnCompilerInterface.cpp:785
Failure Condition: *ptr != ’
’ && *ptr != ‘\r’
Renderer is trying to add multiple lines at once

What should I do? Please Help me, I’m new in programming and I want to start in Xojo Web.

Thank you and God bless!!

Markus_Winter · March 11, 2018, 11:44am

[quote=377171:@John Mark Mendoza]Hi Guyz!

I have a question.[/quote]

Then you should start a new thread with your question, not hijack another thread.

This is first off considered rude, and secondly how do you expect people to find your question in a completely different topic?

Gilles_Plante · August 6, 2018, 6:03pm

@Lars Lehmann

Hi,

running Xojo 2018 R 1.1, I added your DatePicker to my Web App. I followed the instruction in readme.md and checked many times I did, but I can’t get the picker to work. First tests were done in FireFox, but that does not work very well - we’re in 2018 and yet we can’t the main browsers to work the same :-(.

I tried in Chrome, the control is displayed correctly now, but I can’t get the values for the date pickers (I need to for Date From and Date To.

This is the code for the button on my WebDialog:

[code]
Dim DateDebS, DateFinS As String

DateDebS = Self.DateDebutPeriode.TextValue
DateFinS = Self.DateDebutPeriode.TextValue

Dim DateDeb As New Date
Dim DateFin As New Date

DateDeb = Self.DateDebutPeriode.Value

DateFin = Self.DateFinPeriode.Value[/code]
Both DateDebS and DateFinS are empty even though they have a date selected. Regarding DateDeb and DateFin, they are both Nil.

In Event Definitions for NativeDateField I see ValueChanged(Value as Date), where should be located the handler for that ?

Unless I missed it, I don’t see an example project.

Thanks for your help.

Sauro_Spagnoli · August 11, 2018, 10:58am

First of all, thank you @Lars Lehmann , for this simple and native datepicker solution.

After I select a Date, if I click anywhere outside the date box, I get this error:

The application has encountered an error and cannot continue.
Could not execute returned javascript: jQuery is not defined
Source: var ndt = jQuery('#nativeDate_sQAFy0zm');
ndt.val('2018-02-06');[/code][/quote]

If the project don't have jQuery linked in [i]NativeDatefield.Value.Set[/i] you should use this code for [i]js.Append[/i] :
[code]js.Append("var ndt = document.getElementById('nativeDate_" + self.ControlID + "');")
js.Append("ndt.value='" + y + "-" + m + "-" + d + "';")