JQuery Brazilian Portuguese DatePicker

JQuery has a lot of plugins and add-ons which allow you to achieve some powerful customisations.

One such plugin is the JQuery localisation feature which allows you to customise the datepicker depending on the local, i.e. the Country and/or Language.

Firstly you need to include the modified JQuery datepicker javascript file with the following name: jquery.ui.datepicker-xx-XX.js, where 'xx-XX' represents the specific culture, e.g. jquery.ui.datepicker-pt-BR.js.

Then inside that jquery.ui.datepicker-pt-BR.js file you need to insert your culture specific translations, Brazilian Portuguese is below:

jQuery(function ($) {
  $.datepicker.regional['pt-BR'] = {
  closeText: 'Fechar',
  prevText: 'Anter',
  nextText: 'Próx',
  currentText: 'Hoje',
  monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
  'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
  monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun','Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
  dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
  dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
  dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
  weekHeader: 'Sem',
  dateFormat: 'dd/mm/yy',
  firstDay: 0,
  isRTL: false,
  showMonthAfterYear: false,
  yearSuffix: ''
 };
});

And reference that file in your script tags:

<script src="/Scripts/jquery.ui.datepicker-pt-BR.js" ></script>

Use the following code to attach the localised datepicker to a text box.

<input type="text" name="DateOfBirth" id="DateOfBirth"/>

<script> 
  $(function () {
        var culture = 'pt-BR';
        $.datepicker.setDefaults( $.datepicker.regional[ culture ] );
        $("#DateOfBirth").datepicker({
             dateFormat: 'dd/mm/yy',
             yearRange: '1920:2013',
             maxDate: '+0M +0D',
             changeMonth: true,
             changeYear: true
        });
});
</script>