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')
})
}
}
angular datepicker datetimepicker angular-forms edited Nov 28 '18 at 12:42
VincenzoC
16k83957
asked Nov 28 '18 at 7:37
Smriti SethiSmriti Sethi
209
add a comment |
-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 SethiSmriti 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
-1
-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 SethiSmriti Sethi
209
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 SethiSmriti Sethi
209
edited Nov 28 '18 at 12:42
VincenzoC
16k83957
asked Nov 28 '18 at 7:37
Smriti SethiSmriti 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
16k83957
asked Nov 28 '18 at 7:37
Smriti SethiSmriti Sethi
209
asked Nov 28 '18 at 7:37
Smriti SethiSmriti Sethi
209
asked Nov 28 '18 at 7:37
Smriti SethiSmriti Sethi
209
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
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
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
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
0
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 AMAlberto 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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
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 AMAlberto AM
8511
add a comment |
0
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 AMAlberto AM
8511
add a comment |
0
0
0
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 AMAlberto 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 AMAlberto AM
8511
answered Nov 28 '18 at 7:59
Alberto AMAlberto AM
8511
answered Nov 28 '18 at 7:59
Alberto AMAlberto AM
8511
answered Nov 28 '18 at 7:59
Alberto AMAlberto AM
8511
8511
add a comment |
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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