6

I was pleasantly surprised to discover that the following code, when viewed in Chrome, renders a datepicker:

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

However, the placeholder text is ignored and "Date/Month/Year" is shown instead.

How can I change the placeholder text and use my own?

I have already tried:

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

but to no avail.

War10ck
  • 12,387
  • 7
  • 41
  • 54
Jez D
  • 1,461
  • 2
  • 25
  • 52
  • placeholder will display only if the text box is empty, otherwise we cannot change it. – vusan Oct 12 '12 at 14:13
  • 4
    The placeholder attribute is supposed to be a hint about how to fill in the form (i.e. an example or description of the format), it is explicitly **not** a replacement for a `label` element. Put a `label` next to the field. – Quentin Oct 12 '12 at 14:20
  • 1
    The field is empty. It shows this exact text immediately when the page loads "Day/Month/Year" exactly as I have just written it (but without the quotation marks). – Jez D Oct 12 '12 at 14:20
  • Hi Quentin. Yes, you're right. But, I have been instructed to do without labels (I know it's semantically incorrect) – Jez D Oct 12 '12 at 14:22
  • Does it work with other browsers besides chrome? I think it's just not implemented. – nycynik Oct 12 '12 at 15:00
  • 1
    My placeholder show in other supporting browsers, but Chrome replaces it with it's own – Jez D Oct 12 '12 at 15:15
  • Possible duplicate of [Remove default text/placeholder present in html5 input element of type=date](http://stackoverflow.com/questions/28686288/remove-default-text-placeholder-present-in-html5-input-element-of-type-date) – Maks3w Mar 02 '16 at 08:27

2 Answers2

1

The date type doesn't support placeholder attribute. Also, the WebKit implementation says it's fixed.

int32_t
  • 5,774
  • 1
  • 22
  • 20
1

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 + '}');
    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>
Eddie
  • 5,050
  • 8
  • 37
  • 46