I am trying to set an really old value in a DateTextBox. Unfortunately the widget won't accept dates set in a year lower than '100'.
When I try to set the value of the element to 0017-01-01 the widget automatically sets itself to 2017-01-01.
The displayed value property keeps unchanged until the widget gets out of focus, then it is changed to the internal date.
<input type="date"
data-dojo-type="dijit/form/DateTextBox"
value='0017-01-01'
id="myDate" />
Is there any way to allow older dates 0100-01-01 in the DateTextBox?
I also build a small jsfiddle to demonstrate the effect:
http://fiddle.jshell.net/shfe1oqs/
You can add the constraint strict == true to your DateTextBox:
<input type="date" data-dojo-type="dijit/form/DateTextBox"
data-dojo-props="constraints: {strict: true}" value='0017-01-01' id="myDate" />
The modified jsfiddle: http://fiddle.jshell.net/fuzxt1fb/3/
Note that then you will have to enter two digits values for day and month
Related
I am using the double-binding of the clrDate, which allows me to load a Javascript Date object. However, I need to trigger an event every time the user changes the date, either types in a new one or uses the calendar.
I've tried (click), (change), (ngModelChange), (blur) - but for some reason none of them seem to trigger.
<label for="modelDate" class="clr-control-label" >Model Date:</label>
<input clrDate type="date" [(clrDate)]="selectedModelDate" (ngModelChange)="loadModel(false)" >
How should I capture the change within the Date Picker?
You can do it in two ways.
2-way Binding
In this stackblitz, notice that before the date picker is interaced with, if you click the button then the value of date1 is undefined. After you select a date and click the button it has the value set in the date picker. This is typical 2-way binding in Angular.
<section>
<button class="btn btn-primary" (click)="logDate1()">
Log Date Value for 2-way binding
</button>
<label for="date1" class="clr-control-label" > Date1:</label>
<input type="date" [(clrDate)]="date1" />
</section>
De-sugarized Syntax
This might be what you are after. It's almost the same as the above example but we seperate or de-sugarize the 2-way binding so that it gets set with [clrDate]=date2. Notice that it fires an event clrDateChange that can be tied into with the logChnage($event). That will get fired whenever the internal value of the date picker changes (e.g user selects a date) and you can do whatever you want with it's value in the logChange function. This is 2-way binding de-sugarized.
<section>
<h4>De-sugarized syntax</h4>
<label for="date2" class="clr-control-label" > Date1:</label>
<input type="date" [clrDate]="date2" (clrDateChange)="logChange($event)"/>
</section>
I have a country picker in my form like this:
<select class="bfh-countries text-left" name="country" id="country" data-country="DE">
</select>
I can get the value with jQuery like this:
$("#country").val()
but when i try to serialize the form with $("#myform").serializeArray() The value for "country" is an empty string.
How can i fix this?
I ran into this problem and it took me forever to find because there aren't any examples of it. What you really want to do is use data-name="country", which names the hidden variable on the back end as country. For the country picker, you can use the div tag as follows:
<div class="country bfh-selectbox bfh-countries" data-flags="true" data-filter="true" data-name="country" data-country="POSTBACK_VARIABLE_GOES_HERE"></div>
If you do this, you'll find a hidden variable that's added to the page as follows:
<input type="hidden" name="country" value="US">
The value above assumes you selected United States but it is entered as a 2 character code, which could then be entered as data-country above if you need to do server-side validation and display the page again without forcing the user to select the value all over again.
This was seriously a nightmare to find.
To have a page be compliant with all government accessibility requirements, each form element should have a label. However, we have a birth date picker with three dropdowns: Day, Month, and Year. The visible label is simply "Birth Date".
Is there a way to:
Specify that a form element has no label?
Specify that a label is for multiple form elements?
You can specify a label for a group using <fieldset> and <legend>, however, this does not mean you can omit the individual label. In your example, you could argue that the proximity to the other selects serve as a "visual label", so you can use the title attribute to label each of the individual components and a fieldset/legend for the group
In your instance, you also need to indicate that the * indicates a required field
Here is some markup
<fieldset>
<legend>Date of Birth* <span class="offscreen">required</span></legend>
<select title="month">...</select>
<select title="day">...</select>
<select title="year">...</select>
<button title="pick date" class="datepicker"></button>
</fieldset>
I have the following markup:
<input type="number" max="99" />
In Google Chrome (and possibly other webkit browsers), this will restrict the spinner's up arrow from going over 99, but it does not prevent the user from typing a number higher than 99. Even onblur, the invalid value is not removed/replaced or even a warning given that the value is invalid.
Am I misinterpreting how it's supposed to work, or is this a bug? I am using the latest version of Chrome (19 at the time of writing).
Edit:
To clarify, I want to know why a number greater than the specified max is allowed to be input in the first place. I realize that it gives a tooltip on form submission telling you that it's invalid, but it seems like inconsistent behavior that the spinner will not allow you to go above the max, yet you can simply type a number above the max at any time to circumvent it.
If this is desired behavior for some reason, why is that? And is there a better option to enforcing the input range without resorting to JS?
It does work but you only see an error message (tooltip) if you put a submit button and a form into your code:
<form action="#" method="get">
<input type="number" max="99" />
<input type="submit" value="Submit!" />
</form>
jsFiddle
It's an old question, but I didn't find any relevant answers for this question anywhere.
this behaviour is still around in chrome (version 61).
I have found a little trick that can be used in some situation.
it's relevant for those who use data-binding libraries like aurelia, angular etc.. I tested only on aurelia - but that should work also for others.
the trick relies on the fact that input of type range enforce the min/max constraints.
we simply create another input (of type range) that is bounded to the same value as the regular input, and we hide it via css.
when the user inputs something that is greater than the max value, it will snap back to the max value.
here's a demo in aurelia: https://gist.run/?id=86fc278d3837718be4691acd5625aaad
I have an input field for users to input a monetary amount:
<input type="number" value="{{ order.amount }}" />
I chose the number input type because I want the number keyboard to appear when the field is clicked. I can't use type="text" pattern="[0-9]*" (suggested here) because that causes the number-only input pad to appear which doesn't have a decimal point.
Unfortunately, if the value attribute is anything but numeric (including an empty string or space), the field renders with a default value of "0":
This stinks because the user needs to hit ⌫ before entering a value.
Is there any way to fix this?
Update: I'm an idiot. Some JavaScript was validating and reformatting the field. Nevermind.
I would look at the code you are using to set the value attribute of this field (value="{{ order.amount }}"). The reason I say this is that in Mobile Safari a "vanilla" numeric field is empty, i.e. no 0 by default.
Your screenshot suggests to me that you're using jQuery Mobile, so I checked using that in case the issue lay there, but again, no default value of zero.
For what it's worth, this is the mark-up I'm using (which renders an empty number field in iOS emulators and on an iPhone 3GS):
<input type="number" value="" />