मैं एचटीएमएल 5 प्लेसहोल्डर पाठ कि क्रोम

Question

में दिनांक फ़ील्ड में प्रकट होता है मैं सुखद खोज के लिए है कि निम्नलिखित कोड है, जब Chrome में देखे जाने, एक datepicker renders हैरान था कैसे बदल सकता हूँ:

<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 डेटपिकर के साथ किया जा सकता है। 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>