标签: flatpickr

我是 Flatpickr 的新手。

有人可以在 jsfiddle 中展示“flatpickr + 外部元素”是如何工作的吗？

我的页面上有 4/5 文本输入。我正在使用这些文本输入将这些文本输入转换为 flatpicker

/* flatpickr initialisation */
$(document).ready(function () {
     $('.datetime').flatpickr({
            noCalendar: false,
            enableTime: true,
            allowInput: true,
            dateFormat: 'M d, Y h:i K',
            minuteIncrement: 1,

        });
}); 

在我的 html 页面中，我有类似 html 的 /* Html 页面 */

<input name="endtDate" type="text" class="datetime" placeholder="Select Date.." data-input> 
<a class="input-button" title="toggle" data-toggle>
    <i class="icon-calendar"></i>
</a>
<a class="input-button" title="clear" data-clear>
    <i class="icon-close"></i>
</a>

....

如果我不添加wrap: true一切正常。

如果我添加 add wrap: true那么我会收到 JS 错误并且 flatpickr 不会渲染。 …

我有一个 Laravel 项目，并尝试按照以下页面在其中使用 flatpickr： https:
//flatpickr.js.org/getting-started/

我能够通过安装 flatpickrnpm i flatpickr --save并将其正确导入到 JS 代码中并通过 via 使用它import flatpickr from "flatpickr";，但我的问题是：如何将 CSS 也导入到项目中？

我最终使用了link上面的 flatpickr 文档链接中引用的以下 HTML 标签：

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

但我想知道是否有更好的方法将 flatpickr 的 CSS 放入我的项目中。

也就是说，当你使用npm安装包并将其导入到JS中时，CSS是否有类似的东西，或者我们是否需要使用传统link标签来包含CSS，这是我们唯一的选择？

我在文档中或通过谷歌找不到任何关于如何执行此操作的信息，所以我真的很想知道。谢谢。

当我使用 ngserve 进行编译时，开发 Flatpickr 工作正常，但是当编译整个应用程序以将其部署在服务器上时，它会在控制台中出现以下错误

ReferenceError: Cannot access 'e' before initialization
at _ (main.84c9c5060af8f99f5713.bundle.js:formatted:95600)
at O (main.84c9c5060af8f99f5713.bundle.js:formatted:95625)
at w (main.84c9c5060af8f99f5713.bundle.js:formatted:95652)
at main.84c9c5060af8f99f5713.bundle.js:formatted:96326
at main.84c9c5060af8f99f5713.bundle.js:formatted:96441
at nC (main.84c9c5060af8f99f5713.bundle.js:formatted:96513)
at oC (main.84c9c5060af8f99f5713.bundle.js:formatted:96526)
at iC (main.84c9c5060af8f99f5713.bundle.js:formatted:96543)
at t.ngAfterViewInit (main.84c9c5060af8f99f5713.bundle.js:formatted:96580)
at Er (main.84c9c5060af8f99f5713.bundle.js:formatted:37872)

我用来初始化 Flatpickr 的代码如下：-

 this.picker = flatpickr(this.flatpickrEl.nativeElement, {
        onChange: this.onDateChanged.bind(this),
        wrap: true,
        enableTime: true,
        dateFormat: "Y-m-d H:i"
    });

tsconfig.json 配置是：-

"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": false,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
  "node_modules/@types"
],
"lib": [ …

我正在使用这个加载 flatpickr：

<script type="text/javascript">
jQuery(document).ready(function($){
    $('#Mydatetime').flatpickr({
        altInput: true,
        altFormat: "M j, Y @ H:i",
        enableTime: true,
        dateFormat: 'Y-m-d\\TH:i'
    });
});

<input type="text" id="Mydatetime" class="MyDate" name="my_expire_date" value="' . $variable . '"/>

变量只是我的日期时间。它有效，但我想添加一个类似于this的清除按钮。无论我做什么，按钮都不会清除日期。

这个例子：

<a class="input-button" title="clear" data-clear>
    <i class="icon-close"></i>
</a>

看起来很简单，但我显然错过了一些东西。有人让这些关闭按钮之一正常工作吗？

在 React js 中，使用此选项以 12 小时格式显示时间，例如。“4:45 AM”选项={{enableTime：true，noCalendar：true，dateFormat：“h：i K”，}}

我已升级到 Angular 10，但出现以下错误：

  ERROR in node_modules/angularx-flatpickr/flatpickr.module.d.ts:6:64 - error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s).

6     static forRoot(userDefaults?: FlatpickrDefaultsInterface): ModuleWithProviders;

我在 Bootstrap 模式中使用 Flatpickr 渲染时遇到问题。

当我在模式中打开 Flatpickr 条目时，除了输入年份之外，一切似乎都工作正常。当我想单击年份时，输入字段不起作用。

感谢帮助。

Flatpickr version 4.6.9和Bootstrap version 5.1.1

我在我的应用程序上使用“flatpickr”作为日期时间选择器。此日期选择器允许选择多个日期，但在阅读文档后，我找不到任何方法来限制所选日期的最大数量。

jQuery：

$('#gig_date_multi').flatpickr({
  "mode": "multiple",
  "locale": "<%= I18n.locale %>",
  minDate: new Date(),
  enableTime: true,
  time_24hr: true,
  minuteIncrement: 15,

    onChange: function(selectedDates, dateStr, instance) {

      var array = selectedDates;
      if (array.length >= 3) {
        console.log("YOU HAVE REACHED YOUR LIMIT")
      } else {
        console.log("YOU CAN STILL SELECT MORE DATES")
      }

      var newHTML = [];
      $.each(array, function(index, value) {
        var formatted = moment(value).format("HH:mm - dddd Do MMMM YYYY");
        newHTML.push('<span>' + formatted + '</span>');
      });

      $(".multi-dates").html(newHTML.join(""));

    }
});

在这里，当选择 3 个日期时，控制台输出“您已达到限制”，我想也许我可以在发生这种情况时禁用所有日期（除了先前选择的日期）。

Flatpickr 有一个disableand …

您好，我正在尝试用flatpickr替换datetimepicker，但我无法处理这种情况。不希望使用 flatpickr 的 Range 插件，我希望能够使用 onChange 事件更改实例的 minDate 或 maxDate 。不幸的是，我在指南上找不到有关这段文字的信息

 flatpickr('#start_time', {
    locale: 'it',
    enableTime: true,
    plugins: [
      new confirmDate({
        confirmIcon: "<i class='fa fa-check'></i>",
        confirmText: '',
        showAlways: true,
      }),
    ],
    showAlways: false,
    theme: 'airbnb',
    time_24hr: true,
    altInput: true,
    altFormat: 'F j, Y H:i',
    dateFormat: 'Z',
    weekNumbers: true,
    maxDate: $('#end_time').attr('value'),
    onClose: function(selectedDates, dateStr, instance) {
    // Change #end_time minDate
    },
  });

  flatpickr('#end_time', {
    locale: 'it',
    enableTime: true,
    plugins: [
      new confirmDate({
        confirmIcon: "<i class='fa fa-check'></i>",
        confirmText: …