B4J Question [BananoVuetifyAD3] - Format date do not work ?

[Enrico Fuoti]

Hello all,
I'm trying to realize a webapp using Mashiane BVAD3, but i'm not able to customize date fields format.
It looks like there is no way ti use a format other then the predefined one on CRUD form and table.
Also datepicker cannot be shown in any other language.

I tried using "watchdate" with a code similar to the following, but it doesn't make any change.

Sub Initialize(v As VuetifyApp)
    ...
    ...
    txtDate.WatchDate(page)
End Sub

Private Sub txtDate_Watch
    page.FormatDisplayDate("txtDate", "dd/mm/yyyy")
End Sub

is there anything else i could try ?
any suggestion ?

 

[Mashiane]

Can you please upload a simple small project of your use case, I will investigate as soon as I get that.

 

[Enrico Fuoti]

Thank you Mashiane,
I tried to test the date format using on one of the projects of your tutorial.
attached below.

 

[Mashiane]

ok, will look into it and revert back in the PM...

 

[Mashiane]

You example is based on VForm and VField, usage....

A brief background..

This means the VField controlling the date-picker is made up of 2 things combined.

1. A VTextField
2. A VDatePicker

This also means one more thing, the datepicker can have a watch for formatting dates, which uses the v-model

Internally, the date format used by BVAD3 for showing the date is

This is intenally built into BVAD3 to be like that... (see :value="nicedate(....")

The are a couple of these nicedates & nicetimes etc.. all based on the dayjs javascript library.

Whilst for saving its YYYY-MM-DD, you can see this when you run..

Private Sub txtDateStarted_Watch
    Log(txtDateStarted.GetValue(page))
End Sub

 

[Mashiane]

In you component page, define a new sub

Sub NiceDate(sdate As String) As String            'ignoredeadcode
    Dim sdate As String = BANanoShared.FormatDisplayDate(sdate, "ddd, DD MMM YYYY")
    Return sdate
End Sub

Now, change he "ddd, DD MMM YYY" to be what you need, applicable formats are available https://day.js.org/

