animationType
|
string
|
'slide'
|
Sets or gets the animationType property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, animationType: "fade", theme:"light" } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
allowNullDate
|
boolean
|
true
|
Sets or gets the allowNullDate property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30,allowNullDate:false, theme: "light" } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
allowKeyboardDelete
|
boolean
|
true
|
Sets or gets the allowKeyboardDelete property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30,allowKeyboardDelete:false, theme: "light" } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
clearString
|
string
|
'Clear'
|
Sets or gets the clearString property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, clearString: "Clear", theme:"light" } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
culture
|
string
|
default
|
Sets or gets the culture property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, culture: "de-DE", theme:"light" } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
closeDelay
|
number
|
400
|
Sets or gets the closeDelay property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30,closeDelay:2000, theme: "light" } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
closeCalendarAfterSelection
|
boolean
|
true
|
Sets or gets the closeCalendarAfterSelection property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30,closeCalendarAfterSelection:false, theme: "light" } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
dropDownHorizontalAlignment
|
string
|
'left'
|
Sets or gets the dropDownHorizontalAlignment property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, dropDownHorizontalAlignment: "right", theme:"light" } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
dropDownVerticalAlignment
|
string
|
'bottom'
|
Sets or gets the dropDownVerticalAlignment property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, dropDownVerticalAlignment: "top", theme:"light" } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
disabled
|
boolean
|
false
|
Sets or gets the disabled property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30,disabled:true, theme: "light" } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
enableBrowserBoundsDetection
|
boolean
|
false
|
Sets or gets the enableBrowserBoundsDetection property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30,enableBrowserBoundsDetection:true, theme: "light" } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
enableAbsoluteSelection
|
boolean
|
false
|
Sets or gets the enableAbsoluteSelection property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30,enableAbsoluteSelection:true, theme: "light" } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
firstDayOfWeek
|
number
|
0
|
Sets or gets the firstDayOfWeek property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30,firstDayOfWeek:3, theme: "light" } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
formatString
|
string
|
dd/MM/yyyy
|
Sets or gets the formatString property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, formatString: "d", theme:"light" } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
height
|
number
|
null
|
Sets or gets the height property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light" } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
min
|
date
|
Date(1900, 1, 1)
|
Sets or gets the min property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light", min:"min" } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
max
|
date
|
Date(2100, 1, 1)
|
Sets or gets the max property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light", max:"max" } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
openDelay
|
number
|
350
|
Sets or gets the openDelay property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light",openDelay:2000 } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
placeHolder
|
string
|
""
|
Sets or gets the placeHolder property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light", placeHolder:"Null Value" } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
popupZIndex
|
number
|
20000
|
Sets or gets the popupZIndex property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light",popupZIndex:99999 } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
rtl
|
boolean
|
false
|
Sets or gets the rtl property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light",rtl:true } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
readonly
|
boolean
|
false
|
Sets or gets the readonly property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light",readonly:true } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
showFooter
|
boolean
|
false
|
Sets or gets the showFooter property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light",showFooter:true } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
selectionMode
|
string
|
'default'
|
Sets or gets the selectionMode property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light", selectionMode:"range" } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
showWeekNumbers
|
boolean
|
true
|
Sets or gets the showWeekNumbers property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light",showWeekNumbers:false } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
showTimeButton
|
boolean
|
false
|
Sets or gets the showTimeButton property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light",showTimeButton:true } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
showCalendarButton
|
boolean
|
true
|
Sets or gets the showCalendarButton property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light",showCalendarButton:false } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
theme
|
string
|
''
|
Sets or gets the theme property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light" } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
template
|
string
|
'default'
|
Sets or gets the template property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light", template:"primary" } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
textAlign
|
string
|
left
|
Sets or gets the textAlign property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light", textAlign:"right" } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
todayString
|
string
|
'Today'
|
Sets or gets the todayString property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light", todayString:"Today" } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
value
|
date
|
Today's Date
|
Sets or gets the value property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light", value:"value" } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
width
|
number
|
null
|
Sets or gets the width property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light" } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
|
change
|
Event
|
|
Code examples
Bind to the change event of jqxDateTimeInput.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light" } window.onload = function() { document.querySelector( "jqx-date-time-input").addEventListener("change", function(event) { // Your code here. }); }; </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
close
|
Event
|
|
Code examples
Bind to the close event of jqxDateTimeInput.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light" } window.onload = function() { document.querySelector( "jqx-date-time-input").addEventListener("close", function(event) { // Your code here. }); }; </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
open
|
Event
|
|
Code examples
Bind to the open event of jqxDateTimeInput.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light" } window.onload = function() { document.querySelector( "jqx-date-time-input").addEventListener("open", function(event) { // Your code here. }); }; </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
textchanged
|
Event
|
|
Code examples
Bind to the textchanged event of jqxDateTimeInput.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light" } window.onload = function() { document.querySelector( "jqx-date-time-input").addEventListener("textchanged", function(event) { // Your code here. }); }; </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
valueChanged
|
Event
|
|
Code examples
Bind to the valueChanged event of jqxDateTimeInput.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light" } window.onload = function() { document.querySelector( "jqx-date-time-input").addEventListener("valueChanged", function(event) { // Your code here. }); }; </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
|
close
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light" } window.onload = function() { document.querySelector( "jqx-date-time-input").close(); } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
destroy
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light" } window.onload = function() { document.querySelector( "jqx-date-time-input").destroy(); } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
focus
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light" } window.onload = function() { document.querySelector( "jqx-date-time-input").focus(); } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
getRange
|
Method
|
|
Parameter |
Type |
Description |
date |
date/string |
|
Return Value
Object
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light" } window.onload = function() { var result = document.querySelector( "jqx-date-time-input").getRange(); } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
getText
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
String
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light" } window.onload = function() { var result = document.querySelector( "jqx-date-time-input").getText(); } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
getDate
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
Date
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light" } window.onload = function() { var result = document.querySelector( "jqx-date-time-input").getDate(); } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
getMaxDate
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
Date
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light" } window.onload = function() { var result = document.querySelector( "jqx-date-time-input").getMaxDate(); } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
getMinDate
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
Date
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light" } window.onload = function() { var result = document.querySelector( "jqx-date-time-input").getMinDate(); } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
open
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light" } window.onload = function() { document.querySelector( "jqx-date-time-input").open(); } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
setRange
|
Method
|
|
Parameter |
Type |
Description |
date |
date/string |
|
date2 |
date/string |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light" } window.onload = function() { document.querySelector( "jqx-date-time-input").setRange(new Date(2017, 9, 20),new Date(2017, 9, 22)); } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
setMinDate
|
Method
|
|
Parameter |
Type |
Description |
date |
date/string |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light" } window.onload = function() { document.querySelector( "jqx-date-time-input").setMinDate(new Date(2017, 9, 20)); } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
setMaxDate
|
Method
|
|
Parameter |
Type |
Description |
date |
date/string |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light" } window.onload = function() { document.querySelector( "jqx-date-time-input").setMaxDate(new Date(2017, 9, 20)); } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
setDate
|
Method
|
|
Parameter |
Type |
Description |
date |
date/string |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light" } window.onload = function() { document.querySelector( "jqx-date-time-input").setDate(new Date(2017, 9, 20)); } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|
val
|
Method
|
|
Parameter |
Type |
Description |
value |
date/string(optional) |
|
value2 |
date/string(optional) |
The end of range when the selectionMode is "range" |
Return Value
Date/String
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DateTimeInput Custom Element Settings</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript"> JQXElements.settings[ "datetimeInputSettings"] = { width:250,height:30, theme: "light" } window.onload = function() { var result = document.querySelector( "jqx-date-time-input").val(); } </script></head><body> <jqx-date-time-input settings="datetimeInputSettings"></jqx-date-time-input>
|