如何在Rails6内通过Webpacker使用JavaScript;

Rails6默认不再使用asset pipeline,改用Webpacker。

文件结构变化:

  • 配置文件: webpacker.yml
  • package.json查看安装的js库,可以使用yarn命令或者npm
  • app/assets/javascript不会再generate。
  • app/javascript/packs/application.js:packs文件夹管理独立安装的包。

下图是默认生成的文件夹。包含了rails UJS库, turbolinks, atcivestorage, channels

添加了channels文件夹。

如何安装一个packer:

# 例如
rails webpacker:install:stimulus
Appending Stimulus setup code to /Users/.../tailwindapp/app/javascript/packs/application.js
append app/javascript/packs/application.js
# 增加了一行代码import "controllers"
Creating controllers directory
create app/javascript/controllers
create app/javascript/controllers/hello_controller.js
create app/javascript/controllers/index.js
Installing all Stimulus dependencies
run yarn add stimulus from "."
#安装依赖包,可以在yarn.lock中看到详细说明

使用Flatpickr

一个轻量化的datetime picker。

包括使用JS和CSS

https://flatpickr.js.org/

安装:

# using npm install
npm i flatpickr --save # 其他
yarn add flatpickr #cdn也可以

use

推荐直接使用元素,或者选择器:

// If using flatpickr in a framework, its recommended to pass the element directly
flatpickr(element, {}); // Otherwise, selectors are also supported
flatpickr("#myID", {}); // creates multiple instances
flatpickr(".anotherSelector");

Rails中的使用

1. 生成一个Post

下面的命令仍然会生成assetpipeline的文件: stylesheets/scaffolds.scss,如果不使用就删除掉。

rails g scaffold Post title publish_date:date

2. yarn add flatpickr

javascript/packs/application.js内添加:

import flatpickr from "flatpickr";
#只使用flatpickr的CSS样式
require("flatpickr/dist/flatpickr.css")
#或者使用不同的样式主题
#require("flatpickr/dist/themes/light.css") document.addEventListener("turbolinks:load", () => {
flatpickr("[data-behavior='flatpickr']", {
altInput: true,
altFormat: "F j, Y",
dateFormat: "Y-m-d"
})
})

在application.html.erb添加:(使用webPacker CSS)

<%= stylesheet_pack_tag 'application', media: "all", ...%>

在对应的视图文件内添加:

<div>
<%= form.text_field :publish_date, data: {behavior: 'flatpickr'}%>
</div> #生成<input data-behavior="flatpickr" type="hidden" name="post[publish_date]" id="post_publish_date" class="flatpickr-input">

如何在Rails6内通过Webpacker使用JavaScript; flatpicker日期时间组件选择器的更多相关文章

  1. javascript学习之时间组件

    写了一个时间组件,哪里需要哪里调(菜鸟级别,大牛路过就Ok了): 先有一个HTML文件: <!doctype> <html> <head> <title> ...

  2. javascript实现日期时间动态显示

    .aspx代码例如以下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Def ...

  3. 如何在Ionic2项目中使用第三方JavaScript库

    onic的官网放出一记大招Ionic and Typings,来介绍如何在Ionic2项目中使用第三方JavaScript库. 因为在前阵子正好想用一个非常有名的第三方JS库ChartJs来实现一些东 ...

  4. 通过javascript的日期对象来得到当前的日期,并输出--内置对象---JS

    //通过javascript的日期对象来得到当前的日期,并输出. var mydate = new Date(); var week = ["星期日","星期一" ...

  5. javascript类型系统——日期Date对象

    × 目录 [1]静态方法 [2]构造函数 [3]实例方法 前面的话 Date对象是javascript语言中内置的数据类型,用于提供日期和时间的操作接口.Date对象是在早期java中的java.ut ...

  6. JavaScript Date日期对象以及日期格式化方法

    前言 Date对象是javascript语言中内置的数据类型,用于提供日期和时间的操作接口.Date对象是在早期java中的java.util.Date类基础上创建的,为此,Date类型使用自UTC1 ...

  7. 借助JavaScript中的时间函数改变Html中Table边框的颜色

    借助JavaScript中的时间函数改变Html中Table边框的颜色 <html> <head> <meta http-equiv="Content-Type ...

  8. JavaScript框架设计(四) 字符串选择器(选择器模块结束)

    JavaScript框架设计(四) 字符串选择器(选择器模块结束) 经过前面JavaScript框架设计(三) push兼容性和选择器上下文的铺垫,实现了在某一元素下寻找,现在终于进入了字符串选择器 ...

  9. JavaScript动态显示当前时间

    JavaScript动态显示当前时间: 2016年01月04日  时间:16:58:32  星期一 <span id="timejs"></span> &l ...

随机推荐

  1. NetBeans远程调试Linux c++ 11项目

    NetBeans远程调试Linux c++ 11项目 由于好多原因,好久没有写博客了,随着c++ 11的普及率越来越高,开发c++ 项目的人也越来越多,可以说c++ 11 给了c++ 这门语言第二次生 ...

  2. C# 弹出确定、取消窗口

    if (MessageBox.Show("确定要退出吗?", "", MessageBoxButtons.OKCancel, MessageBoxIcon.Qu ...

  3. CAN双机通讯调试小结(SJA1000与MCP2515通讯)

    2011-12-07 21:36:02. 效果图: 1,51的SJA1000自收自发测试完成,见上一篇小结. 2,SJA1000自测完成后,再自测MCP2515就非常容易.主要是设置工作模式为回环模式 ...

  4. sql 与 mysql

    my sql 中=和!=运算符是不起作用的:

  5. Referer图片防盗链

    前几天讲了<nginx下载防盗链>,今天继续说下图片防盗链. 他们两个使用的指令不同,前者使用secure link,并且需要程序配合,但是效果非常好;后者不需要程序配合,根据图片来源来实 ...

  6. js中,转义字符的表示

    HTML中<,>,&等有特殊含义(<,>,用于链接签,&用于转义),不能直接使用.这些符号是不显示在我们最终看到的网页里的,那如果我们希望在网页中显示这些符号, ...

  7. 自定义域名访问本地WEB应用

    自定义域名访问本地WEB应用 本地安装了WEB服务端,怎样通过自定义域名方式实现从公网访问本地WEB应用? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动WEB服务端 默认安装的WEB ...

  8. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  9. 如何在Qt中使用自定义数据类型

    这里我们使用下面这个struct来做说明(这里不管是struct还是class都一样): struct Player { int number; QString firstName; QString ...

  10. appium+夜神+python3 环境配置

    先感慨一下真的心累啊,踩了好多坑,断断续续四天终于把环境彻底搭建完了,由于之前看的网上的帖子都不是很全而且还带坑,决定自己写一篇综述,作为笔记. 一,首先是安装需要的环境: 需要用到的软件: 1. j ...