Back to column formats
Column formattingSharePoint Online

Set Date to Today's Date (Date Only)

This sample a button to 'Mark Trip as Complete' (Date Field).

Set Date to Today's Date (Date Only) formatting preview
Sample preview · View original animation

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Column formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "txtContent": "[$DateTripCompleted.displayValue]",
      "attributes": {
        "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
      },
      "style": {
        "display": "=if(Number([$DateTripCompleted]) ==0,'none','flex')"
      }
    },
    {
      "elmType": "button",
      "customRowAction": {
        "action": "setValue",
        "actionInput": {
          "DateTripCompleted": "=getYear(@now)+'-'+padStart(toString(getMonth(@now)+1),2,'0')+'-'+padStart(toString(getDate(@now)),2,'0')"
        }
      },
      "attributes": {
        "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
      },
      "style": {
        "border": "none",
        "background-color": "transparent",
        "cursor": "pointer",
        "display": "=if(Number([$DateTripCompleted]) ==0,'flex','none')",
        "align-items": "center"
      },
      "children": [
        {
          "elmType": "span",
          "attributes": {
            "iconName": "EventAccepted"
          },
          "style": {
            "padding-right": "6px"
          }
        },
        {
          "elmType": "span",
          "txtContent": "Mark Trip as Complete"
        }
      ]
    }
  ]
}

From the contributor

How to use this sample

Summary

This sample a button to 'Mark Trip as Complete' (Date Field). This button uses the 'setValue' action to set a Date field value to Today's date by using the token @now and formatting it in a way that we exclude the time piece (a string in the format ‘yyyy-MM-dd’).

screenshot of the sample

View requirements

Type Internal Name Required Additional Information
Date Only DateTripCompleted Yes Apply date-button-setValue-today.json to this column

Sample

Solution Author(s)
date-button-setValue-today.json Michel Mendes

Version history

Version Date Comments
1.0 January 15, 2023 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.