adding setTimezone

learn/how-tos/implementing-localization-dropdown-menu.md

@@ -54,9 +54,12 @@ Here, we have parameterized the _mylabel_ values as KEY_1, KEY_2, KEY_3, KEY_4,
     - From Properties panel, under the Dataset section, using the chain icon next to the Value property bind the widget to the Modal Variable (menudata) created in the above steps.
     - Under the Actions section set:
         - the Action Label to the following value: _App.appLocale[mylabel],_ (you have to use the Use Expression option from the Bind Dialog)
+          ![actions_label.png](/learn/assets/actions_label.png)
+        ![dropdown_label_binding.png](/learn/assets/dropdown_label_binding.png)
         - the Action Icon to icon, and
         - the Action link to link.
-5. Open the I18N dialog from the Project Configurations of the [Project Workspace](/learn/app-development/wavemaker-overview/product-walkthrough/#project-workspace) ([more on localization](/learn/app-development/widgets/form-widgets/select-locale-usage/)). [![](/learn/assets/loc_create.png)](/learn/assets/loc_create.png)
+5. Open the I18N dialog from the Project Configurations of the [Project Workspace](/learn/app-development/wavemaker-overview/product-walkthrough/#project-workspace) ([more on localization](/learn/app-development/widgets/form-widgets/select-locale-usage/)).
+ [![](/learn/assets/loc_create.png)](/learn/assets/loc_create.png)
     1. Use **Manage Languages** to add languages to your app. By default, English is already added.
 
     [![](/learn/assets/loc_new_locale.png)](/learn/assets/loc_new_locale.png)

learn/how-tos/settimezone-function.md

@@ -0,0 +1,64 @@
+---
+title: "Setting Time Zone for Datetime widget "
+id: "settimezone-method"
+---
+
+The setTimezone method allows precise adjustment of time to specific time zones, ensuring accuracy and consistency in date and time displays.
+
+## Using setTimezone for Datetime widget
+
+1. Drag and drop a Datetime widget. [learn more about Datetime](/learn/app-development/widgets/form-widgets/date-time-datetime/#datetime-properties)
+     ![datetime_widget.png](/learn/assets/datetime_widget.png)
+
+2. From the properties panel, set default date to **CURRENT_DATE**:
+
+  ![current_date_default_value.png](/learn/assets/current_date_default_value.png)
+3. From Datetime widget events tab, set **On Before Load** event to JavaScript.
+
+   ![js_event.png](/learn/assets/js_event.png)
+4. After redirecting to the script, add the below code to set Timezone of the datetime widget to the specified timezone.
+   ``` Javascript
+    Page.datetime1Beforeload = function($event, widget) {
+          Page.Widgets.datetime2.setTimezone({
+                 'timezone': 'Pacific/Kiritimati'
+                });
+  };
+
+   ```
+  ![script_screenshot.png](/learn/assets/script_screenshot.png)
+
+   ## For Application Level
+   In App.js write the below script. Using this script, the specified timezone will be used across all time-related widgets within the application.
+
+
+   ``` Javascript
+     App.onPageReady = function(activePageName, activePageScope, $activePageEl) {
+        App.setTimezone({
+        'timezone': 'Pacific/Kiritimati'
+          });
+}
+   ```   
+
+  ![app_js_script.png](/learn/assets/app_js_script.png)
+
+
+
+
+
+
+
+
+![timedifference.png](/learn/assets/timedifference.png)
+
+
+
+:::note
+
+The procedure is same for Date and Time widget.
+:::
+
+:::note
+
+For Date widget the implementation will work from 11.4.2 version.
+
+:::

learn/how-tos/settimezone-method.md

@@ -0,0 +1,64 @@
+---
+title: "Setting Time Zone for Datetime widget "
+id: "settimezone-method"
+---
+
+The setTimezone method allows precise adjustment of time to specific time zones, ensuring accuracy and consistency in date and time displays.
+
+## Using setTimezone for Datetime widget
+
+1. Drag and drop a Datetime widget. [learn more about Datetime](/learn/app-development/widgets/form-widgets/date-time-datetime/#datetime-properties)
+     ![datetime_widget.png](/learn/assets/datetime_widget.png)
+
+2. From the properties panel, set default date to **CURRENT_DATE**:
+
+  ![current_date_default_value.png](/learn/assets/current_date_default_value.png)
+3. From Datetime widget events tab, set **On Before Load** event to JavaScript.
+
+   ![js_event.png](/learn/assets/js_event.png)
+4. After redirecting to the script, add the below code to set Timezone of the datetime widget to the specified timezone.
+   ``` Javascript
+    Page.datetime1Beforeload = function($event, widget) {
+          Page.Widgets.datetime2.setTimezone({
+                 'timezone': 'Pacific/Kiritimati'
+                });
+  };
+
+   ```
+  ![script_screenshot.png](/learn/assets/script_screenshot.png)
+
+## For Application Level
+   In App.js write the below script. Using this script, the specified timezone will be used across all time-related widgets within the application.
+
+
+   ``` Javascript
+     App.onPageReady = function(activePageName, activePageScope, $activePageEl) {
+        App.setTimezone({
+        'timezone': 'Pacific/Kiritimati'
+          });
+}
+   ```   
+
+  ![app_js_script.png](/learn/assets/app_js_script.png)
+
+
+
+
+
+
+
+
+![timedifference.png](/learn/assets/timedifference.png)
+
+
+
+:::note
+
+The procedure is same for Date and Time widget.
+:::
+
+:::note
+
+For Date widget the implementation will work from 11.4.2 version.
+
+:::

website/sidebars.json

@@ -1278,14 +1278,23 @@
 				},
 				"app-development/widgets/form-widgets/toggle",
 				"app-development/widgets/form-widgets/switch",
-				"app-development/widgets/form-widgets/date-time-datetime",
+				{
+					"type": "category",
+					"label": "Date, Time and Datetime",
+					"items": [
+						"app-development/widgets/form-widgets/date-time-datetime",
+						"how-tos/settimezone-method"
+					]
+				},
+
 				{
 					"type": "category",
 					"label": "Calendar",
 					"items": [
 						"app-development/widgets/form-widgets/calendar",
 						"how-tos/how-tos-calendar",
 						"how-tos/calendar-usage-create-event",
+
 						"how-tos/calender-usage-google-calendar-integration"
 					]
 				},