JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<div id="sandbox-container">
  <div id="positionSorter" style="margin-top:10%">
    <a id="anotherDatelink" title="reset" class="pull-left" href="#" onclick="resetStartDatePicker()">reset</a>
  </div>
  <div class="input-group date" data-provide="datepicker" style="float:right">
    <input type="text" class="form-control  @semanticClass" name="@Model.Name" id="@Model.Id" title="@Model.Name" value="@val">
    <div class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </div>
  </div>
</div>

JavaScript

$('#sandbox-container .input-group').datepicker({
   language: "he",
   rtl: true,
   autoclose: true,
   todayHighlight: true,
   format: "dd/mm/yyyy"
 });

 $('#anotherDatelink').on('click', function(e) {
   $("#sandbox-container").find("input").val('01/01/2010');
   $("#sandbox-container .input-group").datepicker('hide');
 });