syncfusion-content · MohamedMahadeer-SF4446 · Mar 18, 2025 · Mar 18, 2025 · Mar 21, 2025 · Mar 21, 2025
diff --git a/ej2-javascript/code-snippet/datepicker/getting-started-cs15/app/app.component.ts b/ej2-javascript/code-snippet/datepicker/getting-started-cs15/app/app.component.ts
diff --git a/ej2-javascript/code-snippet/datepicker/getting-started-cs15/app/app.module.ts b/ej2-javascript/code-snippet/datepicker/getting-started-cs15/app/app.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { DatePickerModule } from '@syncfusion/ej2-ng-calendars';
+import { AppComponent } from './app.component';
+
+
+/**
+ * Module
+ */
+@NgModule({
+    imports: [
+        BrowserModule,
+        DatePickerModule
+    ],
+    declarations: [AppComponent],
+    bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/ej2-javascript/code-snippet/datepicker/getting-started-cs15/app/main.ts b/ej2-javascript/code-snippet/datepicker/getting-started-cs15/app/main.ts
@@ -0,0 +1,6 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from '@angular/core';
+import { AppModule } from './app.module';
+
+enableProdMode();
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/ej2-javascript/code-snippet/datepicker/getting-started-cs15/index.css b/ej2-javascript/code-snippet/datepicker/getting-started-cs15/index.css
@@ -0,0 +1,23 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  height: 40px;
+  width: 30%;
+  position: absolute;
+  top: 45%;
+  left: 45%;
+}
+
+#element {
+    display: block;
+    height: 350px;
+}
+
+#wrapper {
+    width: 250px;
+    margin: 0 auto;
+}
+
diff --git a/ej2-javascript/code-snippet/datepicker/getting-started-cs15/index.js b/ej2-javascript/code-snippet/datepicker/getting-started-cs15/index.js
@@ -0,0 +1,9 @@
+   var datepicker = new ej.calendars.DatePicker({
+        placeholder: 'Choose a date',
+        value: new Date(),
+    // sets the format.
+    format: 'yyyy-MM-dd',
+    inputFormats: ['dd/MM/yyyy', 'yyyyMMdd']
+    });
+    datepicker.appendTo('#element');
+
diff --git a/ej2-javascript/code-snippet/datepicker/getting-started-cs15/index.ts b/ej2-javascript/code-snippet/datepicker/getting-started-cs15/index.ts
@@ -0,0 +1,13 @@
+
+
+import { DatePicker } from '@syncfusion/ej2-calendars';
+// creates a DatePicker component with custom format.
+let datepickerObject: DatePicker = new DatePicker({
+    value: new Date(),
+    // sets the format.
+    format: 'yyyy-MM-dd',
+    inputFormats: ['dd/MM/yyyy', 'yyyyMMdd']
+});
+datepickerObject.appendTo('#element');
+
+
diff --git a/ej2-javascript/code-snippet/datepicker/getting-started-cs15/js/index.html b/ej2-javascript/code-snippet/datepicker/getting-started-cs15/js/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>Essential JS 2 DatePicker control</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript UI Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="styles.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-calendars/styles/material.css" rel="stylesheet">
+
+
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+
+    <div id="container">
+        <input id="element" type="text">
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
diff --git a/ej2-javascript/code-snippet/datepicker/getting-started-cs15/styles.css b/ej2-javascript/code-snippet/datepicker/getting-started-cs15/styles.css
@@ -0,0 +1,18 @@
+#container {
+    visibility: hidden;
+    max-width: 250px;
+    margin: 0 auto;
+}
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    width: 30%;
+    position: absolute;
+    top: 45%;
+    left: 45%;
+}
+
+#element {
+    display: block;
+}
diff --git a/ej2-javascript/code-snippet/datepicker/getting-started-cs15/systemjs.config.js b/ej2-javascript/code-snippet/datepicker/getting-started-cs15/systemjs.config.js
@@ -0,0 +1,32 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+		"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
diff --git a/ej2-javascript/code-snippet/datepicker/getting-started-cs15/ts/index.html b/ej2-javascript/code-snippet/datepicker/getting-started-cs15/ts/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Essential JS 2 DatePicker control</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <link href="styles.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-calendars/styles/material.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>LOADING....</div>
+    <div id='container'>
+        <input id='element' type="text" />
+    </div>
+</body>
+
+</html>
diff --git a/ej2-javascript/code-snippet/datetimepicker/getting-started-cs13/index.js b/ej2-javascript/code-snippet/datetimepicker/getting-started-cs13/index.js
@@ -0,0 +1,10 @@
+   var datetimepicker = new ej.calendars.DateTimePicker({
+        placeholder: 'Choose a date',
+        value: new Date(),
+    // sets the format.
+    format: 'yyyy-MM-dd hh:mm',
+    // sets the input format.
+    inputFormats: ['dd/MM/yyyy hh:mm a', 'yyyyMMdd HH:mm']
+    });
+    datetimepicker.appendTo('#element');
+
diff --git a/ej2-javascript/code-snippet/datetimepicker/getting-started-cs13/index.ts b/ej2-javascript/code-snippet/datetimepicker/getting-started-cs13/index.ts
@@ -0,0 +1,14 @@
+
+
+import { DateTimePicker } from '@syncfusion/ej2-calendars';
+// creates a DatePicker component with custom format.
+let datetimepickerObject: DateTimePicker = new DateTimePicker({
+    value: new Date(),
+    // sets the format.
+    format: 'yyyy-MM-dd hh:mm',
+    // sets the input format.
+    inputFormats: ['dd/MM/yyyy hh:mm a', 'yyyyMMdd HH:mm']
+});
+datetimepickerObject.appendTo('#element');
+
+
diff --git a/ej2-javascript/code-snippet/datetimepicker/getting-started-cs13/js/index.html b/ej2-javascript/code-snippet/datetimepicker/getting-started-cs13/js/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>Essential JS 2 DateTimePicker control</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript UI Controls">
+    <meta name="author" content="Syncfusion">
+    <link href="styles.css" rel="stylesheet">
+    <!--style reference from the DateTimePicker component-->
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-calendars/styles/material.css" rel="stylesheet">
+
+
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+
+    <div id="container">
+        <input id="element" type="text">
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>
diff --git a/ej2-javascript/code-snippet/datetimepicker/getting-started-cs13/styles.css b/ej2-javascript/code-snippet/datetimepicker/getting-started-cs13/styles.css
@@ -0,0 +1,18 @@
+#container {
+    visibility: hidden;
+    max-width: 250px;
+    margin: 0 auto;
+}
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    width: 30%;
+    position: absolute;
+    top: 45%;
+    left: 45%;
+}
+
+#element {
+    display: block;
+}
diff --git a/ej2-javascript/code-snippet/datetimepicker/getting-started-cs13/systemjs.config.js b/ej2-javascript/code-snippet/datetimepicker/getting-started-cs13/systemjs.config.js
@@ -0,0 +1,32 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+		"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
diff --git a/ej2-javascript/code-snippet/datetimepicker/getting-started-cs13/ts/index.html b/ej2-javascript/code-snippet/datetimepicker/getting-started-cs13/ts/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Essential JS 2 DateTimePicker control</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <link href="styles.css" rel="stylesheet" />
+    <!--style reference from the DateTimePicker component-->
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-calendars/styles/material.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='loader'>LOADING....</div>
+    <div id='container'>
+        <input id='element' type="text" />
+    </div>
+</body>
+
+</html>
diff --git a/ej2-javascript/code-snippet/mention/getting-started-cs13/index.js b/ej2-javascript/code-snippet/mention/getting-started-cs13/index.js
@@ -0,0 +1,10 @@
+var userData = ['Selma Rose', 'Garth', 'Robert', 'William', 'Joseph'];
+// initialize Mention component
+var mentionObj = new ej.dropdowns.Mention({
+  dataSource: userData,
+  showMentionChar: true,
+  requireLeadingSpace : false
+});
+mentionObj.appendTo('#mentionElement');
+
+
diff --git a/ej2-javascript/code-snippet/mention/getting-started-cs13/index.ts b/ej2-javascript/code-snippet/mention/getting-started-cs13/index.ts
@@ -0,0 +1,27 @@
+import { Mention } from '@syncfusion/ej2-dropdowns';
+
+// defined the array of complex data
+let emailData: { [key: string]: Object }[] = [
+    { Name: 'Selma Rose', EmailId : 'selma@gmail.com' },
+    { Name: 'Maria', EmailId : 'maria@gmail.com' },
+    { Name: 'Russo kay', EmailId : 'russo@gmail.com' },
+    { Name: 'Robert', EmailId : 'robert@gmail.com' },
+    { Name: 'Garth', EmailId : 'garth@gmail.com' }
+];
+
+// initialize Mention control
+let mentionObject: Mention = new Mention({
+    //set the data to dataSource property
+    dataSource: emailData,
+    // maps the appropriate column to fields property
+    fields: { text: 'Name', value: 'EmailId' },
+    mentionChar: '@',
+    showMentionChar: true,
+    requireLeadingSpace : false
+});
+
+// render initialized Mention
+mentionObject.appendTo('#mentionElement');
+
+
+