Skip to content

Instantly share code, notes, and snippets.

@Javarome

Javarome/index.html

Created September 3, 2018 10:02
Show Gist options
  • Save Javarome/de06a0b299af866c2519ce9df678ecd4 to your computer and use it in GitHub Desktop.
Save Javarome/de06a0b299af866c2519ce9df678ecd4 to your computer and use it in GitHub Desktop.
Download ZIP
Touch date input with placeholder
Raw
index.html
<body ng-app="dateApp">
<p>Touch-enabled devices (and Chrome) support <code>&lt;input type="date"&gt;</code> <a target="_blank" href="https://stackoverflow.com/questions/20321202/not-showing-placeholder-for-input-type-date-field/30442790#30442790">but the relevant fields UI do not allow placeholders</a>.</p>
<p>Here is a date input with a placeholder:</p>
<!--p>
Text : <date-input id="textDate" placeholder="Enter a date" data-mode="text"></date-input>
</p-->
<p>
Native as text : <date-input id="mobileDate" placeholder="Enter a date"></date-input>
</p>
<!--p>
Native : <date-input id="desktopDate" placeholder="Enter a date" data-mode="native"></date-input>
</p-->
<p>Try it from any touch-enabled device!</p>
</body>
Raw
script.typescript
class FcDateInput {
constructor($element) {
this.$element = $element;
}
$onInit() {
this.id = this.$element[0].id;
if (!this.mode) {
this.mode = 'text';
// if (this.$element.parent().width() < 480) {
this.mode = 'native-as-text';
// }
}
this.type = this.mode === 'text' ? 'text' : 'date';
this.dateModel = '';
}
changed() {
if (this.dateModel) {
this.dateModel = this.dateModel.toLocaleString('en', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
});
var date = new Date(this.dateModel);
this.dateValue = this.dateModel;
} else {
this.dateValue = '';
}
}
}
angular.module('dateApp', [])
.component('dateInput', {
bindings: {
placeholder: '@?',
/**
* text:
* native:
* native-as-text:
*/
mode: '@'
},
template: `<div class="date-input {{ctrl.mode}}">
<input class="input-field" ng-model="ctrl.dateModel" id="dateInput-{{ctrl.id}}" placeholder="{{ctrl.placeholder}}" type="{{ctrl.type}}" ng-change="ctrl.changed()"><label for="dateInput-{{ctrl.id}}" class="input-field">
<span ng-show="!ctrl.dateValue" class="place-holder">{{ctrl.placeholder}}</span>
<span ng-show="ctrl.dateValue" class="value-holder">{{ctrl.dateModel}}</span>
</label>
</div>`,
controller: FcDateInput,
controllerAs: 'ctrl'
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
Raw
style.scss
.input-field {
margin: 0;
font-family: Arial;
border-radius: 0.2em;
line-height: 1.5;
border: 2px inset lightgray;
height: 1em;
width: 15em;
font-size: 1em;
padding: 0.5em;
}
$margin: 0.5em;
.date-input {
display: inline-block;
position: relative;
&.text,
&.native {
input + label {
display: none;
}
}
&.native-as-text input + label {
left: 0;
position: absolute;
background: white;
line-height: 1em;
.place-holder {
color: #aaa;
}
}
}
output {
display: block;
}
Raw
touch-date-input-with-placeholder.markdown

Touch date input with placeholder

Mobile/tablet date input are not designed to display a placeholder. Here is a workaround.

A Pen by Jérôme Beau on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment