`

强大的独立日期选择器(date picker)插件 - Kalendae

    博客分类:
  • JS
阅读更多

日期:2012-4-16  来源:GBin1.com

强大的独立日期选择器(date picker)插件 - Kalendae

在线演示   本地下载

今天分享一个独立的日期选择插件KalendaeKalendae 是 一个强大健壮的独立日期选择器。如果你不想使用重量的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

 

分享到:
评论

相关推荐

    daterangepicker-1.3.7.js

    4. **daterangepicker-1.3.7.js**: 这就是我们主要关注的文件,包含了 daterangepicker 插件的代码,提供了创建、配置和管理日期范围选择器的接口和功能。 使用该插件时,开发者通常会通过以下步骤集成到项目中: 1...

    elementui elementUI - date-picker.zip

    总的来说,ElementUI 的日期选择器组件 `el-date-picker` 提供了丰富的定制选项,允许开发者根据需求调整其外观和行为。通过理解并熟练应用这些配置,我们可以创建符合用户体验的、具有个性化的日期和时间选择功能。...

    bootstrap-daterangepicker- 基于 Bootstrap 框架的日期范围选择控件

    Bootstrap-daterangepicker 是一个高度可定制且功能丰富的日期范围选择插件,它建立在流行的前端框架 Bootstrap 之上。这个插件允许用户在网页上方便地选取一个日期范围,通常用于筛选数据或者设置时间跨度,比如在...

    bootstrap-daterangepicker-master

    在"bootstrap-daterangepicker-master"这个压缩包中,你将找到以下主要组成部分: 1. **源代码**:这个包包含了JavaScript和CSS文件,这些是Daterangepicker的核心。主要的JavaScript文件是`daterangepicker.js`,...

    bootstrap3插件-时间范围自定义选择器DateRangePicker.zip

    总的来说,Bootstrap3的DateRangePicker插件是一个强大且易于使用的工具,能够提升用户在时间选择上的体验,同时为开发者提供了丰富的定制选项和灵活的扩展性。无论是在企业级应用还是个人项目中,它都是一个值得...

    基于picker-view的日期选择器

    基于picker-view的日期选择器,只有年月日选择,uni-app自带的组件不适合利用按钮触发调用,该组件可用在uni-popup里,点击按钮获取

    picker-view自定义日期、日期选择.zip

    综上所述,构建一个自定义的`picker-view`日期选择器涉及到了对`picker-view`组件的使用、年月日的逻辑处理、闰年和大小月的判断,以及动态更新选项数组等多个方面。在实际开发中,根据具体需求,还可以添加更多功能...

    vue-date-picker-master.zip

    Vue.js 是一款非常流行的前端JavaScript框架,...总之,"vue-date-picker-master.zip"包含了一个基于Vue.js的日历组件的完整实现,你可以根据项目需求进行集成和定制,同时利用Vue的特性实现高效且灵活的日期选择功能。

    一个简约美观的月份选择器插件month-picker

    `month-picker`是一款基于jQuery的月份选择器插件,它提供了简洁且美观的界面,让用户能够轻松选择年份和月份,简化了传统输入框中手动输入日期的繁琐过程。 ### 插件特点 1. **简约设计**:`month-picker`注重...

    vue element-ui el-date-picker限制选择时间为当天之前的代码

    其中,`el-date-picker`组件是一个非常实用的日期选择器,它可以轻松集成到各种表单中。但有时候开发者需要根据实际需求对日期选择范围做出限制,比如限制用户只能选择当天或之前的时间。 本文的核心知识点是探讨...

    lb-picker选择器示例.rar

    在uni-app框架中,lb-picker选择器是一种常用的交互组件,用于实现用户在多个选项中进行选择的功能。这个组件是基于JavaScript和Vue.js技术构建的,适用于移动应用开发,特别是那些需要用户输入特定信息如日期、时间...

    (0018)-iOS/iPhone/iPAD/iPod源代码-选择器(Picker)-Loop Picker

    在iOS开发中,选择器(Picker)是一种常用的用户界面组件,用于展示一组可选项供用户选择。本项目“(0018)-iOS/iPhone/iPad/iPod源代码-选择器(Picker)-Loop Picker”专注于实现一个特殊类型的Picker,即...

    vue-date-range-picker-使用Bootstrap 4样式进行日期范围选择的Vue组件-Vue.js开发

    vue-date-range-picker使用Bootstrap 4样式进行日期范围选择的vue组件实时演示(jsfiddle)功能日期范围选择比较fea vue-date-range-picker使用Bootstrap 4样式进行日期范围选择的vue组件实时演示( jsfiddle)功能...

    vue-ctk-date-time-picker:VueJS组件选择日期和时间,包括范围模式

    查找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-...

    daterangepicker汉化配置

    在提供的"bootstrap-daterangepicker-master"压缩包中,包含了插件的主要源代码和可能的汉化文件。"bootstrap-daterangepicker-master"通常包含了以下部分: 1. **源代码文件**:如JavaScript(js)和CSS(css)...

    Bootstrap+daterangepicker日期范围选择器

    daterangepicker则是Bootstrap生态系统中的一个插件,专门用于创建日期范围选择器,它允许用户在界面上方便地选择或输入两个日期之间的范围。 daterangepicker插件在网页设计中尤其有用,例如在预订系统、数据分析...

    H5移动端选择器,layPicker移动端日期选择器

    总结,`layPicker`是一款强大且灵活的移动端选择器插件,它能够帮助开发者构建出符合移动设备特性的交互界面。通过深入理解其功能和用法,我们可以轻松地在项目中实现高效、美观的日期选择和级联选择功能。结合充足...

    el-data-picker季度区间选择器

    "季度区间选择器"是ElementUI中的一个增强型日期选择组件,它扩展了基本的日期选择功能,让用户可以方便地选取连续的两个季度作为时间范围。这在处理与时间周期相关的业务场景时非常有用,例如财务报表、销售数据...

    el-date-picker 英文改中文.doc

    https://blog.csdn.net/xuelang532777032/article/details/121287203,内有博客截图,方便没有vip的小伙伴下载

    react-native-date-picker:React Native Date Picker是适用于Android和iOS的内联日期选择器。 它包括日期,时间和日期时间选择器模式。 日期选择器是可自定义的,并且支持不同的语言。 它使用本机代码编写,以实现最佳的外观,感觉和性能

    React本机日期选择器 这是一个具有以下主要功能的React Native Date Picker: :mobile_phone: 支持iOS和Android :two_o’clock: 3种不同的模式:时间,日期,日期时间 :globe_showing_Europe-Africa: 多种语言 :...

Global site tag (gtag.js) - Google Analytics