How can I set classes to check if input or date range picker has value or not.
Also, the placeholder in date picker not showing until the focus.
How can I fix that without adding extra TS code?
You could do it like this:
<input [(ngModel)]="inputValue" [ngClass]="{'error': !inputValue}">
Related
I want to remove the up and down arrow when using the MUI number field. I'm using version 5.3.0. Is it possible in sx prop?
The sx prop
<TextField
sx={{...}}
id="outlined-number"
label="Number"
type="number"
/>
From the docs, the type prop accepts valid HTML input types. I believe the reason the up and down arrows are present is because you specified number as the type.
Try type="tel" instead, as it seems to be the standard input type for phone numbers.
Here is a reference to the tel type and why it's a good idea to use it. Note that if the current browser doesn't support it, it will fall back to being a regular text field
I found this answer here:
How to remove the up and down arrow from a mui number field?
I'm using a third party plugin to show a form for adding and saving the Birthday.
It shows the input fields vertically ordered as:
Day
Year
Month
I used flex and order attribute to reorder the input fields as follow:
Day
Month
Year
But now if I tab through the inputs, the focus goes from Day to Year.
I would be able to fix it by using the tabindex inside the HTML markup, but I don't have access to the HTML.
Is there any other way to change the tabindex to: Day -> Month -> Year?
Is there any other way to change the tabindex to: Day -> Month -> Year?
No. When using tab the focus follows the order of elements in the HTML, unless tabindex attributes are present.
Changing the focus order is really not within the scope of CSS as a stylesheet.
I had a similar problem. As a javascript solution you could reassign the tabindex to the order value.
Here is part of the code I used to solve it :
/**
* for ex. : ELEMENT_TO_SET = 'input,textarea'
* ELEMENT_WITH_ORDER_VALUE = document.getElementById('elementId')
*
* this will set all inputs and textareas that are containing in my element who has an order value
*/
$(ELEMENT_TO_SET).each(function(){
$(this).attr("tabIndex", getComputedStyle(ELEMENT_WITH_ORDER_VALUE,null).order);
});
I have an MVC 4 site using JQuery Mobile. I'm using a model with an EditorFor to render the date editor. in MVC I have this:
#Html.EditorFor(Function(model) model.ActionDate)
The model property is defined as:
<Required>
<RegularExpression("\d{2}/\d{2}/\d{4}", ErrorMessage:="Please enter a date in the format of MM/DD/YY")>
<DataType(DataType.Date)>
<DisplayFormat(ApplyFormatInEditMode:=True, DataFormatString:="MM/dd/yyyy")>
<Display(Name:="Action Date")>
Public Property ActionDate As Date
It renders HTML with the value of:
<input type="date" ... value="04/24/2013" />
But what shows to the user is this:
The date isn't visible to the user, and the 4/24/2013 is not the default of Chrome's date picker. How do I get chrome to actually show the date?
Thanks.
According to the W3C, the value passed to an <input type="date"> element should be in RFC3339 format. This is a specific profile of ISO8601.
In other words, you need to pass the value in yyyy-MM-dd format.
Just hit this exact same problem.
My solution was to avoid the type="date" problem by changing the type to text when I connect the datepicker:
$('#Date').removeAttr('type').attr('type', 'text').datepicker();
If you are not using JQueryUI, just drop the datePicker part.
As I also needed to force the default date format (again thanks to Chrome) it was:
$('#Date').removeAttr('type').attr('type', 'text').datepicker({ dateFormat: 'dd/mm/yy' });
Chrome is now biting us regularly with jQueryUI issues and has gone from being our favourite dev browser to our most troublesome (for compatibility issues).
I need a Date custom component which is date should be disable when selected the calendar icon.
If any one have pls share me.
What did you mean?
https://www.flextras.com//index.cfm?event=ProductHome&productID=15
http://www.keepcore.com/composants-flex/flex-calendar-component.html
http://www.imbizzi.com/
(!) http://forums.adobe.com/message/2887093
http://www.flashenabledblog.com/2007/07/06/interactive-flex-calendar-componentwith-source-just-awesome/
http://www.quietlyscheming.com/blog/components/interactive-calendar/
(!) http://www.adobe.com/products/flex/ibmilogelixir/
I've got a richfaces calendar component defined as
<rich:calendar id="startDate" value="#{myBean.dateSet.startDate}"
timeZone="#{myBean.dateSet.timeZone}"
datePattern="#{myBean.dateSet.datePattern}"
enableManualInput="true" immediate="true">
<a4j:support event="onchanged" action="#{myBean.adjustEndDate}"
reRender="startDate,endDate" ajaxSingle="true" />
</rich:calendar>
when I'm changing the date using the calendar popup/gui everything is working fine.
However when I'm changing it via the input text field, the value is not being updated to myBean.dateSet.startDate, although it is being updated correctly on the calendar component itself (i.e. if I click the icon for calendar popup it shows the updated current date).
Any suggestions on how I can get it to update the value to myBean correctly?
Thanks!
Use oninputchange event, that's the one that tracks manual changes.
I'm not sure if this helps, but if you want to get the value inside the input text field, you refer to it as <calId>InputDate . So in your case, the input text field will have id startDateInputDate. Hope this helps somehow!
You can use the oninputchange event inside the rich:calendar component like Max Katz suggested.
For example:
<rich:calendar
...
oninputchange="invokeCalendarOnChange(event,'#{rich:clientId('$idOfTheCalendar')}')"
...
</rich:calendar>
function invokeCalendarOnChange(event, id) {
var c = RichFaces.$(id);
c.invokeEvent("change", RichFaces.getDomElement(c.id), event, c.selectedDate);
}
Hope that helps!