+
+
+
\ No newline at end of file
diff --git a/ej2-javascript/datepicker/date-format.md b/ej2-javascript/datepicker/date-format.md
index bb19dc971..0f1f8cddd 100644
--- a/ej2-javascript/datepicker/date-format.md
+++ b/ej2-javascript/datepicker/date-format.md
@@ -47,3 +47,40 @@ The following example demonstrates the DatePicker with the custom format (`yyyy-
{% previewsample "page.domainurl/code-snippet/datepicker/getting-started-cs2" %}
{% endif %}
+
+## Input formats
+
+Input format allows users to enter dates in various formats in the DatePicker control, providing flexibility in date entry.
+
+The string format of the date value specifies how the date should be represented as a string when entered by the user. When the user types the date in the input format, it will be automatically converted to the display format after pressing enter, tab key, or when the input loses focus. This enhances the user experience by allowing intuitive data entry through various custom input formats. By default, the DatePicker's format is based on the culture. You can also set the own custom format by using the [`format`](../api/datepicker/#format) property.
+
+To know more about the date format standards, refer to the [Internationalization Date Format](https://ej2.syncfusion.com/documentation/common/internationalization) section.
+
+The following example demonstrates the DatePicker with multiple input formats.
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/datepicker/getting-started-cs15/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/datepicker/getting-started-cs15/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/datepicker/getting-started-cs15" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/datepicker/getting-started-cs15/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/datepicker/getting-started-cs15/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/datepicker/getting-started-cs15" %}
+{% endif %}
diff --git a/ej2-javascript/datetimepicker/date-time-format.md b/ej2-javascript/datetimepicker/date-time-format.md
index af951cc3c..137f3cd9e 100644
--- a/ej2-javascript/datetimepicker/date-time-format.md
+++ b/ej2-javascript/datetimepicker/date-time-format.md
@@ -46,4 +46,41 @@ The following example demonstrates the DateTimePicker with the custom format (`y
{% endtabs %}
{% previewsample "page.domainurl/code-snippet/datetimepicker/getting-started-cs3" %}
-{% endif %}
\ No newline at end of file
+{% endif %}
+
+## Input formats
+
+Input format allows users to enter dates in various formats in the DateTimePicker control, providing flexibility in date entry.
+
+The string format of the date and time value specifies how the date and time should be represented as a string when entered by the user. When the user types the date and time in the input format, it will be automatically converted to the display format after pressing enter, tab key, or when the input loses focus. This enhances the user experience by allowing intuitive data entry through various custom input formats. You can also set the own custom format by using the [`format`](../api/datetimepicker#format) property.
+
+To know more about the date format standards, refer to the [Internationalization Date Time Format](http://ej2.syncfusion.com/documentation/base/internationalization/) section.
+
+The following example demonstrates the DateTimePicker with multiple input formats.
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/datetimepicker/getting-started-cs13/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/datetimepicker/getting-started-cs13/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/datetimepicker/getting-started-cs13" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/datetimepicker/getting-started-cs13/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/datetimepicker/getting-started-cs13/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/datetimepicker/getting-started-cs13" %}
+{% endif %}
diff --git a/ej2-javascript/mention/customization.md b/ej2-javascript/mention/customization.md
index aa317daa5..46cab4ff8 100644
--- a/ej2-javascript/mention/customization.md
+++ b/ej2-javascript/mention/customization.md
@@ -111,3 +111,38 @@ By default, the popup list width value is set as `auto`. Depending on the mentio
You can customize the trigger character by using the [mentionChar](../api/mention/#mentionchar) property in the Mention control. The trigger character triggers the suggestion list to display in the target area.
By default, the [mentionChar](../api/mention/#mentionchar) is `@`.
+
+## Leading Space Requirement
+
+The [requireLeadingSpace](../api/mention/#mentionchar) property in Mention controls whether a space is needed before triggering the Mention suggestion popup.
+
+When set to `false`, the mention can be activated without a preceding space. When set to `true` (default), a space is required before the mention character to activate suggestions.
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/mention/getting-started-cs13/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/mention/getting-started-cs13/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/mention/getting-started-cs13" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/mention/getting-started-cs13/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/mention/getting-started-cs13/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/mention/getting-started-cs13" %}
+{% endif %}
+
+
\ No newline at end of file
diff --git a/ej2-javascript/mention/images/required_leading_space.gif b/ej2-javascript/mention/images/required_leading_space.gif
new file mode 100644
index 000000000..99faa1246
Binary files /dev/null and b/ej2-javascript/mention/images/required_leading_space.gif differ