Display Current XYZ

Display the current year, month, weekday, quarter or date anywhere on your page
Step 1
Copy the <script> and paste into the <head> code section
<script defer src="https://cdn.jsdelivr.net/gh/inputflow-tools/display-current-xyz-dist@1/i.js" type="module"></script>
Copy Script
Step 2
Add attributes to elements where you want to display current data
Below is a list of attributes and elements, that are used to implement this tool's functionality.
Time
I want this element to display the current time
Attribute name
=
Attribute value

Add this attribute to all text elements, where you want to display the current time

12-hour format
I want the time to be in 12-hour format (am/pm)
Attribute name
=
Attribute value

Add this attribute to all elements with the ift-current="time" attribute, that should display the current time in 12-hour format. For example 10:23 pm instead of 22:23.

Year
I want this element to display the current year
Attribute name
=
Attribute value

Add this attribute to all text elements, where you want to display the current year.

Month
I want this element to display the current month
Attribute name
=
Attribute value

Add this attribute to all text elements, where you want to display the current month. The month names are automatically translated to the language of your website.

Month number
I want this element to display the current month number
Attribute name
=
Attribute value

Add this attribute to all text elements, where you want to display the current month number. January = 1, February = 2, March = 3, etc.

Weekday
I want this element to display the current weekday
Attribute name
=
Attribute value

Add this attribute to all text elements, where you want to display the current weekday. The weekdays are automatically translated to the language of your website.

Weekday number
I want this element to display the current weekday number
Attribute name
=
Attribute value

Add this attribute to all text elements, where you want to display the current weekday number. Monday = 1, Tuesday = 2, Wednesday = 3, etc.

Quarter
I want this element to display the current quarter of the year
Attribute name
=
Attribute value

Add this attribute to all text elements, where you want to display the current quarter of the year (1-4).

Hour
I want this element to display the current hour of the day
Attribute name
=
Attribute value

Add this attribute to all text elements, where you want to display the current hour (0-23).

Minute
I want this element to display the current minute
Attribute name
=
Attribute value

Add this attribute to all text elements where you want to display the current minute (0-59). The value displayed will not update after the page has initially loaded. For instance, if the page is opened at 10:55, the minute displayed will be 55 and will not change until the page is either refreshed or navigation to another page occurs.

Second
I want this element to display the current second
Attribute name
=
Attribute value

Add this attribute to all text elements where you want to display the current second (0-59). The value displayed will not update after the page has initially loaded. For instance, if the page is opened at 10:55:22, the second displayed will be 22 and will not change until the page is either refreshed or navigation to another page occurs.

Days until date
I want to display how many days there are left until a specific date
Attribute name
=
Attribute value

Add this attribute to all text elements where you want to display how many days there are left until a specified target date.

Target date
I want this to be my target date
Attribute name
=
Attribute value

Add this attribute to all elements with the ift-current="days-until-date" attribute. For example, if you set '2099-05-23' as the attribute value, the element will display how many days there are until the 23rd of May, 2099.

CMS support: You can pull the value of the target date from the CMS. This could be useful if you have an 'Events' collection and want to display how many days there are left until a certain event. Just make sure to select the correct format (YYYY-MM-DD).

Day of month
I want this element to display the current day of the month
Attribute name
=
Attribute value

Add this attribute to all text elements where you want to display the current day of the month (1-31).

Day of year
I want this element to display the current day of the year
Attribute name
=
Attribute value

Add this attribute to all text elements where you want to display the current day of the year (1-366).

Days left in month
I want to display how many days are left in the current month
Attribute name
=
Attribute value

Add this attribute to all text elements where you want to display how many days are left in the current month.

Days left in year
I want to display how many days are left in the current year
Attribute name
=
Attribute value

Add this attribute to all text elements where you want to display how many days are left in the current year.

Percentage of year passed
I want to display what % of the year has already passed
Attribute name
=
Attribute value

Add this attribute to all text elements where you want to display what percentage of the year has already passed.

Percentage of year left
I want to display the % of the year that is still left
Attribute name
=
Attribute value

Add this attribute to all text elements where you want to display what percentage of the year is still left.

