Solution 1 :

I setup the following test using jQuery UI.

$(function() {
  // date functionality
  $.datepicker.setDefaults($.datepicker.regional["sa"]);
  $('.input-daterange input').datepicker({
    dateFormat: "dd-mm-yy"
  });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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="d-flex justify-content-start">
  <div class="col-xl-10.5 col-lg-10.5 col-md-10 col-sm-10.5 col-10.5">
    <div class="input-daterange input-group" id="datepicker">
      <input type="text" class="input-sm form-control" name="from" placeholder="startdate" />
      <span class="input-group-addon">To</span>
      <input type="text" class="input-sm form-control" placeholder="enddate" />
    </div>
  </div>
</div>
<br/>

The $.datepicker.regional attribute holds an array of localizations, indexed by language code, with "" referring to the default (English). Each entry is an object with the following attributes: closeText, prevText, nextText, currentText, monthNames, monthNamesShort, dayNames, dayNamesShort, dayNamesMin, weekHeader, dateFormat, firstDay, isRTL, showMonthAfterYear, and yearSuffix.

Problem :

I have the code for date picker using JqueryUI, i want to use my timezone(SA region). The date format should be ‘dd-mm-yy’ But my UI on my text field is 01/08/2020. Is this correct format of doing this, kindly please assist to improve this better, thanks.

<!---DatePicker for startDate and endDate.
   ----> 
   <div class="d-flex justify-content-start">
   <div class = "col-xl-10.5 col-lg-10.5 col-md-10 col-sm-10.5 col-10.5">
 <div class="input-daterange input-group" id="datepicker">
   <input type="text" class="input-sm form-control" name="from" placeholder="startdate"/>
   <span class="input-group-addon">To</span>
   <input type="text" class= "input-sm form-control" placeholder="enddate"/>
   </div>
   </div>
  </div><br/>

// date functionality
  $(document).ready(function(){
  $('.input-daterange').datepicker({
   dateFormat: "dd-mm-yy",
    autoclose:true

    });
  });

Comments

Comment posted by Twisty

autoClose

By