Home > Enterprise >  Change data format in CRUD output to dd/mm/yyy
Change data format in CRUD output to dd/mm/yyy

Time：10-16

i know it's a question asked many times here, but i tried all the solutions and no one is working. I want to change the output in my CRUD from the input form to dd/mm/yyyy and not in yyyy-mm-dd.

Here's my code:

var nextId = 1;
var activeId = 0;
function productDisplay(ctl) {
  var row = $(ctl).parents("tr");
  var cols = row.children("td");
  activeId = $($(cols[0]).children("button")[0]).data("id");
  $("#productname").val($(cols[1]).text());
  $("#introdate").val($(cols[2]).text());
  $("#finishdate").val($(cols[3]).text());
  $("#url").val($(cols[4]).text());
  $("#phone").val($(cols[5]).text());
  $("#note").val($(cols[6]).text());
  $("#client").val($(cols[7]).text());
  $("#updateButton").text("Aggiorna");
}

function productUpdate() {
  if ($("#updateButton").text() == "Add") {
    productUpdateInTable(activeId);
  }
  else {
    productAddToTable();
  }
  formClear();
  $("#productname").focus();
}

function productAddToTable() {
  if ($("#productTable tbody").length == 0) {
    $("#productTable").append("<tbody></tbody>");
  }

  $("#productTable tbody").append(
    productBuildTableRow(nextId));
  nextId  = 1;
}
function productUpdateInTable(id) {
  var row = $("#productTable button[data-id='"   id   "']")
    .parents("tr")[0];

  $(row).after(productBuildTableRow(id));
  $(row).remove();

  formClear();
  $("#updateButton").text("Add");
}
function productBuildTableRow(id) {
  var ret =
    "<tr>"  
    "<td>"  
    "<button type='button' "  
    "onclick='productDisplay(this);' "  
    "class='btn btn-default' "  
    "data-id='"   id   "'>"  
    "<span class='glyphicon glyphicon-pencil' />"  
    "</button>"  
    "</td>"  
    "<td>"   $("#productname").val()   "</td>"  
    "<td>"   $("#introdate").val()   "</td>"  
    "<td>"   $("#finishdate").val()   "</td>"  
    "<td>"   $("#url").val()   "</td>"  
    "<td>"   $("#phone").val()   "</td>"  
    "<td>"   $("#note").val()   "</td>"  
    "<td>"   $("#client").val()   "</td>"  
    "<td>"  
    "<button type='button' "  
    "onclick='productDelete(this);' "  
    "class='btn btn-default' "  
    "data-id='"   id   "'>"  
    "<span class='glyphicon glyphicon-minus' />"  
    "</button>"  
    "</td>"  
    "</tr>"
  return ret;
}

function productDelete(ctl) {
  var result = confirm("Want to delete record?");
  if (result) {
    var result2 = confirm("Really?");
  }
  if (result2) {
    $(ctl).parents("tr").remove();
  }
}

