0

I'm using wkhtml2pdf to generate pdf against HTML provided. In my HTML page I'm including moment.js and using it's functions to convert dates.

Dates are properly converted on html page but after wkhtml2pdf processing, chnaged date is not shown.

Call to wkhtml2pdf is as:

$html_in_string = $this->load->view('phr_print', $phr_print_response, true);
//         Create PDF object.
        $pdf = new WKPDF();

        // Set PDF's HTML
        $pdf->set_html($html_in_string);
        // Convert HTML to PDF
        $pdf->render();
        // Output PDF. The file name is suggested to the browser.
        $pdf->output(WKPDF::$PDF_EMBEDDED, 'phr_print.pdf');

Below script is inside phr_print.php file along with other code.

<script type="text/javascript">
    $(document).ready(function(){

        $(".format-date").each(function(el){
        var timestamp = $(this).data('timestamp');
        if( jQuery.trim(timestamp) != "" ){
            timestamp = timestamp * 1000;
            var format    = $(this).data('format') ;
            format = jQuery.trim(format)==""?"MM/DD/YYYY":format;
            var datetime  = moment( timestamp ).format( format );
            $(this).html( datetime ) ;
        }
    });

    });

</script>

moment.js version is 2.0.0 and wkhtmltopdf version is 0.9.9.

Any help in regard is highly appreciated.

Farhat Naz Biya
  • 105
  • 1
  • 10

1 Answers1

0

When you view through browser moment is using your browser's timezone but when you call from wkhtmltopdf then it is using default server's timezone to fix this issue, please follow these steps:-

  1. Update your moment.js to latest version
  2. Pass your browser's timezone offset to the url which is used to generate pdf i.e., new Date().getTimezoneOffset()
  3. Pass that timezone to your view and update your above javascript

    $(document).ready(function(){
    
        $(".format-date").each(function(el){
        var timestamp = $(this).data('timestamp');
    
        //Add your zone as a data attribute in dom that you had passed 
        //or store it as a global veriable
    
        var zone = $(this).data('zone') ? $(this).data('zone') : 0;
        if( jQuery.trim(timestamp) != "" ){
            timestamp = timestamp * 1000;
            var format    = $(this).data('format') ;
            format = jQuery.trim(format)==""?"MM/DD/YYYY":format;
            var m = moment(timestamp);
            m = m.zone(zone);
            var datetime  = m.format( format );
            $(this).html( datetime ) ;
        }
    });
    
    });
    

I hope that will fix your issue

Mudaser Ali
  • 3,989
  • 3
  • 25
  • 27
  • Careful. `getTimezoneOffset` returns the offset for the date you call it on. Calling it on `new Date()` gives you the *current* offset. That might not be the applicable offset for the dates you are using, as many time zones shift their offsets for daylight saving time. – Matt Johnson-Pint Jun 30 '14 at 19:49
  • @MattJohnson you are right. Found in search results about IANA Time Zone Database + Moment.js Timezone for moment.js is provided in a separate library.i.e. http://momentjs.com/timezone. – Farhat Naz Biya Jul 01 '14 at 05:39
  • @matt can you please give any opinion about, what is best library or plugin that could be used in all date/time related activities where there is great likelihood of - users of applications belongs to different timezones - user adding date/timezone values is in different timezone (may be a non-dst timezone) than the user viewing it - in Chicago/Illinois daylight saving is also applicable. Can we say moment-timezone as best at covering all these scenarios. – Farhat Naz Biya Jul 01 '14 at 06:09
  • @FarhatNazBiya please check http://stackoverflow.com/questions/11887934/check-if-daylight-saving-time-is-in-effect-and-if-it-is-for-how-many-hours this will help you to get offset if day light saving is occurring in your timezone. – Mudaser Ali Jul 01 '14 at 08:31
  • @FarhatNazBiya - Moment-timezone is good, sure. There are others [listed here](http://stackoverflow.com/a/15171030/634824). You might also consider [jsTimeZoneDetect](http://pellepim.bitbucket.org/jstz/) if you don't know the time zone of the user. – Matt Johnson-Pint Jul 02 '14 at 16:37