Calendar in WFB - Post ID 301692

User 2699991 Photo


Registered User
5,077 posts
Online Now

Eric Rohloff wrote:
JQuery can set it for you.
Adjust the #item1_date_1 to the id of your datepicker in Form Builder
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script> <script>// ver 1
var jQ = $.noConflict(true);
jQ(function () {
jQ("#item1_date_1").attr("id","Date_Picker");
jQ("#Date_Picker").datepicker({
dateFormat: "yy-mm-dd",
minDate: new Date('2026-01-02')



});
});</script>


Thanks Eric

I just seen your reply (for some reason CC no longer seens to show me new posts notifications, all i need now is to find out where the ID is ???? that I add the script to
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 2699991 Photo


Registered User
5,077 posts
Online Now

Wayan Jaya wrote:
Eric Rohloff wrote:
JQuery can set it for you.
Adjust the #item1_date_1 to the id of your datepicker in Form Builder
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script> <script>// ver 1
var jQ = $.noConflict(true);
jQ(function () {
jQ("#item1_date_1").attr("id","Date_Picker");
jQ("#Date_Picker").datepicker({
dateFormat: "yy-mm-dd",
minDate: new Date('2026-01-02')



});
});</script>


Thanks Eric

I just seen your reply (for some reason CC no longer seens to show me new posts notifications, all i need now is to find out where the ID is ???? that I add the script to


can't for the life of me fid the ID
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 187934 Photo


Senior Advisor
20,239 posts

Should be in the input for the datepicker. It should be similar in name to what I have in my example.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2699991 Photo


Registered User
5,077 posts
Online Now

Eric Rohloff wrote:
Should be in the input for the datepicker. It should be similar in name to what I have in my example.


??????
Attachments:
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 2868102 Photo


Registered User
18 posts

Doesn't look like the WFB software gives you the option to provide your own id (or even view the id they assign). However, when you preview the form in your browser and right click the date / calendar field and choose inspect, you can see the id the software assigns to the date input field.

On the sample form I created, WFB assigned the following: id="item25_text_1"
Attachments:
User 379556 Photo


Registered User
1,558 posts

Eric's code does exactly what he said, i.e. it uses JQuery to set the minimum date.

Perhaps I've not implemented it correctly*, because, although Eric's code works for me to set that minimum date, the outcome seems the same as setting the minimum date in WFB. In other words it has the same effect as the first paragraph in my first post in this thread, but still has the strange matter of the tooltip persistence, which was the reason Wayan wanted an alternative method.

* I put Eric's code in the 'Magical' HTML element, and checked the ID as mentioned by Mark.

I'm wondering whether there is a way of disabling that tooltip.

Frank
User 2868102 Photo


Registered User
18 posts

Eric's code works for me, at least when building this in Site designer:
https://rudesyledba.coffeecup.com/index.html

2026 May is displayed as the default.

Attachments:
User 187934 Photo


Senior Advisor
20,239 posts

Wayan Jaya wrote:
Eric Rohloff wrote:
Should be in the input for the datepicker. It should be similar in name to what I have in my example.


??????

Look at the source code html.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 379556 Photo


Registered User
1,558 posts

Frank Cook wrote:
It will of course do this if in Properties > Allow Dates one enters 05/01/2026 in the first box. That would be of use only if one didn't want to allow the choice of any date earlier than that....

As mentioned in subsequent posts in this thread, this does what Wayan requested, but was spoiled by the persistent tooltips that one gets on revisiting the date box in the form - even days later.

I may have found a simple solution to the tooltip matter: just setting the field as a required field seems to remove the tooltips altogether. I've tested this only in the WFB Preview. Perhaps someone who uses forms will be able to advise whether or not this solves the problem when a form is incorporated in a website.

Frank
User 379556 Photo


Registered User
1,558 posts

Frank Cook wrote:
... I may have found a simple solution to the tooltip matter: just setting the field as a required field seems to remove the tooltips altogether ...


Aaargh - further testing shows that the tooltips come back if one uses the Submit button.

Frank

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.