jQWidgets
  • Docs
  • License and Pricing
  • Services
  • Community
    • Forums
    • Blogs
    • Follow Us
    • Client Login
  • About
    • About Us
    • Contact Us
    • FAQ
  • Products
    • Angular
    • React
    • Vue
    • jQuery
    • Web Components
    • Blazor
    • Templates
  • Download
Javascript/jQuery UI Widgets
  • Javascript/jQuery
  • Angular
  • Vue
  • React
  • Web Components
  • Blazor
  • ASP .NET MVC
  • Templates
  • Theme Builder
Show Demo List

Web UI Widgets

  • jqxGrid
  • jqxTabs
  • jqxTextArea
  • jqxWindow
  • jqxKnob
  • jqxResponsivePanel
  • jqxGantt(NEW)
  • jqxChart
  • jqxMenu
  • jqxInput
  • jqxDocking
  • jqxGauge
  • jqxNavBar
  • jqxPivotGrid
  • jqxTree
  • jqxPasswordInput
  • jqxNotification
  • jqxBarGauge
  • jqxTagCloud
  • jqxScheduler
  • jqxNavigationBar
  • jqxMaskedInput
  • jqxPopOver
  • jqxExpander
  • jqxLoader
  • jqxTreeGrid
  • jqxListMenu
  • jqxComplexInput
  • jqxTooltip
  • jqxRating
  • jqxDraw
  • jqxDataTable
  • jqxToolBar
  • jqxFormattedInput
  • jqxColorPicker
  • jqxRangeSelector
  • jqxDragDrop
  • jqxTreeMap
  • jqxComboBox
  • jqxNumberInput
  • jqxScrollView
  • jqxSlider
  • jqxDataAdapter
  • jqxEditor
  • jqxDropDownList
  • jqxDateTimeInput
  • jqxProgressBar
  • jqxScrollBar
  • jqxResponse
  • jqxRibbon
  • jqxListBox
  • jqxCalendar
  • jqxFileUpload
  • jqxSplitter
  • jqxValidator
  • jqxSplitLayout
  • jqxBarcode (NEW)
  • jqxQRcode (NEW)
  • jqxLayout
  • jqxButtons
  • jqxKanban
  • jqxBulletChart
  • jqxSortable
  • jqxPanel
  • jqxDockingLayout
  • jqxForm
  • jqxTimePicker
  • jqxTimeline
  • jqxHeatMap

Integration & Tools

  • Chart Studio(Beta)
  • JSEditor
  • Angular
  • Typescript
  • KnockoutJS
  • Bootstrap
  • RequireJS
  • jQuery Mobile
  • ASP .NET
  • PHP
  • Java
  • Mobile Demos

jqxDateTimeInput

  • Default Functionality
  • Localization
  • Full Edit (NEW)
  • Time Input
  • Restrict date range
  • Format Date
  • Disabled
  • Templates
  • Date & Time
  • Range Selection
  • DropDown Horizontal Alignment
  • DropDown Vertical Alignment
  • Animation
  • Fluid Size
  • Events
  • Init from Input tag
  • Keyboard Navigation
  • Right to Left Layout
Theme:
Fluent
  • Demo
  • View Source
  • API Reference

Introduction

jqxDateTimeInput represents a highly configurable widget for displaying and selecting date and time values by using a popup Calendar display or by keyboard input into the text field. Try jqxDateTimeInput in our jsEditor - cloud solution for JavaScript, HTML and CSS editing, hosting and sharing your web development ideas!
Demos

Features

  • Localization
  • Keyboard Input and Navigation
  • Range Selection
  • Date and Time Formatting
  • Works across devices and browsers
  • Web Standards Compliant
  • Rich and easy to use JavaScript API
  • Easy customization and built-in themes

Localization

jqxDateTimeInput provides support for localizing its input field and popup calendar for different languages and date formats. Each localization is contained within its own file with the language code appended to the name, e.g. globalize.culture.de-DE.js for German. The desired localization file should be loaded along with the jqxdatetimeinput.js.
jquery-date-picker-localization

Range Selection

jqxDateTimeInput allows you to easily select a range of dates. To enable the feature, set the "selectionMode" property to "range"

jquery-date-picker-localization

Keyboard Input and Navigation

jqxDateTimeInput has built-in advanced and intuitive keyboard input and navigation. Users can easily input the date and time into the input field or navigate through dates and different months by using the popup calendar. Keyboard navigation is perfect for application scenarios where accessibility is an important factor.
jquery-date-picker-keyboard-input
You can use the arrow keys on the keyboard to move around the DateTime parts. Press the down arrow to spin down the selected value. Press the up arrow to spin up the value. Press the right and left arrow keys to move left and right one DateTime part at a time. You can use the keyboard number keys to edit a DateTime part.

Date and Time Formatting

jqxDateTimeInput has built-in date parsing functionality that allows you to display date feedback in a variety of ways. You can choose a format by changing the value of a single property.
jquery-date-picker-formatting

jQWidgets
  • Facebook
  • Twitter
  • Demo
  • Download
  • Documentation
  • License and Pricing
  • Services
  • Forums
  • About
  • Terms of Use
  • Privacy Policy
  • Contact Us

jQWidgets © 2011-2025. All Rights Reserved.