Using datepicker in FTL file

[Foo Shyn Chung]

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

[Bilgin Ibryam-2]

Hi FooShyn,

Look at this file
/ofbiz/applications/order/webapp/ordermgr/entry/cart/showcart.ftl
and this tag <@htmlTemplate.renderDateTimeField

HTH
Bilgin


On 1 February 2012 16:13, Foo Shyn Chung <[hidden email]> wrote:

> 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