내가 크롬에서 본 다음 코드가하는 날짜 선택기 렌더링 것을 발견하고 놀랐다 크롬

Question

에서 날짜 필드에 표시되는 HTML5의 자리 표시 자 텍스트 변경하려면 어떻게해야 : 그러나

<input type="date" name="wdate" id="wdate" value="" placeholder="date of purchase" /> 

를 자리 표시 자 텍스트 대신 "날짜/월/년"이 표시됩니다.

어떻게 자리 표시 자 텍스트를 변경하고 자신을 사용할 수 있습니까?

은 내가 이미 시도 :

<script> 
    $("#wdate").attr("placeholder", "Day/Month/Year of purchase"); 
</script> 

하지만 아무 소용.

Answer 1

The date type doesn't support placeholder attribute. 또한, 웹킷 구현은 fixed.

Answer 2

오래된 질문이지만, 여기에 내가 최근에 사용했던 솔루션을 말한다.

HTML5 날짜 필드를 사용할 수 없지만 jQuery UI datepicker를 사용하여이 작업을 수행 할 수 있습니다. 텍스트 상자가 비어있는 경우 http://jsfiddle.net/egeis/3ow88r6u/

var $datePicker = $(".datepicker"); 
 

 
// We don't want the val method to include placehoder value, so removing it here. 
 
var $valFn = $.fn.val; 
 
$.fn.extend({ 
 
    val: function() { 
 
     var valCatch = $valFn.apply(this, arguments); 
 
     var placeholder = $(this).attr("placeholder"); 
 
     
 
     // To check this val is called to set value and the val is for datePicker element 
 
     if (!arguments.length && this.hasClass('hasDatepicker')) { 
 
      if (valCatch.indexOf(placeholder) != -1) { 
 
       return valCatch.replace(placeholder, ""); 
 
      } 
 
     } 
 
     return valCatch; 
 
    } 
 
}); 
 

 
// Insert placeholder as prefix in the value, when user makes a change. 
 
$datePicker.datepicker({ 
 
    onSelect: function(arg) { 
 
     $(this).val($(this).attr("placeholder") + arg); 
 
    } 
 
}); 
 

 
// Display value of datepicker 
 
$("#Button1").click(function() { 
 
    alert('call val(): {' + $datePicker.val() + '}'); 
 
}); 
 

 
// Submit 
 
$('form').on('submit', function() { 
 
    $datePicker.val($datePicker.val()); 
 
    alert('value on submit: {' + $datePicker[0].value + '}'); 
 
    return false; 
 
});

.ui-datepicker { width:210px !important; }

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/blitzer/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
 
<form method="post"> 
 
    <p>HTML5 Date: <input type="date" placeholder="html5 date:" /></p> 
 
    <p>jQuery DatePicker: <input type="text" class="datepicker" placeholder="Start date:" /></p> 
 
    <p><input id="Button1" type="button" value="Get DatePicker Value" title="Get DatePicker Value" /></p> 
 
    <p><input type="submit" text="fire submit" /></p> 
 
    <p>Original Source for this <a target="_blank" href="http://jqfaq.com/how-to-add-some-custom-text-to-the-datepickers-text-field/">JQFaq Question</a></p> 
 
</form>