You are here: Home / Calendar / How to Change the Datefield’s Calendar Start Day

How to Change the Datefield’s Calendar Start Day

By 2 Comments

Contents

Question

This question comes from a poster in the Formidable Slack Community:

How can I change the inline datepicker field to start on Saturday by default?

Solution

You cannot change the datepicker to start on a different day of the week by default through the Formidable build screen. However, Formidable uses the ubiquitous jQuery UI Datepicker Widget to drive its date field calendar. This jQuery widget has an extensive API that allows you to modify the functionality with your own custom jQuery. In this case, we're going to set the value for the firstDay option when the date field receives focus.

Demo Form

Here's a demo form:

Change Datefield Calendar Start Day Demo

To change the calendar start day, pick your desired start day from the radio button options, then click into the date field to see the result.

Choose Start Day

Custom jQuery

Here's the custom jQuery that makes the form work:

Valid firstDay Values

The valid values for the firstDay option are:

  • Sunday = 0
  • Monday = 1
  • Tuesday = 2
  • Wednesday = 3
  • Thursday = 4
  • Friday = 5
  • Saturday = 6

Sunday, or 0, is the default value.

Reader Interactions

Leave a Reply

Your email address will not be published. Required fields are marked *

Comments

    • The jQuery goes in the After Fields section on the form’s customize HTML page. The jQuery in this article works with the demo form. To use it for your form, you need to modify it so it’s using the correct date field. Make sure your datefield’s id is used as the selector in the on.(‘focus’).

      Here’s a link to the refactored code: Demo function refactored on pastebin

      Reply