foundation-datepicker-1.5.6 的使用

小弟最近要处理前端页面的一些bug 现在就使用了foundation-datepicker-1.5.6 插件

小结如下，

导入对应插件的包，有js主包，中文插件js，css样式

这个在页面上方

foundation-datepicker.css

下面两个在页面下方也就是</body>下面

foundation-datepicker.js

foundation-datepicker.zh-CN.js

加载的代码

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

});

属性解释：

常用的官网文档上值列出了几个。但实际生产使用过程中可能要用到多个，我看了一下源码，才找到一些个别的，仅够我个人使用：

format	string	'mm/dd/yyyy'	the date format, combination of d, dd, m, mm, yy, yyyy, hh, ii.
language	string	'en'	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

以上是官网给出的一些参数，但我在js中还用到了leftArrow rightArrow 这两个参数，是编辑日期插件可以左右换月份的td内容。

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

});

表示添加一个监听器，有选择时，获取选择的日期给到你想显示的位置，这个也是官网示例中的，但翻墙后有时看不到。所以我就记下来了

以上，做个学习笔记

foundation-datepicker-1.5.6 的使用

猜你喜欢