JQuery cxCalendar date selector, jquerycxcalendar

JQuery cxCalendar date selector, jquerycxcalendar

CxCalendar is a jQuery-based date selector plug-in.

It is flexible and free. You can customize the appearance, date range, and returned format.

• Version:
• JQuery v1.7 +

• JQuery cxCalendar v1.5

• Github

How to load a CSS file

1. <Link rel = "stylesheet" href = "jquery.cxcalendar.css">

Copy and load JavaScript files

1. <script src="jquery.js"></script> 
2. <script src="jquery.cxcalendar.js"></script>

Copy the DOM Structure

1. <Input id = "element_id" type = "text">

Copy and call cxCalendar

1. $ ('# Element_id'). cxCalendar ();

Copy to set global default value

1. // After <script src = "jquery. cxcalendar. js"> </script> is introduced, Set
2. $.cxCalendar.defaults.startDate = 1980;  
3. $.cxCalendar.defaults.language = { 
4.   monthList: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 
5.   weekList: ['Sun', 'Mon', 'Tur', 'Wed', 'Thu', 'Fri', 'Sat'] 
6. }; 

Copy parameter description

Name	Default Value	Description
StartDate	1950	Start date If the year is specified, set the value to a 4-digit number. If you specify a day and set the value to a string or timestamp, this value can benew Date(value)Processing
EndDate	2030	End Date If the year is specified, set the value to a 4-digit number. If you specify a day and set the value to a string or timestamp, this value can benew Date(value)Processing
Date	Undefined	Default date The current date is obtained by default. A custom string or Timestamp can be used.new Date(value)Processing ※The priority of value in input must be advanced.
Type	'Date'	Date type (New in v1.5) 'Date': Select date only 'Datetime': select the date and time
Format	'Yyyy-MM-DD'	Date value format (since v1.5, the type of previous versions is renamed to format) 'Yyyy': Year, which has four digits 'Yy': year, only two digits at the end 'Mm': month with leading zero (01-12) 'M': Month (1-12) 'Dd': The day of the month, with a leading zero (01-31) 'D': The day of the month (1-31) 'Hh ': hour, 24-hour format, number with leading zero (00-23) 'H': hour, in 24-hour format (0-23) 'Hh': hour, 12-hour format, number with leading zero (01-12) 'H': hour, 12-hour format (1-12) 'Mm': minute, number with leading zero (00-59) 'M': minute (0-59) 'Ss': minute, number with leading zero (00-59) 'S ': minute (0-59) 'Time': Timestamp 'String': Date STRING, for example, Wed Jul 28 1993
Wday	0	The day of the week, which can be set to a number between 0 and 6. 0: Sunday 1: Monday 2: Tuesday 3: Wednesday 4: Thursday 5: Friday 6: Saturday
Position	Undefined	Position displayed on the panel
BaseClass	Undefined	Adds a class to the Panel container and does not overwrite the default class.
Language	Undefined	Custom language. The value type is a string or object. If it is a string, it is the attribute name in the language configuration file (you need to loadjquery.cxcalendar.languages.js) If it is an object, the language set by the object

Data Attribute Parameters

Name	Description
Data-start-date	Start date
Data-end-date	End Date
Data-type	Date type
Data-format	Date value format
Data-position	Position displayed on the panel
Data-wday	Day of the week
Data-language	Custom Language

1. <Input id = "element_id" type = "text" value = "1988-1-31" data-start-date = "2000" data-end-date = "2015" data-format =" YYYY/M/D "data-language =" en ">

Copy

※The priority of the parameter set for the data attribute is higher than the value set for the parameter during the call.

Multilingual configuration instructions

Only Loadjquery.cxcalendar.languages.jsTo automatically display the corresponding language based on your language environment.

Name	Default Value	Description
MonthList	['1', '2', '3', '4', '5', '6', '7', '8', '9 ', '10', '11', '12']	The name of the month.
WeekList	['Day', 'yi', '2', '3', '4', '5', '6']	The name of the week. Orders from Sunday.
Holiday	[]	Holiday configuration.

API

1. var Api; 
2. $('#element_id').cxCalendar(function(api){ 
3.   Api = api; 
4. }); 
5. // Or pass in as the second parameter
6. $('#element_id').cxCalendar({ 
7.   type: 'YYYY/M/D' 
8. }, function(api){ 
9.   Api = api; 
10. });

Copy

Name	Description
Show ()	Display Panel
Hide ()	Hide panel
GetDate (style)	Obtain the selected date (the style format is the same as the format parameter)
SetDate (value)	Input a string to set the date
SetDate (year, month, day)	Input the year, month, and day to set the date.
GotoDate (value)	Input a string to adjust the date (only display panel changes, do not set the value)
GotoDate (year, month)	Input year and month respectively to adjust the date (only display panel changes, do not set the value)
ClearDate ()	Clear date value
SetOptions (opt)	Reset Parameters

Online instance

Basic example	Instance Preview
Select Date and Time	Instance Preview
Date range	Instance Preview
Location settings	Instance Preview
Multiple Languages and holidays	Instance Preview
API	Instance Preview

 

Download