Get raw text instead of date object from input field

Question

I have an input field as shown in below html code.

   <div class="input-group input-group-md">
    <input id="date"    
        name="date"
        [readOnly]="disabled"
        type="text"
        placeholder="M0/d0/0000 Hh:m0:s0"
        [placeholder]="placeholderSet"
        class="form-control"
        data-toggle="tooltip" 
        title="{{tooltipSet}}"
        (focus)="changePlaceholderOnFocus()"
        (focusout)="changePlaceholderOffFocus()"
        [(ngModel)]="searchInput"
        (input)="setSelectedDate()"
        [owlDateTime]="dt"
        >
        <div class="input-group-append">
            <span class="fa fa-calendar input-group-text"
                    [owlDateTimeTrigger]="dt">
            </span>
        </div>
    </div>
<owl-date-time
        [disabled]="disabled"
        [startAt]=""
        [showSecondsTimer]="true"
        #dt>
</owl-date-time>

I want raw text entered in the input field i.e., when I enter date like 12/12/2020 12:13:56 in input box, I get date like Sat Dec 12 2020 12:13:56 GMT+0530 (India Standard Time) in the code instead of mm/dd/yyyy hh:mm:ss format that I entered in the input box. I want to get as it is data from input box weather it is date or not. I AM USING OwlDateTime PICKER.

Below is the ts code.

export class DateTimePickerComponent implements OnInit, OnDestroy {

  @Input() disabled: any;
  @Input() placeholderSet: any;
  @Input() tooltipSet: any;
  @Input() selectedDropDown: any;
  @Input()
  parentSubject: Subject<any>;
  searchInput: string;
  temp: any;

  constructor() {
  }

  @Output() selectedDate = new EventEmitter<any>();

  setSelectedDate() {
    this.searchInput = String(this.searchInput);
    this.selectedDate.emit(this.searchInput);
  }

You can see the searchInput is string. You can also check in the attached screen shot that it is converting it to proper js date format.

ok, obviously your object is of type DateTime, thats the reason why are you getting it as DateTime on back end. Can you change the type of that property inside your model from DateTime to string? Or you can convert it to string on back end side after receiving it — sosNiLa
– sosNiLa, Commented Mar 10, 2020 at 14:36
@sosNiLa as you can see, I have updated the question with addtional code. The searchInput is string and I am also casting it to string but still no luck as shown in the screenshot. — Savan Gadhiya
– Savan Gadhiya, Commented Mar 10, 2020 at 14:49
Note that Angular specifically comes with a Date pipe that does date formatting as well, see How to change the output date format of input type=“date” in angular 4? — Heretic Monkey
– Heretic Monkey, Commented Mar 10, 2020 at 15:03

Savan Gadhiya · Accepted Answer · 2020-03-11 09:56:06Z

I used ElementRef to fix this issue. Check Below updated HTML and TS code. HTML Code:

    <input
            #dateTimeInput
            id="date"
            name="date"
            type="text"
            class="form-control"
            data-toggle="tooltip"
            title="{{tooltipSet}}"
            [readOnly]="disabled"
            [placeholder]="placeholderSet"
            [(ngModel)]="searchInput"
            (focus)="changePlaceholderOnFocus()"
            (focusout)="changePlaceholderOffFocus()"
            (dateTimeInput)="setSelectedDate()"
            [owlDateTime]="dt"
    >

TS Code:

export class DateTimePickerComponent implements OnInit, OnDestroy {
  @ViewChild('dateTimeInput') dateTimeInput: ElementRef;
  @Input() disabled: any;
  @Input() placeholderSet: any;
  @Input() tooltipSet: any;
  @Input() selectedDropDown: any;
  @Input()
  parentSubject: Subject<any>;
  searchInput: Date;
  temp: any;

  constructor(private renderer: Renderer2) {
        this.searchInput= null;
    }

  @Output() selectedDate = new EventEmitter<any>();

  setSelectedDate() {
    this.selectedDate.emit(this.dateTimeInput.nativeElement.value);
  }

Collectives™ on Stack Overflow

Get raw text instead of date object from input field

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related