function formClear() {
  $("#productname").val("");
  $("#introdate").val("");
  $("#finishdate").val("");
  $("#url").val("");
  $("#phone").val("");
  $("#note").val("");
  $("#client").val("");
}
function doSearch(text, color = "yellow") {
  if (color != "transparent") {
    doSearch(document.getElementById('hid_search').value, "transparent");
    document.getElementById('hid_search').value = text;
  }
  if (window.find && window.getSelection) {
    document.designMode = "on";
    var sel = window.getSelection();
    sel.collapse(document.body, 0);

    while (window.find(text)) {
      document.execCommand("HiliteColor", false, color);
      sel.collapseToEnd();
    }
    document.designMode = "off";
  } else if (document.body.createTextRange) {
    var textRange = document.body.createTextRange();
    while (textRange.findText(text)) {
      textRange.execCommand("BackColor", false, color);
      textRange.collapse(false);
    }
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
    <div >
        <div >
            <h2><b>Availability</h2></b>
        </div>
    </div>
    <div >
        <div >
            <table id="productTable" >
                <thead>
                    <tr>
                        <th >Modify</th>
                        <th >Name</th>
                        <th >From</th>
                        <th >To</th>
                        <th >Area</th>
                        <th >Phone</th>
                        <th >Note</th>
                        <th >Client</th>
                        <th >Delete</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <div >
        <div >
            <div >
                <div >
                    Add Availability
                </div>
                <div >
                    <div >
                        <label for="productname">
                            Name
                        </label>
                        <input type="text"  value="" id="productname" />
                    </div>
                    <div >
                        <label for="introdate">
                            From
                        </label>
                        <input type="date"  value="gg/mm/aaaa" id="introdate">
                    </div>
                    <div >
                        <label for="introdate">
                            To
                        </label>
                        <input type="date"  value="gg/mm/aaaa" id="finishdate" />
                    </div>
                    <div >
                        <label for="area">
                            Area
                        </label>
                        <input type="search"  value="" id="url" />
                    </div>
                    <div >
                        <label for="phone">
                            Phone
                        </label>
                        <input type=""  value="" id="phone" />
                    </div>
                    <div >
                        <label for="note">
                            Note
                        </label>
                        <input type=""  value="" id="note" />
                    </div>
                    <div >
                        <label for="client">
                            Client
                        </label>
                        <select id="client" >
                            <option value=""></option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                        </select>
                    </div>
                    <div >
                        <div >
                            <div >
                                <button type="button" id="updateButton"  onclick="productUpdate();">
                                    Add
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

When I insert a new record from form field date, the output in my CRUD is like YYYY-MM-DD.

CodePudding user response：

This should help you. Pass a valid date in any format and the function will return a dd/mm/yyyy date format

// Helper function to format date from $(input).val()

function formatDate(date) {
  if (date == '') {
    return '';
  }
  let d = new Date(date),
    ye = new Intl.DateTimeFormat('en', {
      year: 'numeric'
    }).format(d),
    mo = new Intl.DateTimeFormat('en', {
      month: '2-digit'
    }).format(d),
    da = new Intl.DateTimeFormat('en', {
      day: '2-digit'
    }).format(d);
  return (`${da}-${mo}-${ye}`);
}

// ----

var nextId = 1;
var activeId = 0;
function productDisplay(ctl) {
  var row = $(ctl).parents("tr");
  var cols = row.children("td");
  activeId = $($(cols[0]).children("button")[0]).data("id");
  $("#productname").val($(cols[1]).text());
  $("#introdate").val($(cols[2]).text());
  $("#finishdate").val($(cols[3]).text());
  $("#url").val($(cols[4]).text());
  $("#phone").val($(cols[5]).text());
  $("#note").val($(cols[6]).text());
  $("#client").val($(cols[7]).text());
  $("#updateButton").text("Aggiorna");
}

function productUpdate() {
  if ($("#updateButton").text() == "Add") {
    productUpdateInTable(activeId);
  }
  else {
    productAddToTable();
  }
  formClear();
  $("#productname").focus();
}

function productAddToTable() {
  if ($("#productTable tbody").length == 0) {
    $("#productTable").append("<tbody></tbody>");
  }

  $("#productTable tbody").append(
    productBuildTableRow(nextId));
  nextId  = 1;
}
function productUpdateInTable(id) {
  var row = $("#productTable button[data-id='"   id   "']")
    .parents("tr")[0];

  $(row).after(productBuildTableRow(id));
  $(row).remove();

  formClear();
  $("#updateButton").text("Add");
}
function productBuildTableRow(id) {
  var ret =
    "<tr>"  
    "<td>"  
    "<button type='button' "  
    "onclick='productDisplay(this);' "  
    "class='btn btn-default' "  
    "data-id='"   id   "'>"  
    "<span class='glyphicon glyphicon-pencil' />"  
    "</button>"  
    "</td>"  
    "<td>"   $("#productname").val()   "</td>"  
    "<td>"   formatDate($("#introdate").val())   "</td>"      // call helper function
    "<td>"   formatDate($("#finishdate").val())   "</td>"     // call helper function
    "<td>"   $("#url").val()   "</td>"  
    "<td>"   $("#phone").val()   "</td>"  
    "<td>"   $("#note").val()   "</td>"  
    "<td>"   $("#client").val()   "</td>"  
    "<td>"  
    "<button type='button' "  
    "onclick='productDelete(this);' "  
    "class='btn btn-default' "  
    "data-id='"   id   "'>"  
    "<span class='glyphicon glyphicon-minus' />"  
    "</button>"  
    "</td>"  
    "</tr>"
  return ret;
}

function productDelete(ctl) {
  var result = confirm("Want to delete record?");
  if (result) {
    var result2 = confirm("Really?");
  }
  if (result2) {
    $(ctl).parents("tr").remove();
  }
}

function formClear() {
  $("#productname").val("");
  $("#introdate").val("");
  $("#finishdate").val("");
  $("#url").val("");
  $("#phone").val("");
  $("#note").val("");
  $("#client").val("");
}
function doSearch(text, color = "yellow") {
  if (color != "transparent") {
    doSearch(document.getElementById('hid_search').value, "transparent");
    document.getElementById('hid_search').value = text;
  }
  if (window.find && window.getSelection) {
    document.designMode = "on";
    var sel = window.getSelection();
    sel.collapse(document.body, 0);

    while (window.find(text)) {
      document.execCommand("HiliteColor", false, color);
      sel.collapseToEnd();
    }
    document.designMode = "off";
  } else if (document.body.createTextRange) {
    var textRange = document.body.createTextRange();
    while (textRange.findText(text)) {
      textRange.execCommand("BackColor", false, color);
      textRange.collapse(false);
    }
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
    <div >
        <div >
            <h2><b>Availability</h2></b>
        </div>
    </div>
    <div >
        <div >
            <table id="productTable" >
                <thead>
                    <tr>
                        <th >Modify</th>
                        <th >Name</th>
                        <th >From</th>
                        <th >To</th>
                        <th >Area</th>
                        <th >Phone</th>
                        <th >Note</th>
                        <th >Client</th>
                        <th >Delete</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <div >
        <div >
            <div >
                <div >
                    Add Availability
                </div>
                <div >
                    <div >
                        <label for="productname">
                            Name
                        </label>
                        <input type="text"  value="" id="productname" />
                    </div>
                    <div >
                        <label for="introdate">
                            From
                        </label>
                        <input type="date"  value="gg/mm/aaaa" id="introdate">
                    </div>
                    <div >
                        <label for="introdate">
                            To
                        </label>
                        <input type="date"  value="gg/mm/aaaa" id="finishdate" />
                    </div>
                    <div >
                        <label for="area">
                            Area
                        </label>
                        <input type="search"  value="" id="url" />
                    </div>
                    <div >
                        <label for="phone">
                            Phone
                        </label>
                        <input type=""  value="" id="phone" />
                    </div>
                    <div >
                        <label for="note">
                            Note
                        </label>
                        <input type=""  value="" id="note" />
                    </div>
                    <div >
                        <label for="client">
                            Client
                        </label>
                        <select id="client" >
                            <option value=""></option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                        </select>
                    </div>
                    <div >
                        <div >
                            <div >
                                <button type="button" id="updateButton"  onclick="productUpdate();">
                                    Add
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Page link：https//www.codepudding.com/Enterprise/577864.html

Prev:Rotate a circle with 30deg when a key is pressed
Next:hide button from specific pages
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding