2017-08-24 126 views
1

我有我的代码:显示日期作为输入型DD-MM-yyyy格式=日期

<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'); ?>> 

我需要显示我的在下面的日期格式DD-MM-YYYY格式日期在textbox

+1

'类型=“日期”'为Firefox和IE – Durga

+1

可能的复制无法正常工作[有没有办法来改变输入类型=“日期”格式?(https://stackoverflow.com/questions/7372038/is-there-any-way-to-change-input-type-date-format) – BobbyTables

+0

https://jsfiddle.net/v1pxxsj1/看到这个 – Blue

回答

0

我会建议是让与一年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; 
    } 

使用您在函数返回你只需要插入你这里的值希望这样你的情况你输入

希望这有助于:)

+0

没有人工作的人帮助我等待您的宝贵答复 – HariPriya

-1

您可以使用下面的代码来实现这一来显示它。

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

1

请注意:<input type="date">在IE和Firefox不支持。因此,实施它不是一个好主意,因为它是针对强大的用户界面/用户体验设计的,并且可能会引发更多的错误。 你应该使用jQuery的datepicker,moment.js或两者的组合来实现你的需求。

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

在这个例子中:

  • 我通过形成yyyy-mm-dd格式的日期字符串和设置属性value
  • 分配今天的日期<input type="date">每当我在改变之日起,我形成了在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){ 
 
     \t 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(){ 
 
     \t 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>