2017-08-24 222 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>