Jump to content

Date conversion from yyyy-mm-dd to dd-mm-yyyy


Erwin007
Go to solution Solved by Erwin007,

Recommended Posts

I have this script code:
<script>
       const from = $('#from').val();
       const to = $('#to').val();
        
       $('#myTable2').append('<caption style="caption-side: top; align:center">Commission '+ from +' - '+ to +'</caption>')
</script>

which gives me this:   Commission 2023-04-01 - 2023-04-30 

but I need this:     Commission 01-04-2023 - 30-04-2023

I tried this in PHP but it just gives me an undefined error.

 

Link to comment
Share on other sites

I find date handling in javascript tedious work. Far easier in PHP or SQL if you can.

PHP

$date = '2023-04-30';
$formatted = (new DateTime($date))->format('d-m-Y');
echo $formatted;

SQL

mysql> SELECT date_format('2023-04-30', '%d-%m-%Y') as formatted;
+------------+
| formatted  |
+------------+
| 30-04-2023 |
+------------+

 

Link to comment
Share on other sites

Are #from and #to date <input>s? Use .valueAsDate to get Date objects, then call their .toLocaleDateString() methods to get the date in a locale-based format. It might not be exactly dd-mm-yyyy, but (a) it's probably still good and (b) you can customize it some if you want.

const from = $("#from")[0].valueAsDate.toLocaleDateString();
const to = $("#to")[0].valueAsDate.toLocaleDateString();

 

Link to comment
Share on other sites

26 minutes ago, Barand said:

I find date handling in javascript tedious work. Far easier in PHP or SQL if you can.

PHP

$date = '2023-04-30';
$formatted = (new DateTime($date))->format('d-m-Y');
echo $formatted;

SQL

mysql> SELECT date_format('2023-04-30', '%d-%m-%Y') as formatted;
+------------+
| formatted  |
+------------+
| 30-04-2023 |
+------------+

 

Hi, 

I tried this: $newdate = (new DateTime($from))->format('d-m-Y');

and in the script: const from = $('#newdate').val();

 

and it gives me: Commission undefined

Edited by Erwin007
Link to comment
Share on other sites

20 minutes ago, requinix said:

Are #from and #to date <input>s? Use .valueAsDate to get Date objects, then call their .toLocaleDateString() methods to get the date in a locale-based format. It might not be exactly dd-mm-yyyy, but (a) it's probably still good and (b) you can customize it some if you want.

const from = $("#from")[0].valueAsDate.toLocaleDateString();
const to = $("#to")[0].valueAsDate.toLocaleDateString();

 

Yes, they are.

I tried this: const from = $("#from")[0].valueAsDate.toLocaleDateString(('en-GB'));

and got this:  Commission 31/03/2023 - 29/04/2023

So I am "short" 1 day.

Link to comment
Share on other sites

Aww, then it's adjusting for timezones.

You can go the longer route too:

const from = new Date($("#from").val()).toLocaleDateString();

Javascript isn't particularly good with dates, but it can do the basics if you're willing to learn more about it.

Link to comment
Share on other sites

13 hours ago, Barand said:

If you are reformatting the date in PHP, what are you trying to do with it in Javascript?

I am trying to get a simple thing like a title of the table, which supposedly is done in Javascript.
<script>
            $(document).ready( function () {
                $('#myTable').dataTable({
                    "ordering": false
                })
            $('#myTable2').dataTable({
                "ordering": false,
                "dom": 'Btip',
                "buttons": ['print']
                });
            
            //const from = $('#newdate').val();
            
            const from = $("#from")[0].valueAsDate.toLocaleDateString(('en-GB'));
            
            
            //const to = $('#to').val();
            const to = $("#to")[0].valueAsDate.toLocaleDateString(('en-US'));
            
            $('#myTable2').append('<caption style="caption-side: top; align:center"><span style="font-size: 1.3REM; color: #000000">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Commission '+ from +' - '+ to +'</span></caption>')
               
            });
        </script>

I am now trying to get the date correct, which is a big **** with the American date notation.

 

Link to comment
Share on other sites

You receive and reformat the dates in the PHP. So create the table title in PHP also.

Why struggle to do it in the javascript on the client?

Example

<?php
    $from = $_GET['start'] ?? '';
    $to = $_GET['to'] ?? '';

    $comm_start = (new DateTime($from))->format('d/m/Y');
    $comm_to = (new DateTime($to))->format('d/m/Y');
    $table_title = "Commission: $comm_start &ndash; $comm_to";
?>
<body>
    <table class="table" id="myTable2">
    <caption><?=$table_title?></caption>
    <thead>
        <tr>
            <th>Rep</th>
            <th>Sales</th>
            <th>Cigars</th>
            <th>30%</th>
            <th>Rum/Souv.</th>
            <th>30%</th>
            <th>Comm.</th>
        </tr>
    </thead>
    </table>

</body>

image.png.f3fbf6bb32d37b92ad5be04f95fca332.png

Link to comment
Share on other sites

Unfortunately the caption doesn't work with the Datatable, it puts it at the bottom of the table.

I followed your code for the date but now it says UNDEFINED:

$vanaf = (new DateTime($from))->format('d-m-Y');

If I echo $vanaf I get the correct date but it doesn't "go" to Javascript.

const from = $('#vanaf').val();     get's me:  Commission undefined - 2023-05-08

Edited by Erwin007
Link to comment
Share on other sites

Then place it somewhere else. The principle remains the same.

Maybe

<body>
    <h3><?=$table_title?></h3>
    <table class="table" id="myTable2">
    <thead>
        <tr>
            <th>Rep</th>
            <th>Sales</th>
            <th>Cigars</th>
            <th>30%</th>
            <th>Rum/Souv.</th>
            <th>30%</th>
            <th>Comm.</th>
        </tr>
    </thead>
    </table>

</body>

image.png.b16cb6056b7a51467c154d5cb09d2120.png

Link to comment
Share on other sites

1 minute ago, Barand said:

Then place it somewhere else. The principle remains the same.

Maybe

<body>
    <h3><?=$table_title?></h3>
    <table class="table" id="myTable2">
    <thead>
        <tr>
            <th>Rep</th>
            <th>Sales</th>
            <th>Cigars</th>
            <th>30%</th>
            <th>Rum/Souv.</th>
            <th>30%</th>
            <th>Comm.</th>
        </tr>
    </thead>
    </table>

</body>

image.png.b16cb6056b7a51467c154d5cb09d2120.png

I have tried it all, now when I print, the title is not there.

 

Link to comment
Share on other sites

Somewhere in here after creating the table:

<script src="app-assets/vendors/js/vendors.min.js"></script>
        <script src="app-assets/vendors/js/charts/apexcharts.min.js"></script>
        <script src="app-assets/js/core/app-menu.min.js"></script>
        <script src="app-assets/js/core/app.min.js"></script>
        <script src="app-assets/js/scripts/customizer.min.js"></script>
        <script src="app-assets/js/scripts/pages/dashboard-ecommerce.min.js"></script>
        <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js" ></script>
        <script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js" ></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" ></script>
        <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js" ></script>
        <script src="app-assets/vendors/js/tables/datatable/dataTables.bootstrap5.min.js"></script>
        <script src="app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js"></script>
        <script src="app-assets/vendors/js/tables/datatable/responsive.bootstrap5.js"></script>
        <script src="app-assets/js/scripts/pages/app-invoice-list.min.js"></script>
        <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>

 

Plus this script:

<script>
            $(document).ready( function () {
                $('#myTable').dataTable({
                    "ordering": false
                })
            $('#myTable2').dataTable({
                "ordering": false,
                "dom": 'Btip',
                "buttons": ['print']
                });
            

print.jpg

Edited by Erwin007
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.