Question

我有我的代码：

<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 格式显示我的日期。

Answer 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;
  }

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

希望这会有所帮助：）

Answer 2

请注意：IE和Firefox不支持<input type="date">。因此，在强大的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>

Answer 3

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

<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}" >

输入类型=日期的日期显示为dd-mm-yyyy格式

3 个答案: