Updated screenshots in Date and Date Time article

16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/date-time.md

@@ -10,15 +10,15 @@ Displays a calendar UI for selecting dates which are saved as a DateTime value.
 
 ## Data Type Definition Example
 
-![Data Type Definiton](images/date-time.png)
+![Data Type Definiton](images/Date-time-picker-v16.png)
 
 There is one setting available for manipulating the DateTime property.
 
 The setting involves defining the format. The default date format in the Umbraco backoffice is `YYYY-MM-DD HH:mm:ss`, but you can change it to a different format. See [MomentJS.com](https://momentjs.com/) for the supported formats.
 
 ## Content Example
 
-![Content Example](../built-in-property-editors/images/date-picker-v8.png)
+![Content Example](images/Date-picker-with-content-v16.png)
 
 ## MVC View Example - displays a datetime
 

16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/date.md

@@ -10,30 +10,71 @@ Displays a calendar UI for selecting dates which are saved as a DateTime value.
 
 ## Data Type Definition Example
 
-![Data Type Definition Example](../built-in-property-editors/images/DateTime-DataType.png)
+![Data Type Definition Example](images/date-time-v16.png)
 
 The only setting that is available for manipulating the Date property is to set a format. By default the format of the date in the Umbraco backoffice will be `YYYY-MM-DD`, but you can change this to something else. See [MomentJS.com](https://momentjs.com/) for the supported formats.
 
 ## Content Example
 
-![Content Example](../built-in-property-editors/images/Date-Time-Content.png)
+![Content Example](images/date-time-content-v16.png)
 
 ## MVC View Example - displays a datetime
 
-### Typed
+### With Models Builder
 
 ```csharp
-@(Model.Content.GetPropertyValue<DateTime>("datePicker").ToString("dd MM yyyy"))
+@Model.Date
 ```
 
-### Dynamic (Obsolete)
+### Without Models Builder
 
-{% hint style="warning" %}
-See [Common pitfalls](../../../../reference/common-pitfalls.md) for more information about why the dynamic approach is obsolete.
+```csharp
+@Model.Value("date")
+```
+
+## Add values programmatically
+
+See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the [Content Service](https://apidocs.umbraco.com/v15/csharp/api/Umbraco.Cms.Core.Services.ContentService.html).
+
+{% hint style="info" %}
+The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.
 {% endhint %}
 
 ```csharp
+@using Umbraco.Cms.Core.Services
+@inject IContentService ContentService
 @{
-    @CurrentPage.datePicker.ToString("dd-MM-yyyy")
+    // Create a variable for the GUID of the page you want to update
+    var guid = Guid.Parse("ca4249ed-2b23-4337-b522-63cabe5587d1");
+
+    // Get the page using the GUID you've defined
+    var content = ContentService.GetById(guid); // ID of your page
+
+    // Set the value of the property with alias 'date'
+    content.SetValue("date", DateTime.Now);
+
+    // Save the change
+    ContentService.Save(content);
+}
+```
+
+Although the use of a GUID is preferable, you can also use the numeric ID to get the page:
+
+```csharp
+@{
+    // Get the page using it's id
+    var content = ContentService.GetById(1234); 
+}
+```
+
+If Models Builder is enabled you can get the alias of the desired property without using a magic string:
+
+```csharp
+@using Umbraco.Cms.Core.PublishedCache
+@inject IPublishedContentTypeCache PublishedContentTypeCache
+@{
+
+    // Set the value of the property with alias 'date'
+    content.SetValue(Home.GetModelPropertyType(PublishedContentTypeCache, x => x.Date).Alias, DateTime.Now);
 }
 ```

17/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/date-time.md

@@ -14,15 +14,15 @@ New [Date Time property editors](date-time-editor/) are available. They offer mo
 
 ## Data Type Definition Example
 
-![Data Type Definiton](../../../../.gitbook/assets/date-time.png)
+![Data Type Definiton](../../../../.gitbook/assets/Date-time-picker-v16.png)
 
 There is one setting available for manipulating the DateTime property.
 
 The setting involves defining the format. The default date format in the Umbraco backoffice is `YYYY-MM-DD HH:mm:ss`, but you can change it to a different format. See [MomentJS.com](https://momentjs.com/) for the supported formats.
 
 ## Content Example
 
-![Content Example](../../../../.gitbook/assets/date-picker-v8.png)
+![Content Example](../../../../.gitbook/assets/Date-picker-with-content-v16.png)
 
 ## MVC View Example - displays a datetime