Change dateFormat datePicker dataform

[bnbs]

I want to display the data from datePicker as 'dd/MM/yyyy'. How can I do that in dataform?

[tsonevn]

Hi @brunaaanayara, Thank you for contacting us. Changing the dateFormat for the RadDataForm's datePicker editor is not supported. Regarding that, I logged this issue as a new feature request.

In the meantime, I would suggest changing the format while accessing the native part of the editor on Page navigated event. For example:

XML

<Page navigatedTo="navigated" loaded="onPageLoaded" xmlns:df="nativescript-pro-ui/dataform" xmlns="http://www.nativescript.org/tns.xsd">
    <GridLayout rows="100 *" columns="">
        <Label text="Test" textWrap="true" />
        
    
    <df:RadDataForm row="1"  id="myDataForm" source="{{ ticketOrder }}" propertyCommitted="dfPropertyCommitted">
        <df:RadDataForm.properties>
            <df:EntityProperty name="movie" displayName="Movie Name" index="0" converter="{{ $value }}" valuesProvider="{{ movieNames }}">
                <df:EntityProperty.editor>
                    <df:PropertyEditor type="Picker" />
                </df:EntityProperty.editor>
            </df:EntityProperty>
            <df:EntityProperty name="date" index="1" >
                <df:EntityProperty.editor>
                    <df:PropertyEditor type="DatePicker" />
                </df:EntityProperty.editor>
            </df:EntityProperty>
            <!--......-->
    </df:RadDataForm>
    </GridLayout>
    
</Page>

TypeScript

import viewModel = require("./../view-models/ticket-order-model");
import {RadDataForm, EntityProperty} from "nativescript-pro-ui/dataform";
import {isIOS, isAndroid} from "platform";
import {Page} from "ui/page";
declare var NSDateFormatter:any;
declare var java:any;
export function onPageLoaded(args) {
    var page = args.object;
    page.bindingContext = new viewModel.TicketViewModel();
}

export function dfPropertyCommitted(args) {
    //console.log("dfPropertyCommitted");
    var text = "LastEvent: " + args.propertyName + " property committed";
    //console.log(text);
}



export function navigated(args){
    console.log("navigatedTo");
    var page:Page = <Page>args.object;
    console.log("page");
    console.log(page)
    let component:RadDataForm = <RadDataForm>page.getViewById("myDataForm");
    console.log("component");
    console.log(component);
    let entity:EntityProperty = component.getPropertyByName("date");
    console.log("entity");
    console.log(entity);
    console.log("editor")
    if(isIOS){
        console.log(entity.editor.ios);
        var dateFormatter = NSDateFormatter.alloc().init();
        dateFormatter.dateFormat = "MM-yyyy-dd";
        entity.editor.ios.dateFormatter = dateFormatter;
    }else{
        var simpleDateFormat = new java.text.SimpleDateFormat("dd-MM-yyyy", java.util.Locale.US);
        entity.editor.android.setDateFormat(simpleDateFormat);
    }
}

[terreb]

+1 to implement this. The default date format is pretty ugly: for "April 2, 2017" it shows "Sun, 02.04".

[otnielgomez]

+1

[yonghongren]

Hi @tsonevn, What would be the equivalent of your workaround for NativeScript Angular? I tried to do this in AfterViewInit like this:

  @ViewChild('form') patientForm: RadDataFormComponent;

ngAfterViewInit() {
        const dobProperty = this.patientForm.dataForm.getPropertyByName('dob');
        if (isIOS) {
        } else {
            const simpleDateFormat = new java.text.SimpleDateFormat(
                'dd-MM-yyyy',
                java.util.Locale.US
            );

            // PROBLEM:   dobProperty.editor.android is null
            dobProperty.editor.android.setDateFormat(simpleDateFormat);
        }
    }

The template looks like this:

<RadDataForm  #form>
   <TKPropertyGroup>
         <TKEntityProperty tkPropertyGroupProperties name="dob" displayName="DOB">
            <TKPropertyEditor tkEntityPropertyEditor type="DatePicker"></TKPropertyEditor>
          </TKEntityProperty>
   </TKPropertyGroup>
</RadDataForm>

It didn't work because dobProperty.editor.android is null. Any idea why? Appreciate any suggestions. Thanks.

[otnielgomez]

@yonghongren here is your answer, actually is in the samples, check how it's forming the date like "yyyy-MM-dd"

https://github.com/telerik/nativescript-ui-samples-angular/tree/release/sdkAngular/app/dataform/platform-specifics

[yonghongren]

Hi Otniel,

That is so much simpler! Thank you very much.

[PieterHartzer]

That link that @otnielgomez provided is no longer available. I am having the same issue trying Vue and cannot get the workaround to work. Any update on this issue?

[tgpetrov]

@PieterHartzer The feature is not yet implemented, but the workaround is quite easy to use. Here are the current links for demo and demo-angular.

[PieterHartzer]

@tgpetrov That's great, thanks! I am not having any luck however. I get setDateFormat is not a function.

I even tried the following code, which find the function but fails with the same error:

for (var m in args.editor) {
  if (typeof args.editor[m] == "function" && m == "setDateFormat") {
    console.log(m);
    m(simpleDateFormat);
  }
 }

Example here

[wildhart]

@PieterHartzer Your code above will work if you replace m(simpleDateFormat) with args.editor[m](simpleDateFormat)

The reason it wasn't working is that the onEditorUpdate function is called twice and the first time args.editor.setDateFormat is undefined. Try this:

 if (typeof args.editor.setDateFormat != "undefined") {
    const simpleDateFormat = new java.text.SimpleDateFormat("yyyy-MM-dd", java.util.Locale.US);
    args.editor.setDateFormat(simpleDateFormat);
}

[PieterHartzer]

@wildhart That's great! Seeing your code makes me wonder how I never noticed it. Thank you.

[Whip]

Simplified plain javascript example

const dataForm = page.getViewById("myDataForm");
let entity = dataForm.getPropertyByName("date");
if(page.android){
    var simpleDateFormat = new java.text.SimpleDateFormat("yyyy-MM-dd", java.util.Locale.US);
    entity.editor.android.setDateFormat(simpleDateFormat);
}

[Jogendra1234]

Can you please share date globalization as per cultureinfo in nativescript 7?