How to Create a Duration picker in Material Angular in Angular 8 - angular-material

I am looking to implement a duration which can capture input in HH:MM format. The mat-datepicker can be option but limitation will be it will allow to capture time within 24 hours, But the input field should also be able to capture input like 32:45 which is 34hrs and 45mins.
I am not sure if we can achieve with datetime picker. Capturing with mat-input field alone will also be a great.
<mat-form-field>
<mat-label>Enter the Duration</mat-label>
<input matInput [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>

I have designed a Directive for the DurationPicker which can be applied to the Mat-input field
Demo in the below link
https://stackblitz.com/edit/angular-lyajg3?file=src%2Fapp%2Fmy-duration-picker-directive.ts

Related

how to format the output value of an angular material DatePicker when submitting the form?

I am using angular 12 with a form containing a material DatePicker. Here is the relevant part of my component's html.
<mat-form-field>
<input formControlName="dateOfBirth" matInput [matDatepicker]="picker" placeholder="Date Of Birth">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
When I submit my form, I get the following value for dateOfBirth field:
Date Tue Dec 14 2021 00:00:00 GMT+0100 (Central European Standard Time)
Instead of this output, I would like an output of the form e.g. DD-MM-YYYY. Obviously, I could format this value afterwards but I was wondering if this could be done during the submit mechanism. Would you know how to do this ?

type date directly in Angular mat-card

I am developing an application for Human resources, in my application I used mat-calendar for dates, some of my users want to type the date directly in mat-calendar without using the click event to choose the year and month and day. I wonder if there is a method to use the two approaches
click one (click on year and month and day)
type the date directly like 23/11/2020 by example
thanks a lot for your help
<!-- date birth -->
<mat-form-field>
<input
matInput
required
name="dateBirth"
ngModel
placeholder="Date Birth"
[matDatepicker]="dateBirthCal"
>
<mat-datepicker-toggle
matSuffix
[for]="dateBirthCal"
></mat-datepicker-toggle>
<mat-datepicker #dateBirthCal></mat-datepicker>
</mat-form-field>
<!-- ************* fin date Birth *************-->

ngModel is not working with value attribute in ngx-material-timepicker with input in Angular7?

I have used ngx-material-timepicker for implementing the time filter.in our case time picker is open properly but its not working in the following scenarios:
Case 1 :
1.initially i have set selected time in the input and it working properly now this time i am not using with [(ngModel)]
<input [ngxTimepicker]="defaultValue" [value]="'05:11 pm'" (change)="selectChanged($event)">
<ngx-material-timepicker #defaultValue></ngx-material-timepicker><br>
Case 2 :
2.Now we have add [(ngModel)] for get the selected value that is selected fro the picker but now this time out initially set value is not showing in the input but if i remove the [(ngModel)] its working:
<input [ngxTimepicker]="defaultValue" [(ngModel)]="date1" [value]="'05:11 pm'" (ngModelChange)="selectChanged($event)" >
<ngx-material-timepicker #defaultValue></ngx-material-timepicker><br>
I have also post above issue in the github but get any response,please tell me anyone how to fix above issue.
I've got the same problem but in my case my inputs are into form and i forget about the name propriety.
i just added the name="date" in the input tag
<mat-form-field class="toggle-example" style="width: 100%">
<input matInput [(ngModel)]="time" [ngxTimepicker]="toggleTimepicker" name="time" [format]="24" [disableClick]="true" readonly>
<ngx-material-timepicker-toggle matSuffix [for]="toggleTimepicker"></ngx-material-timepicker-toggle>
<ngx-material-timepicker #toggleTimepicker></ngx-material-timepicker>
</mat-form-field>
I have fixed issue via below code:
<input [ngxTimepicker]="defaultValue" [(ngModel)]="date1 == undefined ? defaultValue : date1" [value]="'05:11 pm'" (ngModelChange)="selectChanged($event)" >
I think the onchange that you were asking is to set the time
You can use [timeset]="(setTime())" inside your ngx-time-picker tag
And in your ts file write the set time method.
I used this step and succeeded
<mat-form-field>
<input aria-label="default time" matInput [ngxTimepicker]="defaultValue" [value]="'9:00 am'" readonly>
<ngx-material-timepicker (timeSet)="setTime($event)" #defaultValue>
</ngx-material-timepicker>

jquery mobile 1.4.2 input type time 24 h mode

Is there a way of changing the mode of a input type time in jquery mobile?
I use Jquery mobile 1.4.2
Here is the code:
<label for="time">Time:</label>
<input type="time" data-theme="a" data-clear-btn="true" name="time" id="time" value="">
But as default the input field is in am/pm mode so the behavior in a mobile device it is also in am/pm mode. In Germany we use 24h mode so I want to change the mode if possible. How can I change the mode?
I found the input type="time" here:
http://demos.jquerymobile.com/1.4.2/textinput/
Check this fiddle.It shows 24 hour date format.By default there is no date and time in jquery mobile. So you need to add external plugins.
FIDDLE OUTPUT
Your HTML input is like
<input name="mytime" id="mytime" type="time" data-role="datebox" data-options='{"mode": "timebox", "useNewStyle":true,"overrideTimeFormat": 24}'/>
download the date picker here.
Datepicker download link
Note: If you want to show the time in 24 hr format in input field you need to customize the JQM datepicker plugin. Like in JQM-datebox-core.js you need to set the timeFormat : 24,.
EDIT: In JQM 1.4.2 the document Document link says they are using third party plugin. They referred two plugins one is JQUERY UI and another one is arschmitz JQUERY MOBILE DATEPICKER . In the above example i use that is jquery mobile datepicker same as like second plugin.

How to prevent a user from entering more than 4 digit in year area

I am working on JQuery Mobile Datebox and there is something i can't fix. If user type some weird input in year area something like 1988123, datebox gets crazy and changes value of date "undefined, undefined NaN, NaN".
I tried the get only year value from Datebox, but day, month or year area doesn't have id field. So I couldn't get any solution. Can anybody help me?
try HTML5 pattern:
<form
onsubmit="alert('Submitted.');return false;">
<input
type="text"
required=""
pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))"
value=""
name="dates_pattern2"
id="dates_pattern2"
list="dates_pattern2_datalist"
placeholder="Try it out.">
<input
type="submit"
value="ยป">
<datalist
id="dates_pattern2_datalist"></datalist>
</form>
Finally I did find a solution.
As you know, JQuery Mobile Datebox has some data-options. I find an option which is "maxYear".
<input name="tarih1" id="tarih1" type="date" data-role="datebox" data-options='{"mode": "datebox", "maxYear":"3000"}' placeholder="GG.AA.YYYY">
With this solution, user can't choose a year which has more than 4 digit. (You can change 3000 to another 4 digit year. Bu don't forget, if you choose for example 1999, user can't choose greater than 1999)

Resources