How to change date format using JqueryUI based on timezone? - html

Question

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
});
});

Answer 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.