JavaScript 日期时间选择器一些小结

flatpickr 是一个轻量级、注重精益、由 UX 驱动和可扩展的 JavaScript 日期时间选择器。

下载 演示 GitHub

flatpickr 不依赖于任何库。更小的用户界面，但有很多主题。丰富的 API 和事件系统使其适用于任何环境。可用于 webpack ，也可作为 jQuery 插件使用。

安装

安装 flatpickr 模块

使用 NPM 安装 flatpickr 模块。包管理工具： https://www.npmjs.com/package/bower-npm-resolver

# using npm install
npm i flatpickr --save

非模块环境

直接引入 flatpickr 文件

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

用法

如果你使用 webpack，你需要导入 flatpickr 。

// commonjs
const flatpickr = require("flatpickr");
// 如果可用，推荐使用 es 模块
import flatpickr from "flatpickr";

下面都是创建 flatpickr 实例的有效方法。

// 如果在框架中使用 flatpickr ，则建议直接传递该元素
flatpickr(element, {});
// 选择器也被支持
flatpickr("#myID", {});
// 创建多个实例
flatpickr(".anotherSelector");

配置是可选的，并传入对象 {} 中。

jQuery

如果你使用 jQuery ，flatpickr 可以作为插件使用。

$(".selector").flatpickr(optional_config);

总结

以上所述是小编给大家介绍的JavaScript 日期时间选择器一些小结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

您可能感兴趣的文章:

  • javascript英文日期（有时间）选择器
  • JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
  • js实现精确到秒的日期选择器完整实例
  • js实现点击文本框显示日期选择器特效代码分享
  • Js日期选择器并自动加入到输入框中示例代码
  • javascript 日期联动选择器 [其中的一些代码值得学习]
  • JS时间选择器 兼容IE6,7,8,9
赞 (0)

