我有一个文本字段与flatpickr,但我不知道如何从参数值设置日期。

huangapple go评论46阅读模式
英文:

I have a text field with flatpickr but I don't know how to set date from parameter values

问题

flatpickr.set('defaultDate', start_date);
// 错误:set 不是函数
英文:

I have a text field with flatpickr enabled everything works fine, but I don't know how to set a date to flatpickr date calender from url string parameter.

Below is the code

  var start_date = #{@start_date}
  const fp = flatpickr('.datetimepicker', {
    dateFormat: "d-M-Y h:i K", 
    enableTime: true,
    allowInput: true,
  });
  flatpickr.set('defaultDate', start_date);

I get javascript error set is not the function

答案1

得分: 1

Instead of using flatpickr.set() you can use the Flatpickr flatpickr.setDate() method. (view documentation)

Example:

const fp = flatpickr(".datetimepicker", {
  dateFormat: "d-M-Y h:i K",
  enableTime: true,
  allowInput: true,
});

fp.setDate(new Date("2023-01-01 11:00:00"));
<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js"></script>

<input class="datetimepicker" type="text">
英文:

Instead of using flatpickr.set() you can use the Flatpickr flatpickr.setDate() method. (view documentation)

Example:
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const fp = flatpickr(&quot;.datetimepicker&quot;, {
  dateFormat: &quot;d-M-Y h:i K&quot;,
  enableTime: true,
  allowInput: true,
});

fp.setDate(new Date(&quot;2023-01-01 11:00:00&quot;));

<!-- language: lang-html -->

&lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js&quot;&gt;&lt;/script&gt;

&lt;input class=&quot;datetimepicker&quot; type=&quot;text&quot;&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月18日 13:21:53
  • 转载请务必保留本文链接:https://go.coder-hub.com/76277944.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定