Information HTI Information HTI - 1 year ago 58
AngularJS Question

change date format of datepicker

i am creating a web app in angularjs with asp.net

here is my javascript of a datepicker

<script>
$('#sandbox-container input').datepicker({
autoclose: true
});

$('#sandbox-container input').on('show', function (e) {
console.debug('show', e.date, $(this).data('stickyDate'));

if (e.date) {
$(this).data('stickyDate', e.date);
}
else {
$(this).data('stickyDate', null);
}
});

$('#sandbox-container input').on('hide', function (e) {
console.debug('hide', e.date, $(this).data('stickyDate'));
var stickyDate = $(this).data('stickyDate');

if (!e.date && stickyDate) {
console.debug('restore stickyDate', stickyDate);
$(this).datepicker('setDate', stickyDate);
$(this).data('stickyDate', null);
}
});
</script>


and code in aspx looks like

<div id="sandbox-container" class="row">
<div class="col-lg-offset-4 col-md-offset-4 col-sm-offset-4 col-xs-offset-2">

<div class="row">

<input type="text" ng-model="datefrm" date-format="dd-MM-yyyy" class="textboxandbutton" placeholder="From" date-only />

</div>

</div>

<div class="col-lg-offset-4 col-md-offset-4 col-sm-offset-4 col-xs-offset-2">

<div class="row">

<input type="text" ng-model="dateto" date-format="dd-MM-yyyy" class="textboxandbutton" placeholder="To" date-only />

</div>

</div>
</div>


current format is MM/dd/yyyy


and this is how date is showing: 02/08/2017


and i want to change date format to


dd-MM-yyyy

and the data which i want to see:08-02-2017


what i need to do here?

Answer Source

Just add format option of datepicker:

format: 'dd-mm-yyyy'

Please find below snippet for more information

$('#sandbox-container input').datepicker({
    autoclose: true,
    format: 'dd-mm-yyyy'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css" rel="stylesheet"/>

<div id="sandbox-container">
    <input type="text" type="text" class="form-control" />
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download