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: