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

[Erwin007]

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.

 

[Barand]

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 |
+------------+

 

[requinix]

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();

 

[Erwin007]

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 May 24, 2023 by Erwin007

[Erwin007]

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.

[requinix]

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.

[Barand]

7 minutes ago, Erwin007 said:

Hi, 

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

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

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

[Erwin007]

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.

 

[Barand]

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>

[Erwin007]

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 May 25, 2023 by Erwin007

[Barand]

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>

[Erwin007]

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>

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

 

[Barand]

Oh!

[Erwin007]

6 minutes ago, Barand said:

Oh!

Unfortunately I only get it to work in Javascript that's why I try to get the dates right.
This table goes to the client so has to be flawless with a title with correct dates.

[Barand]

As demonstrated, there is no reason why you should need to resort to javascript (all info is available on the server in PHP with no further client interaction required)

You must be doing something wrong.

[Erwin007]

1 minute ago, Barand said:

As demonstrated, there is no reason why you should need to resort to javascript (all info is available on the server in PHP with no further client interaction required)

You must be doing something wrong.

https://datatables.net/extensions/buttons/examples/html5/titleMessage.html

 

[Barand]

Where did datatables suddenly appear? All your previous code has shown you generating the table in PHP

[Erwin007]

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']
                });
            

Edited May 25, 2023 by Erwin007

[Erwin007]

Got it:

const from = $('#from').val().split('-').reverse().join('-');

Thanks for your help.