I am styling a form with bootstrap. I have an input field where I want the user to insert a date. The HTML is coded this way:
<div class="form-group">
<label for="entry_date">Date of entry:</label>
<input type="date" name='entry_date' class="form-control" id="entry_date"
<span class="help-block">Some helpful words here</span>
</div>
Bootstrap populates this field automatically with a placeholder which says dd/mm/yyyy
.
How can I overwrite this? I need it so I can repopulate the field (eg. when reloading the form after a partial submission)
The placeholder attribute does not work with the input type Date, so place any value as a placeholder in the input type Date. You can use the onfocus=”(this. type='date') inside the input filed.
To set and get the input type date in dd-mm-yyyy format we will use <input> type attribute. The <input> type attribute is used to define a date picker or control field. In this attribute, you can set the range from which day-month-year to which day-month-year date can be selected from.
Placeholders can be used to enhance the experience of your application. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility.
<input type="text" placeholder="A red placeholder text..">
It's not a bootstrap problem, it's the new HTML5 date-input control
Just use the value attribute as below:
<input type="date" name='entry_date' class="form-control" id="entry_date" value="2012-12-12">
Other attributes are documented on the W3C page here
A JSBIN showing the attribute in action here
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With