Ttdfjt

I want to add a datepicker in magento 2 payment method form . Anybody have an idea how to add date picker through knockout js and data-bind in html page please help me on this ?

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>

In my Magento 2 template file, I added following code to display a date picker field :

<?php 
 echo $block->getLayout()
 ->createBlock('MagentoCustomerBlockWidgetDob')
 ->toHtml() 
?>

Yet another approach:

<div class="field date">
 <label for="date" class="label"><span><?= $block->escapeHtml(__('Date')) ?></span></label>
 <div class="control">
 <?=
 $block->getLayout()->createBlock('MagentoFrameworkViewElementHtmlDate')
 ->setData([
 'name' => 'date',
 'id' => 'date',
 'value' => $block->escapeHtmlAttr($block->getFormData()->getDate()),
 'date_format' => 'dd-MM-y',
 'image' => $this->getViewFileUrl('Magento_Theme::calendar.png'),
 'years_range' => '-120y:c+nn',
 'max_date' => '-1d',
 'change_month' => 'true',
 'change_year' => 'true',
 'show_on' => 'both',
 'first_day' => 1
 ])
 ->toHtml()
 ?>
 </div>
</div>