Time conversion from pm to am in Angular 6 component

-1

I'm trying to create a form in angular in which we have 2 input fields StartTime and EndTime. In StartTime if we input date and time and it should automatically be updated in Endtime with '+' 1 hour in time.

It is working fine, but when it has to convert from am to pm it does not convert. The time value in this.endTimeValue while debugging is fine but it dipslays the wrong value in the view (EndTime) while binding.

Html file:

<form [formGroup]="myGroup" (ngSubmit)="submit(myGroup.value)">

    <div class="row row-time">

        <div class="col-sm-5">

            <label for="StartTime">Start Time</label>

            <input type="datetime-local"  name="StartTime" class="form-control" formControlName="StartTime">

        </div>



        <div class="col-sm-5 col-sm-offset-2">

            <label for="EndTime">End Time</label>

            <input type="datetime-local"  name="endTime1" class="form-control" formControlName="EndTime" readonly>

        </div>

    </div>



    <div class="row">

        <button type="submit" class="btn">

            Submit Query

        </button>

    </div>

</form>

Component file (ts):

myGroup: FormGroup;

startTimeValue: any;

endTimeValue : string ;



constructor(private formbuilder:FormBuilder, 

              private datePipe: DatePipe) { }



ngOnInit() {

  this.myGroup = this.formbuilder.group({

    TableName:['', Validators.required],

    CorrelationId:['', Validators.required],

    StartTime:[null, Validators.required],

    EndTime:[null, Validators.required],

    ClientName:['', Validators.required]

  });

}





submit(form){

  this.startTimeValue = form.StartTime;

  var time = this.startTimeValue;



  if(time !== null)

  {

    debugger;

    var x = new Date(time);

    x.setHours(x.getHours() + 1);

    this.endTimeValue = x.LocaleString();

    debugger;

    this.myGroup.patchValue({

      EndTime: this.datePipe.transform(this.endTimeValue,"yyyy-MM-ddThh:mm",'+0530')

    })

  }

}

edited Nov 28 '18 at 12:42

VincenzoC

16k83957

asked Nov 28 '18 at 7:37

Smriti Sethi

209

Can you give an example of what should be the input and output?

– xyz
Nov 28 '18 at 8:12

The datetime-local input type specifies a local time without time zone, and the internal representation of the value is in ISO 8601 conformant format, which has no AM/PM. It is left to implementations to decide what localized format might be used in the user interface. Whether they have AM/PM designator is outside the author’s control.

– Joel Joseph
Nov 28 '18 at 8:27

if suppose startTime is 11:00 PM then EndTime should be 12:00 AM but it is dispalying 12:00PM

– Smriti Sethi
Nov 28 '18 at 9:31

add a comment |

-1

Html file:

<form [formGroup]="myGroup" (ngSubmit)="submit(myGroup.value)">

    <div class="row row-time">

        <div class="col-sm-5">

            <label for="StartTime">Start Time</label>

            <input type="datetime-local"  name="StartTime" class="form-control" formControlName="StartTime">

        </div>



        <div class="col-sm-5 col-sm-offset-2">

            <label for="EndTime">End Time</label>

            <input type="datetime-local"  name="endTime1" class="form-control" formControlName="EndTime" readonly>

        </div>

    </div>



    <div class="row">

        <button type="submit" class="btn">

            Submit Query

        </button>

    </div>

</form>

Component file (ts):

myGroup: FormGroup;

startTimeValue: any;

endTimeValue : string ;



constructor(private formbuilder:FormBuilder, 

              private datePipe: DatePipe) { }



ngOnInit() {

  this.myGroup = this.formbuilder.group({

    TableName:['', Validators.required],

    CorrelationId:['', Validators.required],

    StartTime:[null, Validators.required],

    EndTime:[null, Validators.required],

    ClientName:['', Validators.required]

  });

}





submit(form){

  this.startTimeValue = form.StartTime;

  var time = this.startTimeValue;



  if(time !== null)

  {

    debugger;

    var x = new Date(time);

    x.setHours(x.getHours() + 1);

    this.endTimeValue = x.LocaleString();

    debugger;

    this.myGroup.patchValue({

      EndTime: this.datePipe.transform(this.endTimeValue,"yyyy-MM-ddThh:mm",'+0530')

    })

  }

}

edited Nov 28 '18 at 12:42

VincenzoC

