DataForm: Language of DatePicker/TimePicker

[Marc]

Hello,

is it possible (or will it be possible in the future) to change the language of the DatePicker/TimePicker component of the DataForm?

This includes:

- language of the months and the shortcuts of the days in the weekwithin DatePicker

- the date formats of DatePicker

- the cancel and confirm button text

 

Best regards

[Nikolay Tsonev]

Hello Marc,

Thank you for your interest in UI for NativeScript.

The DataForm component uses the default language, which is set up on the device. Regarding that, the language of the months and the shortcuts should also be changed depending on the device language and localization settings. 
Something more, on iOS you should also set up the CFBundleLocalizations key in your Info.plist. This key describes the languages, which could be used from the application. For example:
Info.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    ...........
    <key>CFBundleLocalizations</key>
    <array>
        <string>fr</string>
    </array>
</dict>
</plist>

About the date format, at this point, changing this setting is not supported. This functionality is logged here as a new feature request. In the meantime, you could set up the format to the picker, while using the following approach. 
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);
    }
}

About the last point, the button text, could not be changed at this time, regarding that I would suggest logging new feature request here in the feedback repository, where you could also describe your use case.


Regards,
nikolay.tsonev
Progress Telerik

[Marc]

Hello Nikolay,

thanks for your response. Indeed, I tested this only on Android emulator, where english is set as default language and localization.

It's the same with the text of cancel-button and ok-button.

Regarding the date-format, I will watch the already existing issue on Github, so thanks for sharing the link.

 

Best regards,

Marc