jhipster – change ngb-datepicker date format

Screenshot from 2018-01-11 16-16-39

When you generate an entity with jhipster entity and add a LocalDate the UI generated uses ng-bootstrap Datepicker. To change the format you need to add an implementation of the class NgbDateParserFormatter. To change the language you need to provide an implementation of the class NgbDatepickerI18n (as shown in the examples).

First create the class files, i.e.

/webapp/src/main/webapp/app/blocks/config/ng-bootstrap.date-parser-formatter.ts

import { Injectable } from '@angular/core';
import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';

function padNumber(value: number) {
    if (isNumber(value)) {
        return `0${value}`.slice(-2);
    } else {
        return "";
    }
}

function isNumber(value: any): boolean {
    return !isNaN(toInteger(value));
}

function toInteger(value: any): number {
    return parseInt(`${value}`, 10);
}


@Injectable()
export class NgbDateParserFormatterEsMX extends NgbDateParserFormatter {
    parse(value: string): NgbDateStruct {
        if (value) {
            const dateParts = value.trim().split('/');
            if (dateParts.length === 1 && isNumber(dateParts[0])) {
                return {year: toInteger(dateParts[0]), month: null, day: null};
            } else if (dateParts.length === 2 && isNumber(dateParts[0]) && isNumber(dateParts[1])) {
                return {year: toInteger(dateParts[1]), month: toInteger(dateParts[0]), day: null};
            } else if (dateParts.length === 3 && isNumber(dateParts[0]) && isNumber(dateParts[1]) && isNumber(dateParts[2])) {
                return {year: toInteger(dateParts[2]), month: toInteger(dateParts[1]), day: toInteger(dateParts[0])};
            }
        }
        return null;
    }

    format(date: NgbDateStruct): string {
        let stringDate: string = "";
        if(date) {
            stringDate += isNumber(date.day) ? padNumber(date.day) + "/" : "";
            stringDate += isNumber(date.month) ? padNumber(date.month) + "/" : "";
            stringDate += date.year;
        }
        return stringDate;
    }
}

<project>/direccion-juridica/webapp/src/main/webapp/app/blocks/config/ng-bootstrap-datepicker-i18n.ts

import {Component, Injectable} from '@angular/core';
import {NgbDatepickerI18n} from '@ng-bootstrap/ng-bootstrap';

const I18N_VALUES = {
    'es-MX': {
        weekdays: ['Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab', 'Dom'],
        months: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
    }
    // other languages you would support
};

// Define a service holding the language. You probably already have one if your app is i18ned. Or you could also
// use the Angular LOCALE_ID value
@Injectable()
export class I18n {
    language = 'es-MX';
}

// Define custom service providing the months and weekdays translations
@Injectable()
export class CustomDatepickerI18n extends NgbDatepickerI18n {

    constructor(private _i18n:I18n) {
        super();
    }

    getWeekdayShortName(weekday:number):string {
        return I18N_VALUES[this._i18n.language].weekdays[weekday - 1];
    }

    getMonthShortName(month:number):string {
        return I18N_VALUES[this._i18n.language].months[month - 1];
    }

    getMonthFullName(month:number):string {
        return this.getMonthShortName(month);
    }
}

finally define the provider in <project>/direccion-juridica/webapp/src/main/webapp/app/app.module.ts

import ...

...
    providers: [
        ProfileService,
        customHttpProvider(),
        PaginationConfig,
        UserRouteAccessService,
        I18n,
        {provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n},
        {provide: NgbDateParserFormatter, useClass: NgbDateParserFormatterEsMX}
    ],
    bootstrap: [ JhiMainComponent ]
})
...

to change the displayed format of dates in tables you can replace in files date:'mediumDate' with date:'dd/MM/yyyy' and date:'medium' with date:'dd/MM/yyyy HH:mm' for example.

for ZonedDateTime it uses a datetime-local input which tries to use browser configuration -if supported-
Due to, and I’m quoting this from Mozilla

Date/time inputs sound convenient at first glance; they provide an easy UI 
for choosing dates and times, and they normalize the data format sent to the 
server, regardless of the user's locale. However, there are issues with 
 because of the **limited browser support.**

So I would recommend breaking DateTimes into a Datepicker and a Timepicker from ng-bootstrap and configuring as above.

sources:
https://stackoverflow.com/questions/40664523/angular2-ngbdatepicker-how-to-format-date-in-inputfield

https://github.com/ng-bootstrap/ng-bootstrap/issues/754#issuecomment-247767027

Anuncios

AngularJS – Ejecutar una función de javascript en una plantilla (template)

Screenshot from 2014-04-16 12:11:30

Para dar formato a una fecha, y muchas cosas más, existe una librería llamada Moment.js. Para utilizar sus métodos desde una plantilla encontré este post que nos explica cómo crear un filtro para lograrlo.

El filtro quedaría de la siguiente manera

angular.module('myModule').
  filter('fromNow', function() {
    return function(dateString) {
      return moment(dateString).fromNow()
    }
  })

y el template

{{ reply.createdDate | fromNow }}

