× Form Help

Responsive calendar

  • NLC2016
  • NLC2016's Avatar Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 5
  • Thank you received: 0

NLC2016 created the topic: Responsive calendar

Hi!

I've made a textbox with a label in it which says something like "select date". When a visitor clicks in the textbox, the text gets masked and Joomla's default calendar shows up. I used this initiation script:

function ff_Afspraakdatum_init(element, condition)
{
switch (condition) {
case 'pageentry':
<?php JHTML::_('behavior.calendar'); ?>
Calendar.setup(
{
inputField : ff_getElementByName('Afspraakdatum').id, // ID of the input field
ifFormat : "%d-%m-%Y", // the date format
align : "Tl",
range : [2017,2017],
weekNumbers : true,
dateStatusFunc : function (date) { // disable Sundays (Sundays == 0) and 25.12 and 01.01.
return ((date.getDay() == 0 && (!(date.getDate() == 26 && date.getMonth() == 11)) && (!(date.getDate() == 02 && date.getMonth() == 0))) || (date.getDate() == 25 &&date.getMonth() == 11) || (date.getDate() == 1 && date.getMonth() == 0)) ? true : false;
}
}
);
break;
default:;
} // switch
} // ff_blalaber_init

Question:

When a user clicks, how can I show the responsive kalendar of Breezingforms instead of Joomla's default calendar?
#186558
  • Posts: 2638
  • Karma: 70
  • Thank you received: 210

Tihomir replied the topic: Responsive calendar

Hello there,

1) inspect your textfield element and search for an id, see img preview :





2) once you found an id of this element , go to your form > advanced > more option > form pieces > before form and copy the following code there :
echo '<script type="text/javascript">

 JQuery(document).ready(function () {
      jQuery("#elementID").pickadate()
        });

</script>'

You can do the same thing into the init script of your element, go to your textfield element > advanced > init script > and copy the following code there :
function ff_elementName_init(element, condition)
{
    switch (condition) {
        case 'formentry':
jQuery('#elementID').pickadate()
            break;
        default:;
    } // switch
} // ff_text_init

Just make sure to put correct name of your element instead of "elementName" and correct id instead of "elementID"

Pls, try to test some of codes above and let me know if it works for you.

Kind regards
Tihomir

Regards
Tihomir
==========================================
+++ Purchase Professional Support: crosstec.org/en/support/purchase-additional-support.html +++
#186612
Attachments:
  • NLC2016
  • NLC2016's Avatar Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 5
  • Thank you received: 0

NLC2016 replied the topic: Responsive calendar

I've tried the following without any succes:

function ff_Afspraakdatum_init(element, condition)
{
switch (condition) {
case 'formentry':
jQuery('ff_elem708').pickadate()
//Calendar.setup(
// {
// inputField : ff_getElementByName('Afspraakdatum').id, // ID of the input field
// ifFormat : "%d-%m-%Y", // the date format
// align : "Tl",
// range : [2017,2017],
// weekNumbers : true,
// dateStatusFunc : function (date) { // disable Sundays (Sundays == 0) and 25.12 and 01.01.
// return ((date.getDay() == 0 && (!(date.getDate() == 26 && date.getMonth() == 11)) && (!(date.getDate() == 02 && date.getMonth() == 0))) || (date.getDate() == 25 &&date.getMonth() == 11) || (date.getDate() == 1 && date.getMonth() == 0)) ? true : false;
// }
// }
// );
break;
default:;
} // switch
} // ff_text_init

What could be the problem or solution?
#186811
  • Posts: 2638
  • Karma: 70
  • Thank you received: 210

Tihomir replied the topic: Responsive calendar

Hi,

first of all, you have incorrectly defined an id without the hashtag "#" into the following part of the code jQuery('ff_elem708').pickadate()

Code should look like this one :
jQuery('#ff_elem708').pickadate()

Also, did you try to use code I have previously sent you? You just need to copy that code and try to test it by yourself.

Kind regards
Tihomir

Regards
Tihomir
==========================================
+++ Purchase Professional Support: crosstec.org/en/support/purchase-additional-support.html +++
#186836
  • NLC2016
  • NLC2016's Avatar Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 5
  • Thank you received: 0

NLC2016 replied the topic: Responsive calendar

I tried both options, without any succes :(
#187289
  • Posts: 2638
  • Karma: 70
  • Thank you received: 210

Tihomir replied the topic: Responsive calendar

Hi,

could you pls provide us your backend access ( Super user ) so we can do that for you.
You can send it to support@crosstec.org with the reference to the forum topic.

Kind regards
Tihomir

Regards
Tihomir
==========================================
+++ Purchase Professional Support: crosstec.org/en/support/purchase-additional-support.html +++
#187317
Moderators: ForumSupporttomeperica
Time to create page: 0.210 seconds

News and Updates

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

New extension AnalyticsAnywhere released!

Track website visitors no matter if ad blockers are enabled! Check it out!

Lifetime Subscription

Special Offer! Get lifetime access to all of our current and future products and 2 years of professional support -- 149 for only 90!

No support per domain or website installation limits! Includes all of our current and future Joomla!® extensions, WordPress® plugins, Joomla!® templates   this means, by purchasing a Lifetime 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 1-Year or Lifetime Subscription plans.

How to receive the discount:

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

Pro Support Renewal Plans

If you just need professional support and no further access to downloads or simply want or need to renew professional support, you may choose between various support plans from here.