Develop Reference

How to change the default time of the date input field to a fixed value

When we open any date input field it will show us the current date if the variable associated with the input field is null. Is there any way to configure the input field so that when we open the calendar popup instead of showing the current time it should show some other time, still keeping the value associated with the input field to be null
when it is initially loaded it should not display any value
When clicking on the calendar icon instead of showing current date (21/01/2022) it should be pointing some other configurable date (suppose 25/01/2022).
It might seem useless to achieve this, but i have to use this functionality in my task.

I think you could be looking for this:
from https://developer.mozilla.org:
You can set a default value for the input with a date inside the value attribute, like so:
<input type="date" value="2017-06-01">

If I understand correctly, you want a default value for the date picker.
Then this should do:
<input type="date" id="start" name="trip-start"
value="2018-07-22"
min="2018-01-01" max="2018-12-31">
source

How do I format AntD form input fields such as phone numbers and SSNs in React?

I have an AntD form with an Input field for phone numbers, and another to capture SSN's. As a user types a phone number or SSN, I would like the fields to format accordingly.
For example, instead of the phone number being 1234567890 as typed into the field, it should format as (123) 456-7890 with it initially being (___) ___-____. Similarly, in the SSN field if a user types their SSN such as 123456789 it should format as 123-45-6789 with it initially being ###-##-####.
What I'm really looking for is the proper way to do this in AntD. So not necessarily fixing the approach I'm trying to get to work.
I've been trying a variety of approaches to solve this, but none ever seem to work for me. For example, I've tried:
Use onChange and create a normalizeInput function as outlined here.
After thinking to myself that I shouldn't need to reinvent the wheel and there must be an npm package that I can simply leverage, I tried installing and using react-number-format. It was formatting the field and contents the way that I wanted but I lost the AntD UI (the input field no longer looked like an AntD input field).
Tried playing with a Form's getFieldsValue and setFieldsValue tags but got nowhere fast. I probably just didn't know what I was doing.
Tried using AntD's InputNumber function instead once i saw it had a formatter field that'd do the trick. But I abandoned that approach given I didn't want the up and down arrow controls that come with an InputNumber widget.
Currently #1 sort of works but not quite and I'm not sure why. It uses onChange to read in the current value, and adjust it accordingly, but there are two problems..
previousValue becomes undefined on the 6th, 8th, and 10th digit. Why? You'll see it in console.log in my codesandbox below.
The UI's field never sets using the value tag. Why? I can see the value is changing via console.log, but would've thought the setState function would've set the state within onChange, and therefore the field would show the formatted version due to the value tag..?
Here is my codesandbox illustrating the problem (MyForm.js file).

check this
https://github.com/antoniopresto/antd-mask-input
is a library to make it.
The component is
<MaskedInput mask="11/1111" name="expiry" placeholder="mm/yyyy" onChange={this._onChange}/>
where you give the prop "mask", where you can make the format.
in your case it would be
<MaskedInput mask="(111) 111-1111" name="expiry" placeholder="mm/yyyy" onChange={this._onChange}/>

Using ng-model-options updateOn:blur with uib-datepicker popup

I have an input that allows a user to either type or select a date via the uib-datepicker calendar (https://angular-ui.github.io/bootstrap/). When the user clicks on the input the datepicker pops-up allowing a user to make a selection Here is the input:
<input
datepicker-append-to-body="calendarCtrl.appendToBody"
uib-datepicker-popup="calendarCtrl.dateFormat"
ng-model="calendarCtrl.ngModel"
ng-click="calendarCtrl.open"/>
I need to allow the option for the user to not update the ng-model until the user has blurred the input. To do that I am trying to use ng-model-options.
ng-model-options={updateOn: 'blur'}
This works great for when a user types a date into the input - the ngModel is not updated until a blur occurs and any validation isn't ran until blur. The problem is it breaks the functionality of the calendar popup in that nothing happens when a user then clicks on the open calendar to select a date. I'm assuming because when the user clicks on the calendar essentially a blur event is occurring on the input??
Has anyone came across this problem? Is there an ng-model-options option or something within the datepicker that would allow the user to still make a selection from the datepicker but not update the ng-model until a blur occurred on the input?
Thanks

Sounds like you could use a temporary property ng-model="calendarCtrl.tempSelectedDate" for ngModel in the Date Picker.
Then use the ngBlur event (https://docs.angularjs.org/api/ng/directive/ngBlur) to update the real property ie. set calendarCtrl.ngModel = calendarCtrl.tempSelectedDate.
Also, while nothing stops you using the scope property calendarCtrl.ngModel in ngModel, the code will be easier to read if you use more meaningful names like ng-model="calendarCtrl.dateSelected".
Here's a working demo http://plnkr.co/edit/90mDPqzadjPt09Tp4SlI?p=preview.
I forked and expanded someone else's datepicker plnkr with two changes: adding ng-blur="blurDate = startDate" to the <input> & displaying the value with Blur Date: {{ blurDate }}.

Dojo dateTextBox onChange only after valid constraints have passed

I have a dojo DateTextBox that looks like this:
<input
dojoType="dijit.form.DateTextBox"
dojoAttachPoint="axisStart"
dojoAttachEvent="onChange:_onChange"
data-dojo-props="constraints:{min: new Date(1990,01,01)}"
tabIndex="2" />
If I use the date picker to go back before 1990, I can't as they are striked out. Expected.
However, if I manually type the date to be anything before 1990 and then leave the inuput field, the onChange event still fires. I don't want it to.
The dojo alert does display "This value is out of range" correctly.
Is there a way I can have the onChange event fire only if the constraints are met? Or is there a property I can look for in the _onChange function in order not to run the code?
Thanks in advance.

I think you're approaching the issue from the wrong angle, it should change because the value of the dijit does change.
You can check if the widget is valid by calling the _isValid() function of the dijit. Could it be that you need to do somthing like the following:
dijit.on('change', function(e){
if (dijit._isValid()){
//run some code
}
});

changing an input value using YUI

I want to use the YUI calendar widget to provide users with a way of selecting the date for an input form.
The question I need anwered is how to do I change the value of input elements using YUI?
<input type="hidden" name="date" id="dateEntry" value="I NEED TO KNOW HOW TO CHANGE THIS!" />
I've looked everywhere but can't find anything.
And if this isn't possible using YUI, is it possible using jQuery or another library? And if so is there a similar calendr module I can use alongside a library that can do this?
Hope that makes sense :/

To change the value try this:
YUI().use('node', function(Y) {
var input = Y.one('#dateEntry');
input.set('value', 'new value!');
});
HERE is the documentation.
HERE is a working example.