Then register the method on the Initialize sub after page.Initialize(???

page.SetMethod(Me, "nicedate", array("x"))

What this does is over-write the built in date-format of the output of the date-picker.

Happy BVAD3 Coding.

NB: This will only change the date-format of that particular page for all date time pickers.

 

[Mashiane]

page.FormatDisplayDate("txtDate", "dd/mm/yyyy")

This is incorrect, you need to pass a valid date and not "txtDate" something like "2022-11-28"

 

[Enrico Fuoti]

Thank you Mashiane,
it's all ckear,
I tried to implement the customized NiceDate Sub in my page, but when run the date field turns blank either in form and table.
am i missing something?

I only added the following:

Sub Initialize(v As VuetifyApp)                        'ignoreDeadCode
    vuetify = v
    page.Initialize(Me, name)
    page.vuetify = vuetify
    page.StartPage
    path = page.path
    '
    banano.LoadLayout(page.Here, "jsoncrud")   
    frmUsers.BindState(page)   
    frmUsers.BindDataSource(dsUsers)
    frmUsers.BindDataTable(dtUsers)

    vuetify.AddRoute(page)
    
    page.SetMethod(Me, "nicedate", Array("x"))
End Sub

...
...

Sub NiceDate(sdate As String) As String            'ignoredeadcode
    Dim sdate As String = BANanoShared.FormatDisplayDate(sdate, "DD-MM-YYYY")
    Return sdate
End Sub

 

[Mashiane]

Can we give it another try, in your code you are adding it after the page is added to the app (.Addroute), it wont work, you need to add it before that.

Sub Initialize(v As VuetifyApp)                        'ignoreDeadCode
    vuetify = v
    page.Initialize(Me, name)
    page.SetMethod(Me, "nicedate", Array("x"))
    page.vuetify = vuetify
    page.StartPage
    path = page.path
    '
    banano.LoadLayout(page.Here, "jsoncrud")   
    frmUsers.BindState(page)   
    frmUsers.BindDataSource(dsUsers)
    frmUsers.BindDataTable(dtUsers)

    vuetify.AddRoute(page)
    
End Sub

...
...

Sub NiceDate(sdate As String) As String            'ignoredeadcode
    Dim xdate As String = BANanoShared.FormatDisplayDate(sdate, "DD-MM-YYYY")
    Return xdate
End Sub

 

[Enrico Fuoti]

Can we give it another try, in your code you are adding it after the page is added to the app (.Addroute), it wont work, you need to add it before that.

Sub Initialize(v As VuetifyApp)                        'ignoreDeadCode
    vuetify = v
    page.Initialize(Me, name)
    page.SetMethod(Me, "nicedate", Array("x"))
    page.vuetify = vuetify
    page.StartPage
    path = page.path
    '
    banano.LoadLayout(page.Here, "jsoncrud")  
    frmUsers.BindState(page)  
    frmUsers.BindDataSource(dsUsers)
    frmUsers.BindDataTable(dtUsers)

    vuetify.AddRoute(page)
   
End Sub

...
...

Sub NiceDate(sdate As String) As String            'ignoredeadcode
    Dim xdate As String = BANanoShared.FormatDisplayDate(sdate, "DD-MM-YYYY")
    Return xdate
End Sub

With the above change the date appears, but the date format returns to the default one "ddd, DD MMM YYYY". :/

 

[Enrico Fuoti]

The problem i have is that I'm trying to convert one of my webapps to BVAD3, which i think is really great,
but I cannot use it if not localized to italian.
by the way, I'm testing Sithatso Daisy, but i I did not find any datasource component.
i guess is not ready for database crud forms right ?

 

[Mashiane]

With the above change the date appears, but the date format returns to the default one "ddd, DD MMM YYYY". :/

Strange, will investigate...

 

[Mashiane]

but I cannot use it if not localized to italian.

BVAD3 already has a competed i18 translation module as demonstrated on this link.

BANanoVuetifyAD3 V7.36 - New Awesome Kitchen Sink

BVAD3 Design System

mashiane.github.io

One can also set a locale to use others...

This is demonstrated here

BANanoVuetifyAD3 V7.36 - New Awesome Kitchen Sink

BVAD3 Design System

mashiane.github.io

Also, I used my own mother tongue in this date-picker example

BANanoVuetifyAD3 V7.36 - New Awesome Kitchen Sink

BVAD3 Design System

mashiane.github.io

Lwesibini means Tuesday etc.

As this datepicker is a combination of text-field and date-picker, to ensue it woks, in pgIndex, we added this code to hack it.

vuetify.AddDateTranslation("Sun", "iCawe")
    vuetify.AddDateTranslation("Mon", "uMvulo")
    vuetify.AddDateTranslation("Tue", "uLwesibini")
    vuetify.AddDateTranslation("Wed", "uLwesithathu")
    vuetify.AddDateTranslation("Thu", "uLwesine")
    vuetify.AddDateTranslation("Fri", "uLwesihlanu")
    vuetify.AddDateTranslation("Sat", "uMgqibelo")
    vuetify.AddDateTranslation("Jan", "EyoMqungu")
    vuetify.AddDateTranslation("Feb", "EyoMdumba")
    vuetify.AddDateTranslation("Mar", "EyoKwindla")
    vuetify.AddDateTranslation("Apr", "uTshaz'iimpuzi")
    vuetify.AddDateTranslation("May", "EyeCanzibe")
    vuetify.AddDateTranslation("Jun", "EyeSilimela")
    vuetify.AddDateTranslation("Jul", "EyeKhala")
    vuetify.AddDateTranslation("Aug", "EyeThupha")
    vuetify.AddDateTranslation("Sep", "EyoMsintsi")
    vuetify.AddDateTranslation("Oct", "EyeDwarha")
    vuetify.AddDateTranslation("Nov", "EyeNkanga")
    vuetify.AddDateTranslation("Dec", "EyoMnga")

This is applicable to the input component.

 

[Mashiane]

by the way, I'm testing Sithatso Daisy, but i I did not find any datasource component.
i guess is not ready for database crud forms right ?

As much as the datasource component is not available yet, this does not stop anyone from using BANano.PHP with their own php scipts enclosing inside with

#if php
#end php

and use BANano.CallInlinePhPWait.

All the data-source does is just wrap these to make it easier to use without having to worry about the code. So one can use any back-end they wish, there is nothing stopping to do that.

As an example, the expense tracker Crud example, it uses PocketBase as a back-end, you can see this post, https://www.b4x.com/android/forum/t...ndcss-using-b4x-with-ebook.143971/post-915410

Also, if you have a rest api, you can use the bananofetch class module for your crud, inside SithasoDaisy.

So the answer is, yes, Sithaso is currently able and ready for crud functionality.

And yes, the data-source will be added for those who prefer to use that.

 

[Enrico Fuoti]

Exactly, I should also change the pickerdate to italian,
You're saying that I can change it using vuetify.setlocale and vuetify.AddTranslation ?
I'll try

 

[Mashiane]

You were right, adding of the nicedate should be after Addroute.

vuetify.AddRoute(page)
    page.SetMethod(Me, "nicedate", Array("x"))

This is because even if you set it before, because of the translations source code "assumed" to be existing, the built in hard coded "nicedate" format is used.

Just tested this and its working fine with your suggestion.

 

[Enrico Fuoti]

You were right, adding of the nicedate should be after Addroute.

vuetify.AddRoute(page)
    page.SetMethod(Me, "nicedate", Array("x"))

View attachment 136523

This is because even if you set it before, because of the translations source code "assumed" to be existing, the built in hard coded "nicedate" format is used.

Just tested this and its working fine with your suggestion.

In your test works great, but in mine the field goes blank again. it is strange I only added this few lines of code.

    Sub Initialize(v As VuetifyApp)                        'ignoreDeadCode
    ...
    vuetify.AddRoute(age)
    page.SetMethod(Me, "nicedate", Array("x"))
    end sub
    
    Sub NiceDate(sdate As String) As String            'ignoredeadcode
    Log("sdate: " & sdate)
    Dim sdate As String = BANanoShared.FormatDisplayDate(sdate, "DD-MM-YYYY")
    Return sdate
End Sub

 

[Enrico Fuoti]

ps. i put the log of sdate and always returns "undefined"

 

[Mashiane]

Sub NiceDate(sdate As String) As String            'ignoredeadcode
    Log("sdate: " & sdate)
    Dim sdate As String = BANanoShared.FormatDisplayDate(sdate, "DD-MM-YYYY")
    Return sdate
End Sub

mine is

Sub NiceDate(sdate As String) As String            'ignoredeadcode
    Dim xdate As String = BANanoShared.FormatDisplayDate(sdate, "DD-MM-YYYY")
    Return xdate
End Sub

 

[Enrico Fuoti]

wow, I should have noticed that..
It works!!!! I'm an happy man
Thank you so much for all your help and patience!!