Funciona muy bien, pero tendríamos que crear un filtro para cada función de la librería que quisieramos utilizar. La ventaja es que la implementación del filtro queda independiente de la vista (template).

Otra opción sería poner el objeto moment disponible en la vista de la siguiente manera

angular.module('myModule', []).
controller('myController', ['$scope', function($scope){
 $scope.moment = moment
}])

y en la plantilla

{{ moment(reply.createdDate).fromNow() }}

Fuentes:

http://www.34m0.com/2012/07/angularjs-user-friendly-date-display.html
http://stackoverflow.com/questions/12466661/using-helper-methods-while-templating-with-angular-js
http://momentjs.com/

BIRT – Formato de fecha desde un script


Tengo un encabezado estándar que uso en la mayoría de reportes, el cual he compartido a través de una librería. El detalle es que el título para cada reporte es diferente, así que en la plantilla coloqué etiquetas cuyo valor depende del parámetro que se les pase. Es común también que el título contenga el período que comprende el reporte. El formato de fecha que comunmente utilizamos es “dd/MM/yyyy” p. ej. 14/06/2011. Para dar este formato a las fechas -que recibo como párametros- utilizo el siguiente código en el evento “initialize” del reporte:

importPackage(Packages.java.text);
sdf = new SimpleDateFormat(“dd/MM/yyyy”);
params[“Titulo”]=”Reporte del “+sdf.format(params[“FechaInicio”])+” al “+sdf.format(params[“FechaFin”]);

Fuentes:
Eclipse Forums

GWT – Darle formato a una fecha


En Java, cuando quiero darle formato a una fecha o “parsear” una cadena para convertirla en un objeto Date, utilizo la clase SimpleDateFormat de la siguiente forma

SimpleDateFormat fmtDate=new SimpleDateFormat(“dd/MM/yyyy”);
String fecha=fmtDate.format(new Date());

Esto lo podemos hacer sin problemas en el servidor 😉 pero, que pasa cuando lo intentamos en el Cliente. Bueno, pues tenemos que utilizar la clase DateTimeFormat de la siguiente manera

DateTimeFormat fmtDate=DateTimeFormat.getFormat(“dd/MM/yyyy”);
String fecha=fmtDate.format(new Date());

Java – Concatenar RTF’s

Para concatenar varios archivos RTF’s en un solo RTF lo unico que tenemos que hacer es:

    remover la etiqueta rtf de fin de documento del primer archivo
    remover la etiqueta de inicio de documento y fin de documento de archivos subsecuentes
    remover la etiqueta de inicio de documento del ultimo archivo

esta idea surgio a partir de este post.
El problema es identificar la etiqueta de inicio de documento, ya que depende de la codificacion que se utilizo para crear el archivo. Aqui dejo el codigo que utilicé, espero posteriormente mejorarlo -mediante el uso de expresiones regulares– para que pueda concatenar cualquier RTF (independiente de la codificación). Si alguien sabe como hacer esto, le agradecería deje un comentario ;-).
Los documentos de entrada como el documento que se regresa son representados como bytes, para que sea más fácil su manejo -ej. documentos almacenados en la base de datos-

private byte[] concatenateRTF(List documentos)
throws UnsupportedEncodingException {
StringBuffer rtf = new StringBuffer(), subRtf;
int indexOfEndTag, indexOfBeginTag;
final String CHARSET = “UTF-8”;
final String BEGIN_TAG = “{\\rtf1\\ansi\\ansicpg1252\\uc1 \\deff0\\deflang3082\\deflangfe3082”;
final String END_TAG = “\\par }”;
for (int docNumber = 0; docNumber < documentos.size(); docNumber++) { byte[] contenido = documentos.get(docNumber); if (contenido != null) { if (docNumber == 0) { rtf = new StringBuffer(new String(contenido, CHARSET)); indexOfEndTag = rtf.lastIndexOf(END_TAG); if (indexOfEndTag != -1) rtf = rtf.replace(indexOfEndTag, indexOfEndTag + END_TAG.length(), ""); } else if (docNumber < documentos.size() - 1) { subRtf = new StringBuffer(new String(contenido, CHARSET)); indexOfBeginTag = subRtf.indexOf(BEGIN_TAG); if (indexOfBeginTag != -1) subRtf = subRtf.replace(indexOfBeginTag, indexOfBeginTag + BEGIN_TAG.length(), ""); indexOfEndTag = subRtf.lastIndexOf(END_TAG); if (indexOfEndTag != -1) subRtf.replace(indexOfEndTag, indexOfEndTag + END_TAG.length(), ""); rtf.append(subRtf); } else { subRtf = new StringBuffer(new String(contenido, CHARSET)); indexOfBeginTag = subRtf.indexOf(BEGIN_TAG); if (indexOfBeginTag != -1) subRtf = subRtf.replace(indexOfBeginTag, indexOfBeginTag + BEGIN_TAG.length(), ""); rtf.append(subRtf); } } } return rtf.toString().getBytes(CHARSET); } [/sourcecode] byte!