none
How to customize DatePicker RRS feed

  • Question

  • 1. Date picker and Time picker are displayed in 2 rows, can they be displayed side-by-side?

    2. Can minimum year and maximum year be set in code?

    Thanks


    Frank

    Sunday, August 18, 2013 7:54 PM

Answers

  • Hi Frank,

    Officially, both these scenarios are not supported through any public APIs. If you really need the scenarios above, since this is JavaScript, you can use jQuery to directly manipulate the DOM / private APIs to change the control properties. Please be aware that these are not supported scenarios of the product, and future releases may break your code.

    Display Date and Time picker side-by-side:

    1. This can only work if you screen has one Column (the default Add/Edit Screen has two Columns, and that will not work).
    2. You can write postRender code for the Date Time Picker content item and move the Time picker select elements into the Date picker select elements group.

    myapp.AddEditOrder.CreatedDate_postRender = function (element, contentItem) {
        var $fieldSets = $("fieldset", $(element)),
            $dateFieldSet = $($fieldSets[0]),
            $timeFieldSet = $($fieldSets[1]);
        if ($timeFieldSet.length) {
            $("select", $timeFieldSet)
                .detach()
                .appendTo($dateFieldSet);
            $timeFieldSet.remove();
        }
    };

    Set minimum year and maximum year in code

    This can only work once in the screen created method, before the Date Time Picker is created and rendered. So most likely you will need to pass in some parameters to determine the maximum year and minimum year. To set them, use the contentItem._dictionary.setValue.

    myapp.AddEditOrder.created = function (screen) {
        var ci = screen.findContentItem("CreatedDate");
        ci._dictionary.setValue(
            ":DateTimePicker/Properties[MinimumYear]",
            1970);
        ci._dictionary.setValue(
            ":DateTimePicker/Properties[MaximumYear]",
            1980);
    };

    Best regards,
    Huy

    Friday, August 23, 2013 10:55 PM

All replies

  • Hi Frank,

    Officially, both these scenarios are not supported through any public APIs. If you really need the scenarios above, since this is JavaScript, you can use jQuery to directly manipulate the DOM / private APIs to change the control properties. Please be aware that these are not supported scenarios of the product, and future releases may break your code.

    Display Date and Time picker side-by-side:

    1. This can only work if you screen has one Column (the default Add/Edit Screen has two Columns, and that will not work).
    2. You can write postRender code for the Date Time Picker content item and move the Time picker select elements into the Date picker select elements group.

    myapp.AddEditOrder.CreatedDate_postRender = function (element, contentItem) {
        var $fieldSets = $("fieldset", $(element)),
            $dateFieldSet = $($fieldSets[0]),
            $timeFieldSet = $($fieldSets[1]);
        if ($timeFieldSet.length) {
            $("select", $timeFieldSet)
                .detach()
                .appendTo($dateFieldSet);
            $timeFieldSet.remove();
        }
    };

    Set minimum year and maximum year in code

    This can only work once in the screen created method, before the Date Time Picker is created and rendered. So most likely you will need to pass in some parameters to determine the maximum year and minimum year. To set them, use the contentItem._dictionary.setValue.

    myapp.AddEditOrder.created = function (screen) {
        var ci = screen.findContentItem("CreatedDate");
        ci._dictionary.setValue(
            ":DateTimePicker/Properties[MinimumYear]",
            1970);
        ci._dictionary.setValue(
            ":DateTimePicker/Properties[MaximumYear]",
            1980);
    };

    Best regards,
    Huy

    Friday, August 23, 2013 10:55 PM
  • Huy,

    Thanks a lot! These work beautifully.


    Frank

    Thursday, August 29, 2013 7:28 PM