DataForm: Language of DatePicker/TimePicker

3 posts, 1 answers
  1. Marc
    Marc avatar
    101 posts
    Member since:
    Oct 2013

    Posted 03 Nov Link to this post

    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

  2. Answer
    nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    316 posts

    Posted 07 Nov Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Marc
    Marc avatar
    101 posts
    Member since:
    Oct 2013

    Posted 07 Nov in reply to nikolay.tsonev Link to this post

    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

Back to Top