Getting Started with the React DateTime Picker in 5 Minutes

[@younggiltak7719]

Exactly what I was looking for!! thanks heaps!

[@SyncfusionInc]

Hi,
We are glad that you have found it helpful.

[@kikiken4287]

same here!!! thank you so much !

[@nusaratvajahat8882]

@@SyncfusionInc
Is it possible to change time
to 24h format ???

[@ashishvishwakarma9247]

Can we get 24 hours timing here in place of 12 hours??

[@SyncfusionInc]

Hello Ashish,
Yes, you can display the date and time in 24-hour format by using the format property as "dd-MMM-yy HH:mm". The "HH" format specifier will display the hour in 24-hour format. Please find the code snippet and sample for your reference.
function Default() {
React.useEffect(() => {
updateSampleSection();
}, []);
return (







);
}
export default Default;
Sample: stackblitz.com/edit/react-uphbc6?file=index.js

[@hariprasad361]

thank you sir 🎉🎉🎉

[@shubhamh7451]

the component is great, only 1 improvement can be to make the input field not typable, since it is not updating state on change. Rest it is great!

[@shubhamh7451]

or is there a way to disable only the input typing part, that i am not aware of?

[@SyncfusionInc]

Hi Shubham,
Thank you for reaching out. You can set allowEdit to false to make the input field not editable. Please refer to the following documentation, ej2.syncfusion.com/react/documentation/api/datetimepicker/#allowedit.

[@SyncfusionInc]

Hi Shubham,
Thank you for reaching out. You can set allowEdit to false to make the input field not editable. Please refer to the following documentation, ej2.syncfusion.com/react/documentation/api/datetimepicker/#allowedit.

[@shubhamh7451]

@@SyncfusionInc insane! thank you!

[@kalyanjetty3538]

Change Event for this please it is not working for me

[@SyncfusionInc]

Hi,
Thank you for reaching out to us. Please refer to the following link,
stackblitz.com/edit/react-uetk5v. Code has been for change event and you can get the newly changed values in the change event.

[@joshua4262]

@@SyncfusionInc Still the Change event is not working fine. I've tried everything. Like when I give change event, the calendar and time tabs would not open.

[@birane_ba]

@@joshua4262 same for me ;)

[@ismshop6802]

please how can i change color ?

[@SyncfusionInc]

Hello,
We can look into this and get back to you but response times via our TH-cam videos are slower than our regular support. Have you opened a support ticket or tried our live chat? www.syncfusion.com/support/directtrac/incidents/newincident
If you have a retail or flat license, you also have access to our support chat.

[@SyncfusionInc]

You can customize the background color, font color, size, etc.. by overriding the existing style classes of the component. For further details please refer to the documentation and sample for reference.
Sample Link: stackblitz.com/edit/react-vduf4c?file=index.html
Docs: ej2.syncfusion.com/react/documentation/datetimepicker/style-appearance/
[Index.html]
/* To specify height and font size */
.e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input {
font-size: 20px;
color: red;
background-color: blanchedalmond;
}
/* To specify background color and font size */
.e-datetime-wrapper .e-input-group-icon.e-date-icon, .e-datetime-wrapper .e-input-group-icon.e-time-icon {
font-size: 16px;
background-color: blanchedalmond;
}

[@sumedhadeshpande4052]

Using Syncfusion was able to display date and time picker in react application but getting below error message when application starts:
This application was built using a trial version of Syncfusion Essential Studio. Please include a valid license to permanently remove this license validation message. You can also obtain a free 30 day evaluation license to temporarily remove this message during the evaluation period. Please refer to this help topic for more information.
Can you please help to remove this message?

[@sumedhadeshpande4052]

Seems this is a commercial product. Can you please help with how to add a free trial version into application to remove message

[@SyncfusionInc]

Hello Sumedha,
Thanks for trying our React components. The only way to remove the watermark is to sign up for a community license or pay for a product.
Most developers qualify if their company earns less than $1 MIL USD in annual revenue and has 5 or fewer developers. www.syncfusion.com/sales/communitylicense

[@mohdasim4581]

it is paid version

[@govinda399]

how to store datetime value ?

[@SyncfusionInc]

Hi Govind,
Thank you for watching our video. The DateTime Picker returns a value of type date object. To provide a solution, we need more information on your requirement and where you want to store this value.

[@vijayprajapati7484]

Please Make a Separate Video On Flutter PDF ..How To Create And How To Save And How Share That PDF

[@SyncfusionInc]

Hello Vijay, we will add it to our list of upcoming videos. Thanks for the suggestions!

[@aShutoShjn15]

is this paid?

[@SyncfusionInc]

Hello Ashutosh,
That's a great question! If you have 5 or fewer developers and make less than $1 Million USD in annual revenue, you may qualify for the community license. www.syncfusion.com/products/communitylicense
Otherwise, we have options to license one product, multiple products, individual team members, or entire projects or companies. www.syncfusion.com/sales/products
Please let us know if we can be of further assistance.
Warm regards,
Ginger