日期:2012-4-16 来源:GBin1.com
在线演示
本地下载
今天分享一个独立的日期选择插件Kalendae
,Kalendae
是
一个强大健壮的独立日期选择器。如果你不想使用重量的jQuery
UI类库的话,这个插件肯定是一个不错的备选。Kalendae包含了丰富的插件选项,配置,属性,事件和函数。给予你丰富和灵活的方式来创建日期选择
器。当然它内含了一个强大的日期处理javascript插件 - moment.js
, 这个类库我们也曾经介绍过(不容错过的超棒Javascript日期处理类库-Moment.js
),能够灵活的处理和格式化日期。
主要特性
- 完全支持各平台移植,没有任何类库依赖,不要求jQuery, prototype,或者Mootools。只需要添加脚本和样式
- 支持主题和皮肤。缺省的主题只使用一个图片文件,其它配置使用CSS
- 支持单天,多天或者日期区域选择
- 可配置月份选择
- 可作为一个行内的插件在页面中使用,或者绑定输入框来调用
- 可绑定到页面中任何元素,不仅仅是已命名元素
- 支持多种类型配置例如,隔日选择/工作日选择 ,未来/过去,可定义为数组或者通过callback配置
- 日期输出类型可支持不同的格式,利用moment.js来高效处理和解析日期
如何使用
导入对应的javascript和CSS:
<link rel="stylesheet" href="build/kalendae.css" type="text/css" charset="utf-8">
<script src="build/kalendae.js" type="text/javascript" charset="utf-8"></script>
针对不同的使用环境设置,如下:
单日期选择
new Kalendae(document.body, {
months:1,
mode:'single',
selected:Kalendae.moment().subtract({M:1})
});
new Kalendae({
attachTo:document.body,
months:2,
mode:'single',
selected:Kalendae.moment().subtract({M:1})
});
new Kalendae({
attachTo:document.body,
months:3,
mode:'single',
selected:Kalendae.moment().subtract({M:1})
});
日期范围选择
...
来源:强大的独立日期选择器(date picker)插件 - Kalendae
分享到:
相关推荐
bootstrap-daterangepicker-master 时间段选择器
bootstrap-daterangepicker- 基于 Bootstrap 框架的日期范围选择控件
查找v1文档暗模式演示版安装纱yarn add vue-ctk-date-time-picker NPM npm i --save vue-ctk-date-time-picker用法ES6模块/ CommonJS import VueCtkDateTimePicker from 'vue-ctk-date-time-picker' ;import 'vue-...
picker-view时间选择器/年、月、日,闰年、天数、大月、小月 自定义picker-view年月日选择器 picker选择器picker-view选择器(案例)
微信小程序-自定义picker选择器wxminiprogram-picker-master.zip
这是一个jquery插件,可以实现年月份选择功能,简约美观,短小精悍,方便使用,同时也适合jquery插件开发学习。
实现无限循环滚动的选择器(picker)。比如,循环显示0、1、2、3、4、0、1、2、3、4、0... 注意:请在Mac下解压使用
React本机日期选择器 这是一个具有以下主要功能的React Native Date Picker: :mobile_phone: 支持iOS和Android :two_o’clock: 3种不同的模式:时间,日期,日期时间 :globe_showing_Europe-Africa: 多种语言 :...
时间选择器,可以选择时间段内的时间,有效提高jsp代码
https://blog.csdn.net/xuelang532777032/article/details/121287203,内有博客截图,方便没有vip的小伙伴下载
vue-date-range-picker使用Bootstrap 4样式进行日期范围选择的vue组件实时演示(jsfiddle)功能日期范围选择比较fea vue-date-range-picker使用Bootstrap 4样式进行日期范围选择的vue组件实时演示( jsfiddle)功能...
React日期范围选择器 使用material-ui组件的React日期范围选择器。 现场演示: : 用法 npm install @matharumanpreet00/react-daterange-picker --save # or with yarn yarn add @matharumanpreet00/react-date...
npm ins Vue Date Picker受材料设计启发的vue日期选择器组件格式化选定日期API安装$ npm install vue-md- date-picker-从'vue-md-date-picker'保存导入DatePicker示例最常见的用例 请注意,有一个v-if指令和一个@...
jQuery Date Range Picker是一款允许用户选择一个日期时间范围的jQuery日期选择器插件。整个日期选择器插件使用CSS来渲染样式,可以非常容易的使用CSS来定制它的皮肤。它的兼容性非常好,支持IE6+的IE浏览器。
uni-app picker选择器
react-native-daterange-picker 一个React Native组件,用于选择日期范围或单个日期。 完全可定制使用Moment.js处理日期安装yarn add react-native-daterange-picker 或者npm install --save react-native-daterange...
演示版codepen演示: ://codepen.io/limbara/pen/ZEQxoZZ沙盒演示: ://codesandbox.io/s/example-vue-time-date-range-picker-byw7g 克隆存储库并运行“ npm install && npm run serve”以进行本地演示安装npm i ...
使用uniapp制作微信小程序时候,需要一个城市选择框,但是微信中的弹框样式不可自定义,出现了与项目主题样式不一致问题,于是使用uniapp中picker-view封装底部选择弹框选择器,实现支持自定义确定和取消按钮颜色...
jQuery双日历插件,所需js,css齐全
VueRangedatePicker日期选择器,具有范围选择演示https://bliblidotcom.github.io/vue-rangedate-picker/demo/安装npm install --save vue VueRangedatePicker日期选择器,具有范围选择演示...rangedate-picker / demo ...