<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="container"> <div class="row"> <input name="date" id="datepicker" class="form-control" type="text" value="12-02-2023"> <span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar" id="butt"></i></span> <input type="text" id="day" class="form-control"> <input type="text" id="month" class="form-control"> </div> </div>

$( function() { var weekday=new Array(7); weekday[0]="Sunday"; weekday[1]="Monday"; weekday[2]="Tuesday"; weekday[3]="Wednesday"; weekday[4]="Thursday"; weekday[5]="Friday"; weekday[6]="Saturday"; $( "#datepicker" ).datepicker({ dateFormat: 'mm-dd-yy', inline: true, onSelect: function(dateText, inst) { var date = $(this).datepicker('getDate'), day = date.getDate(), month = date.getMonth() + 1, year = date.getFullYear(); var dayOfWeek = weekday[date.getUTCDay()+1]; $("#day").val(dayOfWeek); $("#month").val(month); } }); } );