16k83957

asked Nov 28 '18 at 7:37

Smriti Sethi

209

Can you give an example of what should be the input and output?

– xyz
Nov 28 '18 at 8:12

The datetime-local input type specifies a local time without time zone, and the internal representation of the value is in ISO 8601 conformant format, which has no AM/PM. It is left to implementations to decide what localized format might be used in the user interface. Whether they have AM/PM designator is outside the author’s control.

– Joel Joseph
Nov 28 '18 at 8:27

if suppose startTime is 11:00 PM then EndTime should be 12:00 AM but it is dispalying 12:00PM

– Smriti Sethi
Nov 28 '18 at 9:31

add a comment |

-1

Html file:

<form [formGroup]="myGroup" (ngSubmit)="submit(myGroup.value)">

    <div class="row row-time">

        <div class="col-sm-5">

            <label for="StartTime">Start Time</label>

            <input type="datetime-local"  name="StartTime" class="form-control" formControlName="StartTime">

        </div>



        <div class="col-sm-5 col-sm-offset-2">

            <label for="EndTime">End Time</label>

            <input type="datetime-local"  name="endTime1" class="form-control" formControlName="EndTime" readonly>

        </div>

    </div>



    <div class="row">

        <button type="submit" class="btn">

            Submit Query

        </button>

    </div>

</form>

Component file (ts):

myGroup: FormGroup;

startTimeValue: any;

endTimeValue : string ;



constructor(private formbuilder:FormBuilder, 

              private datePipe: DatePipe) { }



ngOnInit() {

  this.myGroup = this.formbuilder.group({

    TableName:['', Validators.required],

    CorrelationId:['', Validators.required],

    StartTime:[null, Validators.required],

    EndTime:[null, Validators.required],

    ClientName:['', Validators.required]

  });

}





submit(form){

  this.startTimeValue = form.StartTime;

  var time = this.startTimeValue;



  if(time !== null)

  {

    debugger;

    var x = new Date(time);

    x.setHours(x.getHours() + 1);

    this.endTimeValue = x.LocaleString();

    debugger;

    this.myGroup.patchValue({

      EndTime: this.datePipe.transform(this.endTimeValue,"yyyy-MM-ddThh:mm",'+0530')

    })

  }

}

edited Nov 28 '18 at 12:42

VincenzoC

16k83957

asked Nov 28 '18 at 7:37

Smriti Sethi

209

Html file:

<form [formGroup]="myGroup" (ngSubmit)="submit(myGroup.value)">

    <div class="row row-time">

        <div class="col-sm-5">

            <label for="StartTime">Start Time</label>

            <input type="datetime-local"  name="StartTime" class="form-control" formControlName="StartTime">

        </div>



        <div class="col-sm-5 col-sm-offset-2">

            <label for="EndTime">End Time</label>

            <input type="datetime-local"  name="endTime1" class="form-control" formControlName="EndTime" readonly>

        </div>

    </div>



    <div class="row">

        <button type="submit" class="btn">

            Submit Query

        </button>

    </div>

</form>

Component file (ts):

myGroup: FormGroup;

startTimeValue: any;

endTimeValue : string ;



constructor(private formbuilder:FormBuilder, 

              private datePipe: DatePipe) { }



ngOnInit() {

  this.myGroup = this.formbuilder.group({

    TableName:['', Validators.required],

    CorrelationId:['', Validators.required],

    StartTime:[null, Validators.required],

    EndTime:[null, Validators.required],

    ClientName:['', Validators.required]

  });

}





submit(form){

  this.startTimeValue = form.StartTime;

  var time = this.startTimeValue;



  if(time !== null)

  {

    debugger;

    var x = new Date(time);

    x.setHours(x.getHours() + 1);

    this.endTimeValue = x.LocaleString();

    debugger;

    this.myGroup.patchValue({

      EndTime: this.datePipe.transform(this.endTimeValue,"yyyy-MM-ddThh:mm",'+0530')

    })

  }

}

angular datepicker datetimepicker angular-forms

edited Nov 28 '18 at 12:42

VincenzoC

16k83957

asked Nov 28 '18 at 7:37

Smriti Sethi

209

edited Nov 28 '18 at 12:42

VincenzoC

16k83957

asked Nov 28 '18 at 7:37

Smriti Sethi

209

edited Nov 28 '18 at 12:42

