How Do I Change The Html5 Placeholder Text That Appears In Date Field In Chrome

I was pleasantly surprised to discover that the following code, when viewed in Chrome, renders a datepicker: Also, the WebKit implementation says it's fixed.

Solution 2:

Older question, but here is the solution I recently had to use.

You will not be able to use the HTML5 date field, but this can be done with 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 + '}');
    returnfalse;
});

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

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