Browser timezone
I want to display the current timezone of the website visitor
Attribute name
=
Attribute value

Add this attribute to all text elements where you want to display the current browser timezone of the website visitor.

IANA format
I want to display the timezone in IANA format.
Attribute name
=
Attribute value

Add this attribute to all elements with the ift-current="timezone" attribute, that should display the current website visitor's timezone in IANA (Internet Assigned Numbers Authority) format. For example: Europe/Zurich instead of Central European Time

Step 2
Add attributes to elements that should be visible only during specific times
Below is a list of attributes and elements, that are used to implement this tool's functionality.
Visible Hours
I want this element to be visible only during specific hours
Attribute name
=
Attribute value

Add this attribute to all elements, which should be visible only during specified hours.

12-hour format
I want to specify the time range in 12-hour format (am/pm)
No additional attribute required

If you want to specify the time range in 12-hour format (e.g 09:00am - 02:30pm instead of 09:00 - 14:30), no additional configuration is required. The tool automatically detects the utilized format (12-hour or 24-hour).

Multiple time ranges
I want to specify multiple time ranges
No additional attribute required

If you want to specify multiple visibility time ranges, you can separate them with a comma:

ift-visible-hours="09:00-10:30, 15:00-17:10"

Overnight range
I want to specify an overnight range
No additional attribute required

If you want to specify an overnight range, no additional configuration is required:

ift-visible-hours="07:00pm - 05:15am"

Visible Weekdays
I want this element to be visible only on specific weekdays
Attribute name
=
Attribute value

Add this attribute to all elements, which should be visible only on specified days of the week.

Single day
I only want to show the element on a single weekday
No additional attribute required

If you want to show an element on a single weekday, you can just write the weekday instead of a range:

ift-visible-weekdays="Monday"

Multiple weekday ranges
I want to specify multiple weekday ranges
No additional attribute required

If you want to specify multiple visibility ranges, you can separate them with a comma:

ift-visible-weekdays="Monday, Thursday - Sunday"

Cross-week
I want to specify a cross-week range
No additional attribute required

If you want to specify a cross-week range, no additional configuration is required:

ift-visible-weekdays="Saturday - Tuesday"

Short version
I want to specify the weekdays using their abbreviation
No additional attribute required

If you want to specify weekdays using their abbreviation or numbers, no additional configuration is required:

ift-visible-weekdays="Tue, Fri-Sun"
ift-visible-weekdays="2, 5-7"

Visible Months
I want this element to be visible only during specific months
Attribute name
=
Attribute value

Add this attribute to all elements, which should be visible only during specified months.

Single month
I only want to show the element during a single month
No additional attribute required

If you want to show an element during a single month, you can just write the month instead of a range:

ift-visible-months="August"

Multiple month ranges
I want to specify multiple month ranges
No additional attribute required

If you want to specify multiple visibility ranges, you can separate them with a comma:

ift-visible-months="January - April, June - September, November"

Cross-year
I want to specify a cross-year range
No additional attribute required

If you want to specify a cross-year range, no additional configuration is required:

ift-visible-months="November - April"

Short version
I want to specify the months using their abbreviation
No additional attribute required

If you want to specify months using their abbreviation or numbers, no additional configuration is required:

ift-visible-months="jan-apr, jun-sep, nov"
ift-visible-months="1-4, 6-9, 11"

Visible Monthdays
I want this element to be visible only on specific days of the month
Attribute name
=
Attribute value

Add this attribute to all elements, which should be visible only on specified days of the month.

Single day
I only want to show the element on a single day
No additional attribute required

If you want to show an element on a single day, you can just write the day instead of a range:

ift-visible-monthdays="31"

Multiple ranges
I want to specify multiple day ranges
No additional attribute required

If you want to specify multiple visibility ranges, you can separate them with a comma:

ift-visible-monthdays="1-10, 20-31"

Cross-month
I want to specify a cross-month range
No additional attribute required

If you want to specify a cross-month range, no additional configuration is required:

ift-visible-monthdays="25-7"

Visible Dates
I want this element to be visible only on specific dates
Attribute name
=
Attribute value

Add this attribute to all elements, which should be visible only on specified dates. The dates must be in the format MM/DD.

