Alternative to the date_time "Advanced Dates" for "Choose Date"?

[hominid4]

Sorry, I know this has been discussed before, and do realize jDate most likely will never have an "Advanced Dates" type of feature, but wanted to see if anyone had an alternative solution that you've been using. For a date element that we use it for anyways; which is a "Choose Date" element.

Most of our web apps include Start Date and End Date elements that are determined at the time a user registers. Then users submit data, and when doing so they have to choose a date that falls with their specific Start/End Dates range per submission. The "choose date" is where we use the date_time's Allowed Dates to achieve the range allowance to pick from based on their Start/End Dates.

We're about to start a new series of long term web apps, latest versions of Joomla and Fabrik installs, and I'd love to start out with the jDate instead of the old date_time for our "Choose Date" element, but have to have the allowed dates feature.

Is anyone creating an alternative solution to the old date_time Advanced Dates for a "choose date" element? Maybe with a customized jDate element per project; or maybe a custom PHP or/and Javascript solution? I'm up for any customization if needed.

Thanks!

 

[juuser]

Hi,

I've used this code in form_X.js. Not the ideal solutions, but worked great for me. You can change the fixed first and last dates in the code with your date elements. And of course change the form number and element names to match yours.

requirejs(['fab/fabrik'], function() {

            jQuery("body").delegate("td.day", "click", function () {
                var myfirstdate = "2020-09-22";
                var mysecondate = "2020-09-27";
           
                var form = Fabrik.getBlock('form_1');
                var elname = 'mytable__dateelement';
               
                var elval = form.formElements.get(elname).getValue();
                var date = new Date(elval);
                var mydateString = new Date(date.getTime() - (date.getTimezoneOffset() * 60000 ))
                    .toISOString()
                    .split("T")[0];
               
                if (mydateString < myfirstdate || mydateString > mysecondate) {
                  jQuery("#mytable__dateelement_cal").val("");       
                  alert("Only dates between "+myfirstdate+" and "+mysecondate+" are allowed!");                 
                }
            });
   
})

 

[hominid4]

Awesome, thanks a bunch! And for the code example! That really helps. I'll give it a whirl, but with a quick glance that should work as needed in our case in conjunction with a couple queries to pull the start and end dates per user. Thanks again!

 

[hominid4]

Hi, thanks again for the push in the right direction. I'm not having luck however targeting "td.day" with the onclick event, its as if the click is totally ignored; no alert, no errors, etc.

If for example I do a very simple test with the below, nothing happens and no errors show in the console.

jQuery(function($) {
  $("body").delegate("td.day", "click", function() {
    alert("Test!");
  });
});

If however I do the below test, and click on any "td" within the page, such as click on one of the days of week column titles within the calendar popup, it shows the alert, but does not show an alert when clicking on any of the days of the calendar:

jQuery(function($) {
  $("body").delegate("td", "click", function() {
    alert("Test!");
  });
});

I've tried Protostar, other templates, other sites, etc. In the form, the only elements are `id` and `choose_date`. This is a new Joomla install with no other custom Javascript, extensions, etc.

You have luck with the "td.day" click event firing?

Thanks again!

J!3.9.21
Fabrik latest GitHub

 

[juuser]

Hmm, hard to say what could be the problem without seeing your site. This exact code I posted above is working fine on my test site (also latest Github and J3.9.21). Also the first script in your last post alerts like it should.

If you have a "td" element with a class "day" in DOM it should work.

One thing you could try is:
jQuery("body").delegate(".day", "click", function () { ...
but not sure at all will it make any difference as the original code should have also worked.

 

[hominid4]

Thanks, yes it's weird. I've tried several different ways to target the td ".day" class (which does exist), including ".day", with no luck so far. Thanks for the confirmation that it works on your end, mainly what I needed, I'll keep piddling with it. Thanks again.

 

[hominid4]

I found what was causing the issue on my end. The "Show time selector" needed to be set to Yes, mine was turned off, and when clicking within the days of the calendar, clicking directly on the number doesn't work, have to click to the side of the number within the "td" cell. I need the time selector not visible though, so I'll hide it via CSS or such.

 

[ontarget]

Hi,

I've used this code in form_X.js. Not the ideal solutions, but worked great for me. You can change the fixed first and last dates in the code with your date elements. And of course change the form number and element names to match yours.

requirejs(['fab/fabrik'], function() {

            jQuery("body").delegate("td.day", "click", function () {
                var myfirstdate = "2020-09-22";
                var mysecondate = "2020-09-27";
         
                var form = Fabrik.getBlock('form_1');
                var elname = 'mytable__dateelement';
             
                var elval = form.formElements.get(elname).getValue();
                var date = new Date(elval);
                var mydateString = new Date(date.getTime() - (date.getTimezoneOffset() * 60000 ))
                    .toISOString()
                    .split("T")[0];
             
                if (mydateString < myfirstdate || mydateString > mysecondate) {
                  jQuery("#mytable__dateelement_cal").val("");     
                  alert("Only dates between "+myfirstdate+" and "+mysecondate+" are allowed!");               
                }
            });
 
})

@juuser Hi I'm trying to use your solution to prevent users from picking dates less than or more than a range.
Can you explain:
1. I notice you have no name to the function, should i add one so i can call up the function on my jdate element with inline js onchange event . e.g comparedate($this);
2. Can you explain jQuery("#mytable__dateelement_cal").val(""); is the mytable__dateelement_cal a calc element?
3. Will this work with fabrik 4?
Thanks

 

[juuser]

1) No need for that with this example. It is a jQuery "click" function which catches a click on calendar day cell.
2) "mytable__dateelement_cal" is the id of your jdate input field. Use browser inspect tool to check yours.
3) Although I haven't tested, I see no reason why this shouldn't work with Fabrik 4.

 

[mvilela]

WHERE CURDATE() <= `end` and CURDATE() >= `start`