Hi,

Anyone could give me some hint to calculate the difference of date and time in Custom HTML?

Thanks in advanced!

  • No labels

11 Comments

  1. Hugo

    Hi Tang,

    A little bit of scripting knowledge would quickly help you to solve your question. Check out Calculate Date Range to get you started.

    Hope this helps!

    1. WH Tang

      Thanks a lot! You have create a great samples!


      So, i must create a hidden custom html? it appear an extra blank area to my section...

      Any suggestion on this?

      1. sarah

        Hi WH Tang,

        I try my best to give some ideas.

        My ideas are try to check your text field id which is "days" or Date Form field which is "fromDatepicker"  and Date To which is "toDatepicker". Put at custom HTML.

        Hope that's help you.

      2. Camilo A. García

        I am new to using Joget. I was trying to implement this feature but nothing happens. I must create a Custom HTML and integrate this code between the statements <script type="text/javascript"> on the form? using the "Preview" should be enough to see it in action?

        code.java
        <script type="text/javascript">
$('input[name="fromDatepicker"], input[name="toDatepicker"]').change( function(){
      d1 = $('input[name="fromDatepicker"]').datepicker('getDate');
      d2 = $('input[name="toDatepicker"]').datepicker('getDate');
      diff = 0;
      if (d1 && d2) {
            diff = Math.floor((d2.getTime() - d1.getTime()) / 86400000); // ms per day
      }
      $('input[name=days]').val(diff);
});
</script>

        1. Hugo

          Hi Camilo,

          Thanks for trying out Joget! The javascript coding looks okay. Do you bump into any problem?

          Cheers

    2. WH Tang

      Could you please indicate any reference of the available API for the script in custom HTML? Thanks!

      1. Hugo

        Hi Tang,

        You can check out JQuery framework (jquery.com) for this case. Thanks.

  2. EKARASU

    Hi, the code above works with "preview form". But when it comes to run time, the code does not produce the any output. Could you provide guidance? Thanks. 

  3. Fahmi

    Hi, I think if it works in preview, it should work also in run time. Could you check it using Firebug?

     

  4. Kamran Raza

    Hi,

    Great tutorial, I am just searching for it.

    I have used this code on my form in 'custom HTML' but days are not calculating.

    CODE in CustomHTML:


    <script language="JavaScript" type="text/javascript">

    $('input[name="leavePeriodFrom"], input[name="leavePeriodTo"]').change( function(){
    d1 = $('input[name="leavePeriodFrom"]').datepicker('getDate');
    d2 = $('input[name="leavePeriodTo"]').datepicker('getDate');
    diff = 0;
    if (d1 && d2) {
    diff = Math.floor((d2.getTime() - d1.getTime()) / 86400000); // ms per day
    }
    $('input[name=days]').val(diff);
    });

    </script>

    Screen shot of Form:

     

    Thanks

    Kamran

  5. Kamran Raza

    It works!!

    There were some space issues.

    Thanks

    Kamran