Example of Creating the TsSpliceDateEditor Component

To execute the example, create an HTML page and perform the following operations:

1. Add links to the following CSS files: PP.css, PP.Express.css, PP.Metabase.css.

Also add links to the following JS files: jquery.js, PP.js, PP.Metabase.js.PP.Express.js., PP.TS.js., and resources.ru.js.

2. Next in the <head> tag add a script that creates the TsSpliceDateEditor component:

<script type="text/javascript">
    $(this).ready(function () {
        // Determine language settings for resources
        PP.resourceManager.setRootResourcesFolder("Resources/");
        // Specify the path to the root folder that contains resources files
        PP.setCurrentCulture(PP.Cultures.ru);
        // Get DOM element of the block, in which place the component
        var parentDiv = document.getElementById("parentDiv");
        // Create a date editor
        var lnTransformPeriodEditor = new PP.Ui.TsSpliceDateEditor({
            ParentNode: parentDiv // Element, in which place the component
        });
    });
</script>

3. Within the <body> tag place a block with the parentDiv identifier that will show the created component:

<body>
    <div id="parentDiv"></div>
</body>

After executing the example the TsSpliceDateEditor component was created and displayed:

4. To expand this component, run the following script in the browser console:

// Get nested date and time editor
var dateTimePicker = spliceDateEditor._SpliceDatePicker;
// Expand this editor
dateTimePicker.showDropPanel();

After starting this script the date editor expands:

See also:

TsSpliceDateEditor