Applying text to a calendar button

  •'s Avatar Topic Author
  • Offline
  • Senior Boarder
  • Senior Boarder
  • Posts: 52
  • Thank you received: 0 created the topic: Applying text to a calendar button

I have read the post Calendar Control button
I have managed to add text to a normal Submit button, but I am failing to add text to the button for the calendar. The JS breaks, and I can't use Next to get to the next page, which works fine without the fix from the post.
My calendar control is:
Name: calPaymentDate
Value: Expected Payment Date

The JS in Form->Advanced->Scripts->Initialisation Script is
inputField : "ff_elem5706_calendarButton",
ifFormat : "%d-%m-%Y",
button : "ff_elem5706_calendarButton",
align : "Bl",
singleClick : true
The HTML for the whole calendar div is:
<div class="input-append">
<input type="text" id="ff_elem5706" name="ff_nm_calPaymentDate[]" autocomplete="off" class="ff_elem bfCalendarInput" data-alt-value="Choose payment date" value="Choose payment date">
<button type="button" id="ff_elem5706_calendarButton" class="bfCalendar btn btn-secondary art-button" value="" data-inputfield="ff_elem5706" data-dayformat="%d/%m/%Y" data-button="ff_elem5706_calendarButton" data-firstday="6" data-weekend="0,6" data-today-btn="1" data-week-numbers="1" data-show-time="0" data-show-others="1" data-time-24="24" data-only-months-nav="0" data-min-year="" data-max-year="">
<span class="icon-calendar"></span>

If I edit text into the <span class="icon-calendar">Text here</span>, it shows up correctly, but that is only in Google Chrome Inspect.
What should the JS be in Initialisation Scripts, as this doesn't seem to work?

  • Posts: 3000
  • Karma: 104
  • Thank you received: 394

mihaela replied the topic: Applying text to a calendar button


Can you please explain a bit more the issue you are having.

Did you create a "Calendar" or "Responsive Calendar" element?

Also, in form's Advanced settings do you have "Bootstrap" set as the theme engine or "BreezingForms"?

Please send me a screenshot of your calendar element in the form.

If you wish to just change the text in the calendar element, the following setting should do the trick and no further coding is necessary:
Value: Expected Payment Date

I'm sending you a screenshot of the calendar element in Bootstrap with this setting.


Moderators: ForumSupporttomeperica
Time to create page: 0.180 seconds

New Icon Packs Category!

Crosstec is now offering icon packs.

If you are a paying subscriber, icon packs are automatically added to your account.

Check out our icon packs page!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Summer Sale!

50% discount on all of our extension subscription plans, templates and icon packs!

Get Your Subscription Here

News and Updates

Get informed about new downloads, updates and more in our News and Updates newsletter.

All Extensions Subscription

Get 1 year access to all of our current and future products and 1 year of professional support -- 99 for just 49! (Summer Sale)

No support per domain or website installation limits! Includes all of our current and future Joomla!® extensions, Joomla!® templates for the duration of your membership. This means, by purchasing an All Extensions Subscription you'll have it all covered!

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Community Reward

Help us to create new extensions and plugins! With only $5 you help us a lot and get unlimited download access to all of our products, professional support and even more. Get your reward now!

Read More Here