相关推荐

  • javascript 日期联动选择器 [其中的一些代码值得学习]

    DateSelector body { margin: 0px; padding: 0px; font-size: 12px; } #year, #month, #date{ width: 60px; margin-right: 3px; } var $ = function(id) { return 'string' == typeof id ? document.getElementById(id) : id; }; var Extend = function(destination, so

  • js实现点击文本框显示日期选择器特效代码分享

    js实现点击文本框显示日期选择器特效代码分享

    为大家分享的JavaScript图片轮播代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js点击文本框显示日期选择器</title> <link type="text/css" rel="stylesheet" href="calen

  • js实现精确到秒的日期选择器完整实例

    本文实例讲述了js实现精确到秒的日期选择器.分享给大家供大家参考,具体如下: <script> // 主调用函数是 setday(this,[object])和setday(this),[object]是控件输出的控件名,举两个例子: // 一.<input name=txt><input type=button value=setday onclick="setday(this,document.all.txt)"> // 二.<input

  • Js日期选择器并自动加入到输入框中示例代码

    复制代码 代码如下: <html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <script type="text/javascript"> var gMonths=new Array("一月&

  • javascript英文日期（有时间）选择器

    var languageCode = 'en';    // Possible values:     en,ge,no,nl,es,pt-br,fr                                 // en = english, ge = german, no = norwegian,nl = dutch, es = spanish, pt-br = portuguese, fr = french, da = danish, hu = hungarian(Use UTF-8 

  • JS时间选择器 兼容IE6,7,8,9

    在线演示: http://demo.jb51.net/js/2012/js_date/ 复制代码 代码如下: <html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <script type="text/javascri

  • JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器

    JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器

    手机端网页版app在使用下拉列表时,传统的下拉列表使用起来体验非常不好,一般做的稍好一点的交互功能界面都不会直接使用下拉列表,所以app的原生下拉列表都是弹窗列表选择,网页型app从使用体验上来当然也应该做成那样,前段时间在开发网页版app时就遇到这种需求,不仅是日期选择器,数据列表.变量列表选择等等下拉列表型需求都需要,网上找来找去只找到一款比较好的mobiscroll,不过下载比较麻烦,感觉比较奇怪的是jquery.mobile.jeasyui.mobile都没有提供这种控件,不知道为什么?

  • JavaScript 日期时间选择器一些小结

    flatpickr 是一个轻量级.注重精益.由 UX 驱动和可扩展的 JavaScript 日期时间选择器. 下载 演示 GitHub flatpickr 不依赖于任何库.更小的用户界面,但有很多主题.丰富的 API 和事件系统使其适用于任何环境.可用于 webpack ,也可作为 jQuery 插件使用. 安装 安装 flatpickr 模块 使用 NPM 安装 flatpickr 模块.包管理工具: https://www.npmjs.com/package/bower-npm-resolv

  • Android仿iPhone日期时间选择器详解

    Android仿iPhone日期时间选择器详解

    本文实例为大家分享了Android仿iPhone时间选择器的具体代码,供大家参考,具体内容如下 先看效果图 如何使用 import java.text.DateFormat; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; import android.app.Activity; import android.app.AlertDialog; import

  • 微信小程序日期时间选择器使用方法

    微信小程序日期时间选择器使用方法

    本文实例为大家分享了精确到秒的微信小程序日期时间选择器,供大家参考,具体内容如下 效果图 实现原理 利用微信小程序的picker组件的多列选择器实现! WXML <view class="tui-picker-content"> <view class="tui-picker-name">时间选择器(选择时分)</view> <picker mode="time" value="{{time}}

  • 微信小程序如何实现精确的日期时间选择器

    微信小程序如何实现精确的日期时间选择器

    这篇文章主要介绍了微信小程序如何实现精确的日期时间选择器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变. 造成原因:这一点就是由于在bindcolumnchange事件做的值改变处理造成. 处理方法:如果需要确定后再改变值,请将bindcolumnchange事件中的处理操作放到bi

  • Django 如何使用日期时间选择器规范用户的时间输入示例代码详解

    如果你的模型中含有 datetime 类型的字段,表单中需要用户输入日期和时间,那么你如何保证不同用户输入的时间都遵循一定的格式 (DD/MM/YYYY 或者 YYYY-MM-DD) 是个必须要考虑的问题.一个更好的方式是在前端使用日期时间选择器 DateTimePicker,以日历的形式统一选择输入时间,如下图所示.小编今天将尝试以最少的代码教你实现如何在 Django 项目中实现日期时间选择器 DateTimePicker. 示范模型 假如我们有如下一个 Article 模型,含有 pub_

  • Element DateTimePicker日期时间选择器的使用示例

    组件-日期时间选择器 日期和时间点 <template> <div class="block"> <span class="demonstration">默认</span> <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间"> </el-date-pick

  • Vue日期时间选择器组件使用方法详解

    Vue日期时间选择器组件使用方法详解

    本文实例为大家分享了Vue日期时间选择器组件的具体代码,供大家参考,具体内容如下 1.效果图如下 单选日期选择器 多选日期选择器 日期时间选择器 2.准备 Date原型格式化工具方法 Date.prototype.format = function(fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": thi

  • uniapp实现日期时间选择器

    uniapp实现日期时间选择器

    本文实例为大家分享了uniapp实现日期时间选择器的具体代码,供大家参考,具体内容如下 由于项目需求需要,尝试过使用Vant组件库,但是一直出现问题,插件市场的插件又不太符合需求,使用就查了相关资料,最终捣鼓的效果如下: 首先现在根目录下创建util文件夹放dateTimePicker.js dateTimePicker.js function withData(param){ return param < 10 ? '0' + param : '' + param; } function ge

  • Vue自定义验证之日期时间选择器详解

    Vue自定义验证之日期时间选择器详解

    目录 Vue自定义验证之日期时间选择器 今日需求 期望效果 干货 效果 vue项目时间选择器 html里面 js里面 Vue自定义验证之日期时间选择器 自定义验证 今日需求期望效果干货value-format 效果推荐 今日需求 查询条件中 当开始时间 和 结束时间 一致时 提示结束时间大于开始时间 期望效果 干货 <el-form :inline="true" :rules="rules"> <el-form-item label="创

  • 关于element-ui日期时间选择器选不中12小时以后的时间详解

    关于element-ui日期时间选择器选不中12小时以后的时间详解

    目录 前言 自定义完时间格式 yyyy-MM-dd hh:mm:ss是12小时制 yyyy-MM-dd HH:mm:ss才是24小时制 结语 前言 最近在工作中用到了element-ui的el-date-picker日期时间选择器,遇到了一个小问题,设置完自定义完时间格式后选不中12小时以后的时间.甚是苦恼,最后发现是设置的时间格式有取值范围.虽然不是什么大问题,但是不细心很容易掉坑,所以总结分享出来给大家避坑. 自定义完时间格式 在el-date-picker标签上设置value-format

随机推荐