How could I customize the date range picker with date format and hint text with i18n

Question

I want to customize my calendar,

here's current code.

How could I change it to match the new requirement.

:javascript
  $(document).ready(function() {
    $('#date-range-picker').daterangepicker(
      {
        format: 'YYYY/MM/DD',
        dateLimit: { days: 30 }
      },
      function(start, end, label) {
        console.log(start.toISOString(), end.toISOString(), label);
      }
    );
  });

Duplessis

Answer 1

You have pretty good documentation and Configuration Generator at daterangepicker site. You should use locale object, something like this:

$(document).ready(function() {
    $('#date-range-picker').daterangepicker({
        format: 'YYYY/MM/DD',
        dateLimit: { days: 30 },
        locale: {
            "format": "MM/DD/YYYY",
            "separator": " - ",
            "applyLabel": "Apply",
            "cancelLabel": "Cancel",
            "fromLabel": "From",
            "toLabel": "To",
            "customRangeLabel": "Custom",
            "daysOfWeek": [
                "Su",
                "Mo",
                "Tu",
                "We",
                "Th",
                "Fr",
                "Sa"
            ],
            "monthNames": [
                "January",
                "February",
                "March",
                "April",
                "May",
                "June",
                "July",
                "August",
                "September",
                "October",
                "November",
                "December"
            ],
            "firstDay": 1
        },
    },
    function(start, end, label) {
        console.log(start.toISOString(), end.toISOString(), label);
    });
});

Gigantes

Answer 2

I assume you use daterangepicker and you have an input field like this:

<input id="date-range-picker" type="text">

Be sure jquery and daterangepicker libraries are in place. Then you should be able to customize the field. I think you forgot to put the "format" option into the "locale" object:

$(document).ready(function() {
    $('#date-range-picker').daterangepicker({
        "dateLimit": {
            "days": 7
        },
        "locale": {
            "format": "YYYY/MM/DD"
        }
    });
});

See Configuration Generator to play with daterangepicker and get valid configurations. Check the locale option, so you can put in your chinese translations.

Coupe