Use of foundation-datepicker-1.5.6

The younger brother recently had to deal with some bugs in the front-end page and now uses the foundation-datepicker-1.5.6 plugin

The summary is as follows,

Import the package of the corresponding plug-in, including js main package, Chinese plug-in js, css style

This is at the top of the page

foundation-datepicker.css

The following two are at the bottom of the page, that is, below the </body>

foundation-datepicker.js

foundation-datepicker.zh-CN.js

loaded code

$('#calendar2').fdatepicker({
   format: 'yyyy-mm-dd',
   language : 'zh-CN',
   startDate:StartTime,
     endDate :endTime,
     leftArrow:'<<',
     rightArrow:'>>',
    datesDisabled:times
    
}).on('changeDate',function (ev) {
          $("#right2").text(format2(ev.date.valueOf(),"yyyy-MM-dd").substring(0,10));

});

Attribute Explanation:

There are several values ​​listed on the commonly used official website documents. But in the actual production and use process, many may be used. I looked at the source code and found some individual ones, which are only enough for my personal use:

format	string	'mm/dd/yyyy'	the date format, combination of d, dd, m, mm, yy, yyyy, hh, ii.
language	string	'on'	two-char iso shortcut of language you want to use
weekStart	integer	0	day of the week start. 0 for Sunday - 6 for Saturday
startView	string|integer	month	set the start view mode. Accepts: 'decade' = 4, 'year' = 3, 'month' = 2, 'day' = 1, 'hour' = 0
minView|maxView	string|integer		set a limit for view mode. Accepts: 'decade' = 4, 'year' = 3, 'month' = 2, 'day' = 1, 'hour' = 0
pickTime	boolean	false	enables hour and minute selection views, equivalent of minView = 0, else minView = 2
initialDate	date string	null	sets initial date. The same effect can be achieved with value attribute on input element.
startDate	date	-Infinity	disables all dates before given date
endDate	date	Infinity	disables all dates after given date
keyboardNavigation	boolean	true	with input fields, allows to navigate the datepicker with arrows. However, it disables navigation inside the input itself, too
daysOfWeekDisabled	Array of integers	[]	disables all dates matching the given days of week (0 = Sunday, 6 = Saturday)
datesDisabled	Array of date strings	[]	disables the specified dates

 The above are some parameters given by the official website, but I also used the two parameters leftArrow rightArrow in js, which is the td content of the edit date plugin that can change the month left and right.

.on('changeDate',function (ev) { $("#right2").text(format2(ev.date.valueOf(),"yyyy-MM-dd").substring(0,10));

});

It means to add a listener. When there is a choice, get the selected date and give it to the position you want to display. This is also in the example on the official website, but sometimes you can't see it after going over the wall. So I wrote it down

Above, take a study note