Using datepicker in FTL file

Posted by Foo Shyn Chung on
URL: http://ofbiz.116.s1.nabble.com/Using-datepicker-in-FTL-file-tp4348427.html

Hi guys,

I need to use datepicker in FTL within Ofbiz but i failed to find any
example of doing so. I manage to put in the codes that shows the field and
the datepicker image (which is a 'button') on the screen, however when i
click on the datepicker image, nothing happens.

Below is the code snippet i put into my FTL:

<span class="view-calendar">
      <input type="text" id="CustomerForm_approvedDate_i18n" maxlength="10"
size="10" title="Format: yyyy-MM-dd" name="approvedDate_i18n">
      <input type="text" id="CustomerForm_approvedDate" maxlength="10"
size="10" title="Format: yyyy-MM-dd" null="null"
style="height:1px;width:1px;border:none;background-color:transparent"
name="approvedDate" class="hasDatepicker">
      <button type="button" class="ui-datepicker-trigger"></button>
      <script type="text/javascript">
              if (Date.CultureInfo != undefined) {
                  var initDate = "";
                  if (initDate != "") {
                      var dateFormat =
Date.CultureInfo.formatPatterns.shortDate;
                      if (initDate.indexOf('.') != -1) {
                          initDate = initDate.substring(0,
initDate.indexOf('.'));
                      }
                      var ofbizTime = "yyyy-MM-dd";
                      var dateObj = Date.parseExact(initDate, ofbizTime);
                      var formatedObj = dateObj.toString(dateFormat);

 jQuery("#CustomerForm_approvedDate_i18n").val(formatedObj);
                  }
                  jQuery("#CustomerForm_approvedDate").change(function() {
                      var ofbizTime = "yyyy-MM-dd";
                      var newValue = ""
                      if (this.value != "") {
                          var dateObj = Date.parseExact(this.value,
ofbizTime);
                          var dateFormat =
Date.CultureInfo.formatPatterns.shortDate;
                          newValue = dateObj.toString(dateFormat);
                      }

 jQuery("#CustomerForm_approvedDate_i18n").val(newValue);
                  });

 jQuery("#CustomerForm_approvedDate_i18n").change(function() {
                      var dateFormat =
Date.CultureInfo.formatPatterns.shortDate;
                      var newValue = ""
                      if (this.value != "") {
                          var dateObj = Date.parseExact(this.value,
dateFormat);
                          var ofbizTime = "yyyy-MM-dd";
                          newValue = dateObj.toString(ofbizTime);
                      }
                      jQuery("#CustomerForm_approvedDate").val(newValue);
                  });
              } else {
                  jQuery("#CustomerForm_approvedDate").change(function() {

 jQuery("#CustomerForm_approvedDate_i18n").val(this.value);
                  });

 jQuery("#CustomerForm_approvedDate_i18n").change(function() {
                      jQuery("#CustomerForm_approvedDate").val(this.value);
                  });
              }
                 jQuery("#CustomerForm_approvedDate").datepicker({
                    showOn: 'button',
                    buttonImage: '',
                    buttonText: '',
                    buttonImageOnly: false,
                    dateFormat: 'yy-mm-dd',
                    changeMonth: true,
                    changeYear: true
                  })

              ;
          </script>
     <input type="hidden" value="Timestamp" name="">
   </span>

Anyone has any idea on this? Or a pointer to an example where datepicker is
being use in a FTL file would be appreciated as well.

Thanx
FooShyn