将日期显示为 dd-mm-yyyy 格式输入 type=date答案

【问题标题】：Display date as dd-mm-yyyy format for input type=date将日期显示为 dd-mm-yyyy 格式输入 type=date
【发布时间】：2018-02-01 21:03:12
【问题描述】：

我有我的代码：

<input type="date" class="form-control" id="training_date" 
name="training_date" placeholder=" select" value="" 
onfocus="(this.type='date')" 
onfocusout="(this.type='date')" max=<?php echo date('Y-m-d'); ?>>

我需要以textbox 中的以下日期格式dd-mm-yyyy 格式显示我的日期。

【问题讨论】：

type="date" 不适用于 Firefox 和 IE
Is there any way to change input type="date" format?的可能重复
jsfiddle.net/v1pxxsj1 看到这个
使用jqueryui.com/datepicker 它支持多种浏览器，您可以根据需要格式化日期..
type="date" 的全部意义在于显示浏览器 HTML-5 日期选择器（仅限 Chrome 和 Edge），它显示用户文化中的日期，而不是您的

标签： javascript jquery html date

【解决方案1】：

我建议用一年中的 12 个月制作一个数组（因为永远不会改变）

_currentDate() {
    var date = new Date();
    for (var i = 0; this.months.length > i; i++) {
      if (date.getMonth() === i) {
        var displayMonth = this.months[i].month;
      }
    }
    var displayDate = date.getDate() + ' ' + displayMonth + ' ' + date.getFullYear();
    return displayDate;
  }

使用您在函数中返回的值，您只需将其插入要显示的位置，以便在您的情况下输入

希望这会有所帮助:)

【讨论】：

没有任何工作有人帮我等待您的宝贵回复

【解决方案2】：

您可以使用下面的代码来实现。

&lt;input type="date" class="form-control" id="training_date" name="training_date" placeholder=" select" value="" onfocus="(this.type='date')" onfocusout="(this.type='date')" pattern="\d{1,2}/\d{1,2}/\d{4}" &gt;

【讨论】：

【解决方案3】：

请注意：<input type="date"> 在 IE 和 Firefox 中不受支持。因此，实施它不是一个好主意，因为它违背了健壮的 UI/UX 设计，并且可能会招致以后的错误。您应该使用 jquery 的 datepicker、moment.js 或两者的组合来满足您的要求。

结束问题并提供可以完成和测试的内容。这是实现。

在这个例子中：

我将今天的日期分配给<input type="date">，方法是形成yyyy-mm-dd 格式的日期字符串并设置属性value
每当我更改#datepicker 中的日期时，我都会形成一个dd-mm-yyyy 格式的日期字符串并将其作为值提供给#textbox

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
  var d = new Date();      
        
   function twoDigitDate(d){
      return ((d.getDate()).toString().length == 1) ? "0"+(d.getDate()).toString() : (d.getDate()).toString();
    };
        
    function twoDigitMonth(d){
     	return ((d.getMonth()+1).toString().length == 1) ? "0"+(d.getMonth()+1).toString() : (d.getMonth()+1).toString();
    };    
      
    var today_ISO_date = d.getFullYear()+"-"+twoDigitMonth(d)+"-"+twoDigitDate(d); // in yyyy-mm-dd format
        
    document.getElementById('datepicker').setAttribute("value", today_ISO_date);
       
     var dd_mm_yyyy;
     $("#datepicker").change( function(){
       	changedDate = $(this).val(); //in yyyy-mm-dd format obtained from datepicker
        var date = new Date(changedDate);
        dd_mm_yyyy = twoDigitDate(date)+"-"+twoDigitMonth(date)+"-"+date.getFullYear(); // in dd-mm-yyyy format
        $('#textbox').val(dd_mm_yyyy);
        //console.log($(this).val());
        //console.log("Date picker clicked");
        });
        
    });

</script>
</head>
<body>
  <div style="width: 50%;height:50px; float:left;">
  Enter your Birthday!!:<br>
  <input id="datepicker" type="date" name="bday" style="margin-bottom: 200px;"></br><br>
  </div>

  <div style="width: 50%;height:50px; float:right;">
  Date chosen(dd-mm-yyyy):<br>
  <input id="textbox" type="text" value="dd-mm-yyyy"></input>
  </div>
</br></br></br></br></br></br>
<p><strong>Note:</strong> type="date" is not supported in Firefox, or Internet Explorer 11 and earlier versions.</p>

</body>
</html>

【讨论】：

input type="date" 自 Firefox 57（2017 年 11 月发布）起受支持。