(GoRails) 自动侦测用户的时区,使用javascript 的jszt库。

传统方法见:http://www.cnblogs.com/chentianwei/p/9369904.html

??: 两个方法最后都要有controller中的类似before_action :set_time_zone来给当前浏览器分配时区。

实时方法,根据user的时区设置:

  1. rails new -m template.rb timezone 使用模版,名字用timezone
  2. yarn add jstz   #一个javascrit timezone library 可以自动侦测和设置用户的time zone。
  3. rails g migration AddTimeZoneToUsers time_zone
  4. rails db:migrate
  5. atom.后打开javascript/packs/application.js(已经安装使用webpacker)
  6. 输入import jstz from ‘jstz‘
    1. import jstz from ‘jstz‘
    2. const timezone = jstz.determine()
    3. console.log(timezone.name())
  7. app/views/shared/_head.html.erb
  8. 修改第8行,改为 javascript_pack_tag方法。
  9. 在user注册页,f.time_zone_select :time_zone选项,通过它可以在inspect上看到时区的选择。
  10. 在javascript/packs/application.js设置cookie:

创建函数--设置一个Cookie:

function setCookie(name, value) {

var expires = new Date()

expires.setTime(expires.getTime() +  (24*60*60*1000))  #1000天后到期

document.cookie= name + ‘‘=" + value + ‘;expires=‘ + expires.toUTCString()

}

使用这个函数:

setCookie("timezone", timezone.name())

解析这些都是JavaScript的用法,create, Read a Cookie with JavaScript:

var x = document.cookie      获得当前document的关联的cookies。

document.cookie = newCookie 设置新的Cookie。

例子:

document.cookie= "username=John Doe;   expires=Thu, 18 Dec 2013 12:00:00 UTC;   path=/";

扩展--JavaScript Cookies:

https://www.w3schools.com/js/js_cookies.asp

  

  12. 在Application.rb中 Controller中定义一个方法 bowser_time_zone

def browser_time_zone

#根据cookies来找到对应的时区,如果没有则使用Time.zone作为默认,任意错误,营救也使用默认

browser_tz = ActiveSupport::TimeZone.find_tzinfo(cookies[:timezone])

ActiveSupport::TimeZone.all.find{ |zone|  zone.tzinfo ==  browser_tz }  || Time.zone

rescue TZInfo::UnknownTimezone,  TZInfo::InvalidTimezoneIdentifier

Time.zone

end

helper_method :browser_time_zone  #添加helper方法

变量browser_tz是如#<TZInfo::DataTimezone: America/Chicago>的对象, 它会和所有TimeZone对象的属性tzinfo做比较。

#<ActiveSupport::TimeZone:0x00007f97f26b0058 @name="American Samoa", @utc_offset=nil, @tzinfo=#<TZInfo::DataTimezone: Pacific/Pago_Pago>>

  13.在user注册页,f.time_zone_select :time_zone选项可以加上这个browser_time_zone helper方法

<%= f.time_zone_select :time_zone, nil, default: browser_time_zone.name %>

  14. 浏览器显示时区时间:controller增加一个before_action :set_time_zone, if: :user_signed_in?

def set_time_zone

Time.zone = current_user.time_zone

end

  15 有一个相关gem ‘local_time‘可以利用。

原文地址:https://www.cnblogs.com/chentianwei/p/9580059.html

时间: 2024-08-29 21:23:48

(GoRails) 自动侦测用户的时区,使用javascript 的jszt库。的相关文章

javascript日期处理库-Datejs.js

原文:http://code.google.com/p/datejs/wiki/APIDocumentation javascript日期处理库-Datejs.js 当天时间 Date.today(); 比较两个时间大小,返回-1,0,1 var today = Date.today(); var past = Date.today().add(-6).days(); var future = Date.today().add(6).days(); Date.compare(today, fut

2017最好的JavaScript框架、库和工具 — SitePoint

与开发者数量相比,可能有更多的JavaScript框架.库和工具.截止到2017年5月,在GitHub上快速搜索能搜到超过110万的JavaScript项目. 在npmjs上有50万的可用包,并且这些包每个月的下载量将近100亿次. 2017.05.29: 更新了本文,旨在能正确的描述当前JavaScript生态的状态. 本文着重讲述目前最流行的客户端JavaScript框架.库和工具之间的基本差异和他们的基本介绍.至于是不是你要寻找的最佳实践那是另外一个问题.你可以选择一个,并坚持使用一段时间

