Please note this document is included as a courtesy to aide developers in customizations related to Product Customizer, so you should be familiar with HTML / liquid to implement changes listed below.
We do plan to add support for the HTML "number" input type very soon within the app, but if you want to make this change currently, you could replace a text field with a number input instead.
Here's an example that replaces any text input whose display name contains "date" with an HTML 5 number input (careful of browser support!) that allows numbers 1 to 31.
<script>
/* replace Product Customizer text inputs for date with number inputs */
$( document ).ready( function() {
var date = $( 'input[name*="date"]' );
$( date ).attr({ type: 'number', maxlength: '2', min: '1', max: '31', step: '1' });
} );
</script>If you run into "Error: type property can't be changed", then you can also use the jQuery "clone" function, then destroy the text field once it's replaced.
<script>
/* replace Product Customizer text inputs for date with number inputs */
$( document ).ready( function() {
var date = $( 'input[name*="date"]' );
$( date ).clone().attr({ type: 'number', maxlength: '2', min: '1', max: '31', step: '1' }).insertAfter( date ).prev().remove();
} );
</script>