Forums

I am trying to get the Datepicker working properly. I have a CFv5 gdatetimepicker field created with a validation required set to Yes. In Extra Params I have data-start_date=<?php echo date("Y-m-d"); ?>.

The Datepicker appears as expected when one clicks in the field blank field.
[attachment=0]gdatetimepicker required field.PNG[/attachment]

If I choose a date within the shown month everything works fine, but if I click on the > to change the month I get:
[attachment=1]gdatetimepicker required field change month warning.PNG[/attachment]

I have not left the field and am in the process of setting a date.

Why does the Required warning popup when I change the Datepicker's month?

CFv4 MooTools Datepicker did not behave like this.

This does not happen if I prefill the text portion of the field with the current date, but I don't want that and would like the field to remain empty until an actual date is selected.

One other thing... I have tried to change the color scheme to be black characters on a white background. When I inspect element in page source and change the reverse the rgb() color values for gdatetimepicker-panel in the browser inspector it changes, but if I use Load CSS nothing changes.

.gdatetimepicker-panel {color: rgb(0,0,0); background-color: rgb(255,255,255);}

With CFv4 MooTools you could set the appearance of the Datepicker. I cannot find anywhere to do that in CFv5 except possibly with Load CSS.

Interestingly, the Required Warning only appears on the first click to change the month. If I click on the warning's X to close it and then continue clicking month change, the Required Warning does not appear again.

Hi MainsailSoftware,

Is this ChronoForms 5.0.5 - the latest release? I know that Max added onBlur validation (so the inputs are validated when entered rather than only when the form is submitted) to that and I suspect that may be causing the problem. I'm not sure how to fix it though :-(

Bob

Yes, I have the CF 5.0.5 installed...

On the other item... any suggestions on how to change the Datepicker color scheme? I cannot seem to get the CSS code right to make it work.

Hi MainsailSoftware,

Sorry, no, I prefer to use the jQuery datepicker which has better documentation and clearer options :-(

Bob

Can I assume that this is your recommended approach to adding a jQuery datepicker to CFv5?

Adding a Datepicker for ChronoForms v5
http://www.chronoengine.com/faqs/70-cfv5/5201-adding-a-datepicker-for-chronoforms-v5.html

Another issue with the Required popup warning: if you add a button to reset the form, all the fields show the warning!

I have tried to use the datepicker that comes with Chronoforms V5, but as described by MainSail Software, my users don't like the premature "This field is required" warning message. I have a birthdate field, so a default date doesn't make any sense. I set the datepicker to months and when the user clicks on the "<" to change the year, the error message pops up saying the field is required. That is confusing, because the user is trying to enter the date.

So I tried the datepicker recommended in this post, but I can't get it to show up on my form. In that post, GreyHead mentions being able to view his example "here" but there is no link to the example.

Is there anything I can do with the default datepicker in Chronoforms to make the error message not display until the person leaves the field - am I missing a setting?

Or can I get a link to the example for the alternate datepicker that GreyHead recommended, to help me figure out what I might be doing wrong? (I loaded the datepicker files to the extras directory, changed the script to use my text field id, and put the custom code action before the load html... not sure what I did wrong).

Thanks for your help.

Update - I was able to get the alternate datepicker to show up (oops - I had a typo in the field id) but the behavior is bizarre. I click in the field and the datepicker appears. I choose a date, the date gets filled in the field, I get an error message that the field is required (but it's filled in - why am I getting this error message?) and when I click to close the error message, the field goes away - the label is there, but the date and the box around the field are gone!

I tried temporarily making the field not mandatory. So no annoying error message, but the field still disappears (data and box disappear - label is still there) from the form after selecting the date. It turns out that the data does get stored (and sent in the email upon submit).

What should I try now?

Hi JerseyGirl,

I couldn't find the form that the FAQ was supposed to link to - maybe I never built it on my site :-( There's a new version available here that I built by following the FAQ.

Please post a link to your form so I can take a quick look.

Bob

Hi GreyHead,
Here's a link to a nonsensical test form where I tried out 3 different ways of collecting dates.

The first is the default datepicker from Chronoforms. I don't think I can use it because of the premature error message about required field that pops up when you're still selecting the date.

The second is a text field with a date mask - pretty straightforward and user-friendly.

The third is the bootstrap datepicker that you mentioned - I think it is more attractive than the default Chronoforms datepicker, and would love to use it, but can't get it to work. I used your code exactly (blindly?!) as posted (substituting my field id); I suspect that I need to change it in some way:

<?php
JHtml::_('jquery.framework');
JHtml::_('bootstrap.framework');
$doc =& JFactory::getDocument();
$doc->addScript('/components/com_chronoforms5/chronoforms/extras/datepicker/js/bootstrap-datepicker.js');
$doc->addStylesheet('/components/com_chronoforms5/chronoforms/extras/datepicker/css/datepicker.css');
$script ="
jQuery( document ).ready(function( jQ ) {
  jQ('#birth_1').datepicker();
});
";
$doc->addScriptDeclaration($script);
?>

Thanks for looking!

Hi JerseyGirl,

Here's the code I used to test (copied and pasted from this form)

<?php
JHtml::_('jquery.framework');
JHtml::_('bootstrap.framework');
$doc = JFactory::getDocument();
$doc->addScript('/components/com_chronoforms5/chronoforms/extras/datepicker/js/bootstrap-datepicker.js');
$doc->addStylesheet('/components/com_chronoforms5/chronoforms/extras/datepicker/css/datepicker.css');
$script ="
jQuery( document ).ready(function( jQ ) {
  jQ('#text1').datepicker();
  jQ('#text1').after(
'<span class=\'add-on\'><i class=\'icon-calendar\'></i></span>');
  jQ('#text1').css({
    'display': 'inline-block',
    'margin-right': '6px'
  });
});
";
$doc->addScriptDeclaration($script);
?>

Some things that might cause problems:

+ Max has re-used $doc for something else so I now use $jdoc in CFv5 (though it seems OK)
+ Using =& in J3 can cause PHP warnings so leave out the & (depends on the exact PHP version)
+ Max has added a namespace in CFv5 so sometimes you need to add a \ prefix as in \JFactory to access core Joomla! classes.
+ I have jQueryEasy installed so may be using a later version of jQuery (I doubt that is the problem though).

Bob