Skip to main content

Quick Tip - Scriban Date Formatting in Sitecore

 With the Scriban syntax being new to the Sitecore platform with v9.3 there is definitely a learning curve but well worth the time investment.  So we will post short tips on things that we struggled with.  This is to share but also I will have a place to find it again when I need it.

So you've created a date field in your Sitecore template and now need to format it for display purposes.  Or even better, you have styling differences depending on if the dates and years match for start and end points.  Let's show this below.


First, get the date(s) in your Scriban template from the item.  In this scenario I was looping through child objects called i_child.  Using the Scriban date.parse function I can get the date value from the Sitecore field by this:

    {{
        this.startDate = sc_field i_child 'Event Start' | date.parse;
        this.endDate = sc_field i_child 'Event End' | date.parse;
    }}

Now that we have the date values you can do things to check against the dates.  If the start date and end date are not equal then display them both.  If the start year and end year do not match then show both years.  See the code below to show the three different display modes.

    {{ if ( this.startDate.date != this.endDate.date ) }}
        {{ if ( this.startDate.date.year != this.endDate.date.year ) }}
            {{ this.startDate | date.to_string '%b %d, %Y' }} - {{ this.endDate | date.to_string '%b %d, %Y' }}
        {{ else }}
            {{ this.startDate | date.to_string '%b %d' }} - {{ this.endDate | date.to_string '%b %d, %Y' }}
        {{ end }}
    {{ else }}
        {{ this.startDate | date.to_string '%b %d, %Y' }}
    {{ end }}

Refer to the Scriban date formatting details here for further details.  But this allows you get a date field from Sitecore and display the date format as you choose.

Until next time.

Labels:

Comments

Post a Comment

Popular posts from this blog

Sitecore Scriban Templates – Custom Functions to the Recue

 So you jumped in head first into Scriban Templates with Sitecore.  And now you hit a wall because it doesn't do that one thing you could easily have completed in MVC forms with a controller.  Well, this is where you can build your own custom functions to work within Scriban templates.  Sitecore already provides a few of these at  https://doc.sitecore.com/developers/sxa/93/sitecore-experience-accelerator/en/the-embedded-functions-for-the-scriban-template.html . So How Do You Build Your Own? Well let's begin by discussing what we want to build.  In our project we have a need to get the nearest parent of a certain template type.  This way we can determine if the page you are viewing is part of a conference section or not.   So first, let's build the C# code that will execute when we call the function.  We decided to add a new member to the i_item to determine if we were in a conference context and allow us to call other properties as we would need. public class GetConferenceC
Post a Comment
Read more

Sitecore 9.3 – Scriban Templates – Yes Please!

 This feature sold us on our migration to Sitecore v9.3 and using SXA.  Why was it so important in our decision?  Based purely on speed to implement.  Let's explain, but first what is Scriban? What is a Scriban Template in Sitecore? Scriban is a fast, powerful, safe and lightweight scripting language and engine for .NET, which was primarily developed for text templating with a compatibility mode for parsing liquid templates. And Sitecore SXA has has adopted this new templating system whole-heartedly.  It allows a lot of your custom HTML and MVC controls to brought into the content tree.  Why is this important?  Because now you don't have to create a custom controller and CSHTML to create a rendering.  You can create and use a Scriban template. For more information refer to the documentation found at  https://doc.sitecore.com/developers/sxa/93/sitecore-experience-accelerator/en/scriban-templates.html .  You can also find more documentation on the Scriban template itself at  htt
Post a Comment
Read more