有没有办法使用 jquery 日期时间选择器获得良好的日期格式？

Question

I am trying to develop a screen with Angular 9.1.3 and bootstrap and I would like to use jquery datetime-picker. I have integrated in the screen and it select the date but it return the date in the field, the format is wrong. I have look at many examples but I did not succeed to solve my problem.

In html file I have declare the field as follows:

  <div class="form-group row">
    <label for="startDate" class="col-sm-2 col-form-label" i18n="@@startDate">Start date</label>
    <div id="startDatePicker" class="col-sm-3 input-append date">
      <input data-format="dd/MM/yyyy hh:mm" type="text" class="form-control onlyDateTime" formControlName="startDate"
        (click)="selectDate($event)">
    </div>
    <span class="input-group-addon">
      <span class="fa fa-calendar"></span>
    </span>
  </div>

In the typescript file, I have create the selectDate method as follows:

  selectDate(event: Event) {
    const pickerOpts = {
      dateFormat: 'yyyy/MM/dd hh:mm',
    };
    $('.onlyDateTime').datetimepicker(pickerOpts);
  }

but the picker return english date format: yyyy/MM/dd hh:mm

I have tried to locale: 'fr-FR' in datetime-picker options but I have always the same problem.

Answer 1

the documentation of datetimepicker states that it uses the php-date-formatter by default to format dates. So what you're looking for is:

format:'d/m/Y H:i'

in your picketOpts variable to format the date as you want.

Here is list of different format options you can play around for datetimepicker .

Answer 2

I have tried your proposal but it is always the same problem. I have modify my function like below:

  selectDate(event: Event) {
    var dateTmp: Date;
    const pickerOpts = {
      dateFormat: 'd/m/Y H:i',
    };
    $('.onlyDateTime').datetimepicker(pickerOpts);
    $('.onlyDateTime').change((selectedDate) => {
      if (selectedDate !== undefined) {
        dateTmp = $(this)[0].editedItem.startDate;

        console.log('Date inside: ' + dateTmp);
      }
    });
    console.log('Date Outside: ' + dateTmp);
  }

The date inside jquery function is fine. The date outside is always undefined. Is it a way to get the value of a variable inside a jquery function from outside. With this value I am able to format the date using DatePipe transformer furnished by @angular/common.

Answer 3

If you are using in browser, you can use Date.toLocaleDateString

For better support, use momentjs: https://momentjs.com/

 const format = (d) => { return d.toLocaleDateString("fr-FR", { year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric", }); }; console.log(format(new Date()));