VincenzoC

16k83957

edited Nov 28 '18 at 12:42

VincenzoC

16k83957

edited Nov 28 '18 at 12:42

VincenzoC

16k83957

asked Nov 28 '18 at 7:37

Smriti Sethi

209

asked Nov 28 '18 at 7:37

Smriti Sethi

209

asked Nov 28 '18 at 7:37

Smriti Sethi

209

Can you give an example of what should be the input and output?

– xyz
Nov 28 '18 at 8:12

The datetime-local input type specifies a local time without time zone, and the internal representation of the value is in ISO 8601 conformant format, which has no AM/PM. It is left to implementations to decide what localized format might be used in the user interface. Whether they have AM/PM designator is outside the author’s control.

– Joel Joseph
Nov 28 '18 at 8:27

if suppose startTime is 11:00 PM then EndTime should be 12:00 AM but it is dispalying 12:00PM

– Smriti Sethi
Nov 28 '18 at 9:31

add a comment |

Can you give an example of what should be the input and output?

– xyz
Nov 28 '18 at 8:12

The datetime-local input type specifies a local time without time zone, and the internal representation of the value is in ISO 8601 conformant format, which has no AM/PM. It is left to implementations to decide what localized format might be used in the user interface. Whether they have AM/PM designator is outside the author’s control.

– Joel Joseph
Nov 28 '18 at 8:27

if suppose startTime is 11:00 PM then EndTime should be 12:00 AM but it is dispalying 12:00PM

– Smriti Sethi
Nov 28 '18 at 9:31

Can you give an example of what should be the input and output?

– xyz
Nov 28 '18 at 8:12

The datetime-local input type specifies a local time without time zone, and the internal representation of the value is in ISO 8601 conformant format, which has no AM/PM. It is left to implementations to decide what localized format might be used in the user interface. Whether they have AM/PM designator is outside the author’s control.

– Joel Joseph
Nov 28 '18 at 8:27

if suppose startTime is 11:00 PM then EndTime should be 12:00 AM but it is dispalying 12:00PM

– Smriti Sethi
Nov 28 '18 at 9:31

add a comment |

1 Answer
1

active

oldest

votes

you can have a look at moment.js

Here is the link for moment.js
https://momentjs.com/

You need to install it with the command:
npm install moment --save

And then you can start converting the input that user has typed, like:

var a = moment('2018-11-21');

a.format('LT');   // 8:59 AM

a.format('LTS');  // 8:59:09 AM

answered Nov 28 '18 at 7:59

Alberto AM

8511

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53514382%2ftime-conversion-from-pm-to-am-in-angular-6-component%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

you can have a look at moment.js

Here is the link for moment.js
https://momentjs.com/

You need to install it with the command:
npm install moment --save

And then you can start converting the input that user has typed, like:

var a = moment('2018-11-21');

a.format('LT');   // 8:59 AM

a.format('LTS');  // 8:59:09 AM

answered Nov 28 '18 at 7:59

Alberto AM

8511

add a comment |

you can have a look at moment.js

Here is the link for moment.js
https://momentjs.com/

You need to install it with the command:
npm install moment --save

And then you can start converting the input that user has typed, like:

var a = moment('2018-11-21');

a.format('LT');   // 8:59 AM

a.format('LTS');  // 8:59:09 AM

answered Nov 28 '18 at 7:59

Alberto AM

8511

add a comment |

you can have a look at moment.js

Here is the link for moment.js
https://momentjs.com/

You need to install it with the command:
npm install moment --save

And then you can start converting the input that user has typed, like:

var a = moment('2018-11-21');

a.format('LT');   // 8:59 AM

a.format('LTS');  // 8:59:09 AM

answered Nov 28 '18 at 7:59

Alberto AM

8511

you can have a look at moment.js

Here is the link for moment.js
https://momentjs.com/

You need to install it with the command:
npm install moment --save

And then you can start converting the input that user has typed, like:

var a = moment('2018-11-21');

a.format('LT');   // 8:59 AM

a.format('LTS');  // 8:59:09 AM

answered Nov 28 '18 at 7:59

Alberto AM

8511

answered Nov 28 '18 at 7:59

Alberto AM

8511

answered Nov 28 '18 at 7:59

Alberto AM

8511

answered Nov 28 '18 at 7:59

Alberto AM

8511

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl