带有轨道的日期选择器 js 奇怪的事情

datepicker js with rails strange thing

本文关键字：js 选择器 轨道 日期      更新时间：2023-09-26

我正在开发我的应用程序，我想在我的表单中的一个字段中显示日期选择器 JS，但我有一个小问题，我希望任何人都可以帮助我。

我的应用程序使用模态引导来加载所有表单，例如，当我单击"新任务"按钮时，会出现一个模态，其中包含用于添加新任务的表单，因此，在该表单中，我有一个用于:d ate的文本字段，我想用日期选择器js完成。问题是日期选择器永远不会出现，但是如果我在控制台中的.js中运行代码，则日期选择器会正常出现。

我添加了jquery-ui-rails，并在应用程序.js和应用程序中.css了要求。这是我的代码。

应用.js

//= require jquery
//= require jquery_ujs
//= require jquery-ui/datepicker
//= require turbolinks
//= require bootstrap.min
//= require_tree .

应用.css

 *= require jquery-ui/datepicker
 *= require bootstrap.min
 *= require font-awesome
 *= require sb-admin
 *= require_self
 *= require_tree

我在应用程序/资产/javascript中有一个文件custom_script.js，其中包含这些代码

$(document).ready(function($) {
$('.datepicker').datepicker();
});

和我的_form.html：

=form_for([@list, @list.tasks.build]) do |t|
=t.label :name, class: 'control-label'
  =t.text_field :name
  =t.label :date,  "Expiration Date", {class: 'control-label'}
  =t.text_field :date, {:class => "datepicker", "readonly" => "readonly"}
  =t.label :active, class: "checkbox inline" do
    =t.check_box :active
    %span Active?
  =t.submit class: 'btn btn-primary'

所以，问题是当我单击该text_field时，日期选择器不会出现，但是如果我在控制台中custom_script.js运行代码，则日期选择器正常出现。

我

尝试过使用page：load，因为我使用涡轮链接，但它不起作用，所以，我真的不知道我做错了什么。

表单由 ajax 调用加载，因为按钮"新任务"具有远程：没错，所以，我认为这就是问题所在，但我不知道如何解决它。

希望你能帮帮我！

这是正在发生的事情。加载页面后，将调用代码$('.datepicker').datepicker();。引入模态时，此代码不会再次运行。尝试添加 

javascript:
 $(document).ready(function($) {
   $('.datepicker').datepicker();
 });

到你的my _form.html.haml底部.这样，加载该文件后，JS将运行。

或者为了保持它与你已经拥有的一致，在你的 js 文件中使用 on 方法......

$(document).ready(function($) {
  $(document).on('load','.datepicker',function(){
    $('.datepicker').datepicker();
   });
 });

这样做的作用是，现在和永远它将日期选择器附加到 .datepicker .

实际上，您的 java 脚本代码在表单加载之前已经运行。

你必须做什么调用日期选择器方法，在你的my_form.html.hmal就像下面的代码一样。

=form_for([@list, @list.tasks.build]) do |t|
  =t.label :name, class: 'control-label'
  =t.text_field :name
  =t.label :date,  "Expiration Date", {class: 'control-label'}
  =t.text_field :date, {:class => "datepicker", "readonly" => "readonly"}
  =t.label :active, class: "checkbox inline" do
    =t.check_box :active
    %span Active?
 =t.submit class: 'btn btn-primary'
:javascript  
  $(document).ready(function($) {  
    $('.datepicker').datepicker();
  });

希望，它会正常工作。

相关文章：