How to set default TIME in angular primeng p-calendar v5.2.7? - html

I have used p-calendar for date and time selection in project and set [minDate]="dateTime" so it is considering current date and time if I click on Today button but I need default time to 00:00 if I click on Today.
Here's my code of p-calendar
<p-calendar class="date" (onSelect)="onChangeDate()" [(ngModel)]="model.start_date"
[minDate]="dateTime" [showIcon]="true" [showTime]="true" showButtonBar="true"
[formControl]="form.controls['start_date']" [readonlyInput]="true">

You could remove [showTime]="true" to view 00:00:00 because I don't know if an event to customize button Today exists.

Related

Add another element to webpage based on last updated information

I have a qlikview access point (web page) which looks like this-
I wanted to add another flag below Last Updated which is " App refresh Status" which will have either of the two values-  refreshed OR not refreshed. This will be calculated using the last reload date. If the last reload date is equal to current date then app refresh status is refresh.
HTML Code for Last Update-
<div id="columnHeaders">
<span class="attr1"><strong>Name</strong><a class="sortImg"></a></span>
<span class="attr2"><strong>Category</strong><a class="sortImg"></a></span>
<span class="attr3"><strong></strong><a class="sortImg"></a></span>
<span class="attr4"><strong>Last Update</strong><a class="sortImg"></a></span>
</div>
Please do tell me what other details are required as I am not from this field and would appreciate any help on this. There is a CSS file also.

How to clear content in timepicker instantly after I changed datepicker?

I'm working on a Google calendar add-on with a datepicker and timepicker using CardService. And here's the code.
var startDate = CardService.newDatePicker()
.setTitle("Start Date:")
.setFieldName("startDate")
var startTime= CardService.newTimePicker()
.setTitle("Start Time:")
.setFieldName("startTime")
.setHours(10)
.setMinutes(0)
I want the timepicker to change instanly after I change the datepicker.
To be more precise, I want the timepicker to be cleared and show as blank when I set the datepicker as today, while show 10:00 AM when I set it as other days.
I was thinking set no default time of the timepicker and change it when I set the datepicker other than today, but at the first place it shows 12:00 AM instead of blank. So it seems that this way doesn't work.
The time picker will always have a value (it can't be blank). If you don't set your own default value by adding hours and minutes, the default will be 00:00 hrs or 12:00 am as it is the start of the day.

Why does clearing date input using Angular give different results?

I have a Component in my Angular project that shows a graph up to a particular date as picked by the user. The value in the date input must be a valid date. So when clicking the x button on the date picker, it should go to the current date and not be blank.
This is the html:
<input class="form-control input-sm" type="date" name="endDate"
[ngModel]="endDate | date:'yyyy-MM-dd'" (ngModelChange)="setEndDate($event);">
and the following code in the Component TS file:
endDate = new Date();
setEndDate(newValue) {
if(newValue) {
this.endDate = newValue;
return;
}
this.endDate = new Date();
}
What I can't get my head around is that sometimes it works and sometimes it doesn't. Specifically, when the date in the picker is not the current date, clicking the x results in it becoming the current date as intended. When the date in the picker is the current date, it goes blank and shows mm/dd/yyyy. It should just stay on the current date.
From testing it looks like the value is being set, but the picker does not update for some reason. I've tried changing the binding but this only resulted in it breaking completely. Any light that can be shed on why this works sometimes but not other times would be appreciated.
stackblitz: https://stackblitz.com/edit/angular-oep55t
I use a viewChild for set the value of the nativeElement. Looks like endDate was never pass throught the input date after clear the value. I used the datePipe in the ts file in order to get the date formatted. Don't forget to add the datepipe into the providers in your module.
https://stackblitz.com/edit/angular-268qje
Let me know if it's ok for you.

I am getting issue in html default date calendar placeholder. I am getting dd-----yyyy format in place of placeholder

I used default placeholder value as dd-----yyyy but I got date like 16-Mar-1997 after selecting the date.I want to change default date placeholder as dd/mmm/yyyy without using datepicker.
Then You can set dateFormat as per you want by using below code you can edit as per you want
For Formatting in mm-dd-yyyy
aa=date.split("-")
date=aa[1]+'-'+aa[2]+'-'+aa[0]

Tab order with paper input and own element

I have made my own "date" input which consists of a paperinput, the pikaday date picker and a date validator (also my own). The reason for this is I have a requirement to both allow "vague" dates (if someone types 4 digits with a value between 1901 and 2050 that means any time in a specific year) and complex other rules so 2811 means 20th November current year (I am british so working with dd/mm/yy - but system I am replacing doesn't need the user to enter the / character).
I have a form with two paper-input fields followed by my date field. Tabbing moves nicely between them until I tab away from my special element, when for one tab nothing is selected and then the next tab the next field is selected.
I put some code on the blur event of my date elements paper input, and the did a var test = document.activeElement; in the event handler. The result of this is the body element from my page.
How do I make the tab order play nicely?
As I explained in the comment under the question, the pikaday date picker had received the tab on the blur, but was then immediately hidden. This left the tab with the body. I changed the various buttons on the picker to have tabindex="-1" added as the picker is created. This resolved the problem