CiviCRM Community Forums (archive)

Hey all,
Whenever I try and use a date field in an HTML form snippet (copying the code it provides), the datepicker calendar icon does not show up.  Instead, I get 2 text form fields.  The first text field does invoke the popup calendar.  The second is also text, does not open the calendar, and displays the exact same chosen date as the first.

This only happens on html snippets, not by previewing the profile in "create" mode.  Is this a bug or a setup issue?  Is there a way to get the icon to show up properly?

Here is the birth date code the sandbox profile generated:

<div id="editrow-birth_date" class="crm-section editrow_birth_date-section form-item"><div class="label"><label for="birth_date">  Date of Birth
     <span class="crm-marker" title="This field is required.">*</span>
</label></div><div class="edit-value content">&nbsp;<input formattype="birth" startoffset="100" endoffset="0" format="mm/dd/yy" readonly="1" name="birth_date" type="text" id="birth_date" class="dateplugin" /><input type="text" name="birth_date_hidden" id="birth_date_hidden" class="hiddenElement"/>&nbsp;&nbsp;&nbsp;&nbsp;<span class="crm-clear-link">(<a href="javascript:clearDateTime( 'birth_date' );">clear</a>)</span><script type="text/javascript">
    cj( function() {
      var element_date   = "#birth_date";var element_time  = "#birth_date_time";var time_format   = cj( element_time ).attr('timeFormat');
              cj(element_time).timeEntry({ show24Hours : time_format, spinnerImage: '' });
          var currentYear = new Date().getFullYear();var date_format = cj( element_date ).attr('format');var alt_field   = 'input#birth_date_hidden';var yearRange   = currentYear - parseInt( cj( element_date ).attr('startOffset') );yearRange  += ':';yearRange  += currentYear + parseInt( cj( element_date ).attr('endOffset'  ) );

      var lcMessage = "en_US";
      var localisation = lcMessage.split('_');
      cj(element_date).datepicker({
                                    closeAtTop        : true,
                                    dateFormat        : date_format,
                                    changeMonth       : true,
                                    changeYear        : true,
                                    altField          : alt_field,
                                    altFormat         : 'mm/dd/yy',
                                    yearRange         : yearRange,
                                    regional          : localisation[0]
                                });

      cj(element_date).click( function( ) {
          hideYear( this );
      }); 
      cj('.ui-datepicker-trigger').click( function( ) {
          hideYear( cj(this).prev() );
      }); 
    });
   
    function hideYear( element ) {
        var format = cj( element ).attr('format');
        if ( format == 'dd-mm' || format == 'mm/dd' ) {
            cj(".ui-datepicker-year").css( 'display', 'none' );
        }
    }
   
    function clearDateTime( element ) {
        cj('input#' + element + ',input#' + element + '_time').val('');
    }
    </script></div><div class="clear"></div></div></div>


I am having the same problem. Making a form to put in another website for registration. Followed hints in other posts- no luck. Attached is what my online form looks like. Since it displays 2 date fields, one for text entry and one that is supposed to have the calendar picker icon- could this be a conflict between date settings in Drupal and CiviCRM.

[edit] When the left box is clicked, the popup date picker appears, and upon picking a date it fills in the right box with  different date format. Also attached is the date field after entering date.
Drupal: 6.20
CivicCRM: 3.40

[EDIT] Tried this date entry field added to a profile with the demo site and got similar results. 2 boxes with no calendar icon. It was there in the "Preview fields" window.

I think dates are failing because civicrm.css is not included. Can you manually include civicrm.css and check if that works

Thanks
Kurund

So how do I do this "include civicrm.css," and why is it not doing this automatically.

Thanks for the reply...

I pasted the section of text to the top of the files created by HTNL snippet. Still get same result- no calendar icon.

This is part of the text created by the HTML snippet:
===================
<script type="text/javascript" src="http://gcserver.clemson.edu/interns/sites/all/modules/civicrm/packages/jquery/plugins/jquery.autocomplete.js"></script>
<style type="text/css">@import url("http://gcserver.clemson.edu/interns/sites/all/modules/civicrm/packages/jquery/css/jquery.autocomplete.css");</style>

<script type="text/javascript" src="http://gcserver.clemson.edu/interns/sites/all/modules/civicrm/packages/jquery/plugins/jsTree.v.1.0rc2/jquery.jstree.min.js"></script>
<style type="text/css">@import url("http://gcserver.clemson.edu/interns/sites/all/modules/civicrm/packages/jquery/plugins/jsTree.v.1.0rc2/themes/default/jstree.css");</style>

<script type="text/javascript" src="http://gcserver.clemson.edu/interns/sites/all/modules/civicrm/packages/jquery/plugins/jquery.menu.pack.js"></script>
<style type="text/css">@import url("http://gcserver.clemson.edu/interns/sites/all/modules/civicrm/packages/jquery/css/menu.css");</style>

<script type="text/javascript" src="http://gcserver.clemson.edu/interns/sites/all/modules/civicrm/packages/jquery/plugins/jquery.chainedSelects.js"></script>
=======================
Is this correct, it seems to have css in it?

Also- could this be a permissions problem with a folder on the server?

Thank you!

Interesting- the date picker works, but now there is a lot of white space between lines of type. What was just one line of type for entry then another is a lot of scrolling to get to the next entry line.

Thanks!