日期格式不适用于日期选择器

Question

我正在使用 datepicker 来允许用户选择一个日期。我不能改变格式。

我一直在尝试基于此处找到的示例，例如 dateFormat 甚至格式，但它仍然不起作用

这就是我将日期选择器添加到表中的方式

$(document).ready(function() {
    $("#btnView").click(function() {

         if (!Array.isArray(aItems) || !aItems.length) {

                document.getElementById('btnSubmit').style.visibility = 'hidden';               
            }

         else {     

             document.getElementById('btnSubmit').style.visibility = 'visible';  
            var html2 = '';
            $.each(aItems, function(i, post) {

                let oQtyModal = "itemqtymodal_" + i;
                let oDate = "iDate_" + i;

                html2 += '<tr>';
                html2 += '<td>' + post["NEW_ITEM-MATNR"] + '</td>';
                html2 += '<td>' + post["NEW_ITEM-MATGROUP"] + '</td>';
                html2 += '<td>' + post["NEW_ITEM-DESCRIPTION"] + '</td>';
                html2 += '<td>' + post["NEW_ITEM-PRICE"] + '</td>';
                //html2 += '<td>' + post["NEW_ITEM-QUANTITY"] + '</td>';
                html2 += '<td>'  + '<input type="text"' + 'onchange="getQty(this)"' + 'name="' + oQtyModal + '"' + 'id="' + oQtyModal + '"' + 'value='+post["NEW_ITEM-QUANTITY"]+'>' + '</td>';
                html2 += '<td align="center">' + post["NEW_ITEM-UNIT"] + '</td>';
                html2 += '<td>' + post["NEW_ITEM-CUST_FIELD1"] + '</td>';
                html2 += '<td>' + '<input type="text"' + 'class="datepicker"' + 'id="' + oDate + '"' + 'value='+post["NEW_ITEM-CUST_FIELD2"]+'>' + '<i class="far fa-calendar-alt" style=' + 'font-size:24px;color:#1E90FF' + '></i></></td>';
                html2 += '<td>' + '<input type="button" onClick="deleteProduct(this)" value="Delete Item" />' + '</td>';
                html2 += '</tr>';           
                $('#table2 tbody').html(html2);
              });
            var dateToday = new Date();
            $('.datepicker').datepicker(
              { 

                changeYear: true,
                changeMonth: true,
                format: 'dd/mm/yyyy',
                autoclose: true,
                startDate: new Date()
              });           
            }
    });
});

获取日期数据和更新数组的主要代码如下

$(document).on("change", ".datepicker", function(){
    var oDate = $(this);
    var aIndex = oDate[0].id.split('_');
    aItems[aIndex[1]]["NEW_ITEM-CUST_FIELD2"] = document.getElementById(oDate[0].id).value

 });

编辑：它现在工作。以上代码已更新。

Answer 1

这里是示例：https://jsfiddle.net/3mygd26w/
HTML

Date Picker on input field: <input type="text" id="date1" name="date1"/> <br/>

Date Picker on input field: <input type="text" id="date2" name="date2"/> <br/>

Date Picker on input field: <input type="text" id="date3" name="dat3"/> <br/>

JavaScript：

$('#date1').datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: "m/d/yy"
});
$('#date2').datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: "d/m/yy"
});
$('#date3').datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: "mm/dd/yy"
});

Answer 2

如果您使用的是框架，请尝试在任何模板更改后清空缓存，如果您使用的是 symfony，请检查您写入的是主文件而不是缓存中的文件。

Answer 3

使用 jquery

 <script>
  $( function() {
    $( "#datepicker" ).datepicker({
     dateFormat: 'dd-mm-yy'
    });
  });
  </script>

参考-https://jqueryui.com/datepicker/

Answer 4

我会尽量给出更详细的答案。您的错误是两次初始化 Datepicker。第一次 - 没有dateFormat。当您第二次使用dateFormat 调用它时，它已经被初始化了。相反，如果您打算重用相同的 Datepicker 对象，则应将其分配给一个变量。

更新以反映问题代码更改

$('input.datepicker').datepicker({ dateFormat: 'dd/mm/yyyy'});

仅在插入整个表格后一次调用此初始化代码。

注意：对于 userdate，最好听 change 事件，而不是 focus，否则你会坚持以前的值

$('input.datepicker').change(function(){
  var selectedDate = $(this).val();
  console.log(selectedDate);
})

Answer 5

感谢大家的指导。我已经更新了我的第一篇文章以展示我所做的事情。