I'm somewhat new to jquery and trying to get familiar with coding it.  In my mvc app there is a bootstrap datepicker (not datetimepicker which i couldnt make work)

The problem and challenge is this,

there are about 50 date fields.  They are cast as string within MVC.  In some records some fields will have a date already there, most will be blank.  If there is already a date, it could be any format, if blank the formatting should be 07/04/1776 and actually if should always get converted down to that 07/04/1776 style, which i think is mm/dd/yyyy ?

if you click in the textbox, i made a function to convert whats in the textbox into this format, 

2. $('#Astr').on('click', function (e) {
3.                             alert("clicked");
4.                             var st = $('#Astr').val();
5.                             var dt = new Date(st);
6.                             var day = dt.getDate();
7.                             // alert(day);
8.                             var year = dt.getFullYear();
9.                             var mi = dt.getMonth() + 1;
10.                             var mytxt = mi + '/' + day + '/' + year;
11.                             $('#Astr').val(mytxt);
12.                         })

Trouble comes when i tried to add a button to the textbox area to call the datepicker.  It calls it but does not go away when an item is clicked.  it does not have a clear nor close button

2.  <script type="text/javascript">
3.         function setCalendar()
4.         {
5.             alert("///");
6.             //var date1;
7.             //$('#date1').datepicker('show');
8. 
   
9.             $('#Astr').datepicker('show',{
10.                 format: "MM d, yyyy",
11.                 clearBtn: true,
12.                 autoclose: true
13.             }).on('changeDate', function (e) {
14.                 $.datepicker('hide')
15.                });
16. 
    
17.             $.fn.datepicker.dates['en'] = {
18.                 days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
19.                 daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
20.                 daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
21.                 months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
22.                 monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
23.             };
24.         }
25.     </script>
27. 
    
28. 
    

And the textbox itself that is in the mvc view,

3.  <div class="form-group">
4.                 @Html.LabelFor(model => model.Astr, new { @class = "control-label col-md-3" })
5.                 <div class="col-md-9">
6.                     @Html.EditorFor(model => model.Astr, new { @class = "CreatedOn" })
7.                     @Html.ValidationMessageFor(model => model.Astr)
8.                     
9.                     <button type="button" class="btn-success" id="ddd" onclick="setCalendar()">
10.                         
11.                     </button>
12.                 </div>
13.             </div>

I set the format type of this datepicker to MM d, yyyy because this way it recognizes the month if its text eg. "July"  otherwise datepicker does not know July = 7 and always inserts the current month, September in this case.

Also, the datepicker tends to force its output onto the textbox irregardless, it needs to be blocked so that only if explicitly clicked will its output modify the textbox, which is some important date another user entered.

right now, or at least recently, if the datepicker appears? if you click outside, if the textbox had: July 4, 1776? it fails to read the month and inserts:  09/04/1776, which is what it shows, September 1776 with the day 4 highlighted.

any help or ideas are appreciated