Jquery UI Date picker with unknown date option

Checkbox value to input field

by Vishnuprasad ps

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<div class="date-4">
<input type="text" class="datepicker" id="datepicker">
</div>

<div class="date-2"><label>UNK DD</label><input type="checkbox" value="UNK DD"></div>
<div class="date-2"><label>UNK MM</label><input type="checkbox" value="UNK MM"></div>
<div class="date-2"><label>UNK YY</label><input type="checkbox" value="UNK YY"></div>

CSS

* {
  box-sizing: border-box;
}
body {
  font-family:sans-serif;
}
input[type=text] {
  width:100%;
}
.date-4, .date-2 {
  float:left;
}
.date-4 {
  width:40%;
  padding-right:20px;
}
.date-2 {
  width:20%;
}
.date-2 label {
  font-size: 12px;
}

JavaScript

$(".datepicker").datepicker({
        dateFormat: "yy-mm-dd",
        changeMonth: true,
        changeYear: true,
        yearRange: "c-150:c+30",
});

$(document).ready(function(){
    $checks = $(":checkbox");
    $checks.on('change', function() {
        var string = $checks.filter(":checked").map(function(i,v){
            return this.value;
        }).get().join(" / ");
        $('#datepicker').val(string);
    });
});