Single date
I only want to show the element on a single date
No additional attribute required

If you want to show an element on a single date, you can just write the date instead of a range:

ift-visible-dates="02/14"

Multiple date ranges
I want to specify multiple date ranges
No additional attribute required

If you want to specify multiple visibility ranges, you can separate them with a comma:

ift-visible-dates="01/01 - 02/24, 01/08 - 09/30"

Cross-year
I want to specify a cross-year range
No additional attribute required

If you want to specify a cross-year range, no additional configuration is required:

ift-visible-dates="12/20 - 01/07"

Combine attributes
I want to combine multiple visibility attributes
No additional attribute required

If you want to combine multiple visibility attributes, then the element is only shown if ALL visibility attributes are matching.

Example:
You have an element with two visibility attributes: ift-visible-weekdays="Monday-Friday" and ift-visible-hours="09:00am - 05:00pm". In this case, the element would only show from Monday to Friday between 9 AM and 5 PM, but not on Saturday and Sunday between 9 AM and 5 PM.

Display property
I want to change the display property
Attribute name
=
Attribute value

This attribute is optional

Add this attribute to an element which has another timed-visibility attribute applied to it.

If an element is hidden by default, and based on your time-visibility attributes the element should be visible, then by default the display value will be set to "block". If you want to change that display value (e.g. flex, inline-block, grid, etc.) then you can use this attribute.

Important: This attribute is not necessary, if your element is visible by default.

Set Timezone
I want to set a specific timezone for an element / multiple elements
Attribute name
=
Attribute value

This attribute is optional

By default, this tool uses the timezone of the website visitor's browser. This means that two people viewing the website from different timezones might see different elements based on time-based visibility.

If you want the time-based visibility not to be based on the website visitor's browser timezone, but rather on a specified timezone, you can specify this setting. The timezone must be in the IANA format AREA/LOCATION.

Your browser's current IANA timezone is area/location. Check the following list for available timezones: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones

Important: You can apply this attribute to a specific element that already has other time-visibility attributes, or you can apply it to a parent/wrapper element. Doing so will affect all time-based visibility elements within it. Therefore, if you want the timezone to apply to all time-based visibility elements on the page, simply add it to the Body element.

1

Copy and paste script

Copy the script above, and paste it into the before <head> tag code section of the page where you want to use the functionality.

2

Add attributes to elements

Add attributes to elements according to the current data you want to display. Above is a list of attributes you can add.

3

Test on the live site

Since this is a Javascript solution, the functionality will only be visible on the live site, not inside the Webflow Designer.

Frequently asked tool questions

Do I have to be an Inputflow customer to use the free tools?

No, you don't have to be a user of the Inputflow Webflow App to use our free tools. You can use them independently of Inputflow or in combination with it.

What is Inputflow, and what are the tools about?

Inputflow is a Webflow App to build multi-step forms with full design control. You can style & build your multi-step form in the Webflow Designer. Exactly how you want. Then connect your steps, add custom error messages and calculations.

Click here to install the App inside your Webflow account

In addition to the Inputflow App, we created a couple of free tools for the Webflow community to build better forms and websites. You can use these tools for your own projects and client projects for free, without signup.

Can I use the tools on client sites?

Yes, you can use it on your client projects or your own projects.

Do I have to be an Inputflow customer to use the free tools?

No, you don't have to be a user of the Inputflow Webflow App to use our free tools. You can use them independently of Inputflow or in combination with it.

What is Inputflow, and what are the tools about?

Inputflow is a Webflow App to build multi-step forms with full design control. You can style & build your multi-step form in the Webflow Designer. Exactly how you want. Then connect your steps, add custom error messages and calculations.

Click here to install the App inside your Webflow account

In addition to the Inputflow App, we created a couple of free tools for the Webflow community to build better forms and websites. You can use these tools for your own projects and client projects for free, without signup.

Can I use the tools on client sites?

Yes, you can use it on your client projects or your own projects.

Start building your own multi-step form

By clicking the button down below, you install the Inputflow App in Webflow, and can create a beautiful multi-step form with full design control!
Install Webflow App

More free tools