you can use the magento 2 datepicker.
It use the jquery_ui datepicker.
Try this in your phtml:
<script type="text/javascript">
require([
"jquery",
"mage/calendar"
], function($){
$('#datepicker').datepicker({
prevText: '<zurück', prevStatus: '',
prevJumpText: '<<', prevJumpStatus: '',
nextText: 'Vor>', nextStatus: '',
nextJumpText: '>>', nextJumpStatus: '',
monthNames: ['Januar','Februar','März','April','Mai','Juni',
'Juli','August','September','Oktober','November','Dezember'],
monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
'Jul','Aug','Sep','Okt','Nov','Dez'],
dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
showMonthAfterYear: false,
dateFormat:'d.m.yy'
}
);
});
</script>
Example with form:
<div class="field col-sm-6 ">
<div class="response-field-date">
<div class="subtemplate-wrapper">
<label for="" style="" class="">Terminwunsch</label>
<div class="row">
<div class="input-box col-sm-12">
<input name="terminwunsch" id="datepicker" title="Terminwunsch" value="" type="text">
<script type="text/javascript">
require([
"jquery",
"mage/calendar"
], function($){
$('#datepicker').datepicker({
prevText: '<zurück', prevStatus: '',
prevJumpText: '<<', prevJumpStatus: '',
nextText: 'Vor>', nextStatus: '',
nextJumpText: '>>', nextJumpStatus: '',
monthNames: ['Januar','Februar','März','April','Mai','Juni',
'Juli','August','September','Oktober','November','Dezember'],
monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
'Jul','Aug','Sep','Okt','Nov','Dez'],
dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
showMonthAfterYear: false,
dateFormat:'d.m.yy'
}
);
});
</script>
</div>
</div>
</div>
</div>
</div>
Best Answer
To make your code working you have to write below code in your ".js" file.
Reference from: http://jsfiddle.net/rniemeyer/NAgNV/