Date format jquery and localization

Question

How to set dd/mm/yy on departureDate input field. But i'm thinking to change both format to be Indonesian localization like "Senin 05 Agustus 2015".

Is it possible? Thanks in advance.

jsfiddle link

Arrive:
<input type="text" id="arrivalDate" class="datepicker">
<br />Nights:
<input type="text" id="numOfNights" value="1">
<br />Depart:
<input type="text" id="departureDate">

jquery script

$('#arrivalDate').datepicker({

    dateFormat: "dd/mm/yy",
    onSelect: function (dateStr) {
        var nights = parseInt($('#numOfNights').val());
        var depart = $.datepicker.parseDate('dd/mm/yy', dateStr);
        depart.setDate(depart.getDate() + nights);
        $('#departureDate').val(depart);
    }
});

$('#numOfNights').change(function () {
    var nights = parseInt($('#numOfNights').val());
    var depart = $.datepicker.parseDate('dd/mm/yy', $('#arrivalDate').val());
    depart.setDate(depart.getDate() + nights);
    $('#departureDate').val(depart);
});

You can take a look at this [answer](http://stackoverflow.com/a/9519493/3863146), and you can also use this [moment.js](http://momentjs.com/) for getting localised time. — Sahil, Aug 26 '15 at 09:49
@Sahil well then, how to set departuredate to same value as arrivalDate? — Harriz, Aug 26 '15 at 10:00

Sahil · Accepted Answer · 2015-08-26T15:01:18.523

You can use moment.js like this:

    moment.locale('id'); //'id'--> Bahasa Indonesia
    $('#arrivalDate').datepicker({

        dateFormat: "d/MM/yy",
        onSelect: function (dateStr) {
            var nights = parseInt($('#numOfNights').val());
            var depart = $.datepicker.parseDate('d/MM/yy', dateStr);
            depart.setDate(depart.getDate() + nights);
            var depart_date = moment(depart).format('DD/MMMM/YYYY');
            console.log('date is '+depart_date);
            $('#departureDate').val(depart_date);
        }
    });

    $('#numOfNights').change(function () {
        var nights = parseInt($('#numOfNights').val());
        var depart = $.datepicker.parseDate('d/MM/yy', $('#arrivalDate').val());
        depart.setDate(depart.getDate() + nights);
         var depart_date = moment(depart).format('DD/MMMM/YYYY');
        $('#departureDate').val(depart_date);
    });

Demo available here.

Edited

Adding one more option using jQuery datepicker itself. Just put this localization CDN after jquery-ui.js

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>

And then change the code like this:

//setting the default locale to Indonesian
$.datepicker.setDefaults($.datepicker.regional["id"]);
    $('#arrivalDate').datepicker({

            dateFormat: "d/MM/yy",

            onSelect: function (dateStr) {
                var nights = parseInt($('#numOfNights').val());
                var depart = $.datepicker.parseDate('d/MM/yy', dateStr);
                depart.setDate(depart.getDate() + nights);
                $('#departureDate').val($.datepicker.formatDate('d/MM/yy', depart));
            }
        });

        $('#numOfNights').change(function () {
            var nights = parseInt($('#numOfNights').val());
            var depart = $.datepicker.parseDate('d/MM/yy',        $('#arrivalDate').val());
            depart.setDate(depart.getDate() + nights); 
             $('#departureDate').val($.datepicker.formatDate('d/MM/yy', depart));
        });
    $(function() {
            $( "#departureDate" ).datepicker({dateFormat: "d/MM/yy"});
        });

jsFiddle here.

Awesome, thanks. but last i was add $(function() {$( "#departureDate" ).datepicker();}); after #numOfNights script. The problem is, departureDate doesnt highlight current date of input field. Any idea? — Harriz, Aug 26 '15 at 11:53
**#departureDate** doesnt highlight current date of which input field? — Sahil, Aug 26 '15 at 13:31
http://jsfiddle.net/JKGvD/660/ the depart field doesnt highlight, if you select date on arrive field you will see orange color highlighting the date you choose. But not on depart field — Harriz, Aug 26 '15 at 13:59
@Harriz, please check the updated answer. You can just add the localization CDN available for jquery datepicker. — Sahil, Aug 26 '15 at 15:04

Date format jquery and localization

1 Answers1