第一百三十九节,JavaScript,封装库--CSS选择器

JavaScript,封装库--修改元素选择器 就是将构造库函数修改成元素选择器,像css那样,输入#xxx .xxx xxx  (获取指定id下的指定class下的指定标签元素) 修改后的基础库 /** *feng_zhuang_ku_1.0版本,js封装库,2016/12/29日:林贵秀 **/ /** 前台调用 * 每次调用$()创建库对象,使其每次调用都是独立的对象 * $()创建库对象,有一个可选参数,参数有两种方式,1是传入的this,2是传入的字符串 * 可选参数说明: * 传入的

第一百三十五节,JavaScript,封装库--拖拽

JavaScript,封装库--拖拽 封装库新增1个拖拽方法 /** tuo_zhuai()方法,将一个弹窗元素实现拖拽功能 * 注意:一般需要在css文件将元素里的某一个区块光标设置成提示可以拖拽,如:cursor: move; * 无参 **/ feng_zhuang_ku.prototype.tuo_zhuai = function () { if (this.jie_dian.length == 1) { var yan_su = null; for (var i = 0; i < th

第一百三十三节,JavaScript,封装库--弹出登录框

JavaScript,封装库--弹出登录框 封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事件,当窗口的大小变化时触发函数 /** yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面, * 注意:使用此方法时,首先要在css里将目标区块设置成(绝对定位,position: absolute;) **/ feng_zhuang_ku.prototype.yuan_su_j

顶级的JavaScript框架、库、工具及其使用

几乎每隔一个星期,就有一个新的 JavaScript 库席卷网络社区!Web 社区日益活跃.多样,并在多个领域快速成长.想要研究每一个重要的 JavaScript 框架和库,是个不可能完成的任务.接下来,我会分享一些前端开发的最著名和最有影响力的框架和库.下面,就让我们一起来看看,顶级的 JavaScript web 前端框架.库和工具及其使用. 请注意: 如果没有包括你最喜欢的 JavaScript 的框架和库,请多包涵. 请实时更新你的框架和库,最新版本往往有更好的跨浏览器和跨设备支持.可以

2016年31款轻量高效的开源JavaScript插件和库

目前有很多网站设计师和开发者喜欢使用由JavaScript开发的插件和库,但同时面临一个苦恼的问题:它们中的大多数实在是太累赘而且常常降低网站的性能.其实,其中也有不少轻量级的插件和库,它们不仅轻巧有用,而且不会影响网站的性能.本文就为大家整理了2016年以来30多款轻量级Javascript插件和库的列表,这些工具服务于特定的目标,并且它们能够非常有效和高效地实现目标. 不管你想创建一个图片库.一个滑动效果,个性化菜单还是其他接口元素,你都可以用这些插件和库轻易的实现.同时,你还可以使用这些插

前端必备,十大热门的 JavaScript 框架和库

JavaScript 框架和库可以说是开源项目中最庞大也是最累的类目了,目前在github 上这一类的项目是最多的,并且几乎每隔一段时间就会出现一个新的项目席卷网络社区,虽然这样推动了创新的发展,但不得不说苦了前端的开发者们.因此本文罗列出了一些优秀的 Javascript 框架和库的特及其在 github 上的 star 数,旨在为各位开发者提供一些参考. 1.ReactJS (Star: 59989  ,Fork: 10992) 主页:https://facebook.github.io/r

第一百四十节,JavaScript,封装库--浏览器检测

JavaScript,封装库--浏览器检测 在函数库编写一个,浏览器检测对象 /** sys浏览器检测对象,对象下有两个属性,liu_lan_qi属性和xi_tong属性 * liu_lan_qi属性,检测浏览器名称和版本号,如:alert(sys.liu_lan_qi); * xi_tong属性,检测浏览器运行环境,如:alert(sys.xi_tong); **/ (function () { //闭包,自我执行 window.sys = {}; //全局变量对象,保存浏览器信息 var u