标签: flatpickr

我有一个日期格式，19 Oct 2017并想将其转换为这种格式20171019

有没有一种快速的方法来做到这一点？我FlatPickr在 VueJs 中使用。如果有帮助，请在下面找到我的代码。

import flatPickr from 'vue-flatpickr-component';
import 'flatpickr/dist/flatpickr.css';
import Navigation from './Navigation'
import bus from '../bus'
export default {
  data() {
    return {
      showPanel: false,
      isClosed: false,
      arrival: null,
      departure: null,
      config: {
        dateFormat: "Ymd"
      }
    }
  },
  components: {
    flatPickr
  },
  methods: {
    closeMenu: function() {
      this.$store.state.showBooking = false;
    }
  },
  mounted() {
    bus.$on('show-booking', () => {
      this.showPanel = true;
    })
  }
}

我正在尝试将一个简单的日期选择器添加到自定义vue组件.我没有使用webpack,所以我想避免现成的.vue组件,而我更了解如何添加简单的javascript到vue.

我正在关注这个官方的vue教程

我也看过这个代码,但我无法设法让日期选择器出现.

这是我的jsfiddle:

HTML:

<div class="app">
  <datepicker id='date-elem'></datepicker>
</div>

app.js:

Vue.component('date-picker', {
  extends: Flatpickr,
  mounted () {
    this.Flatpickr(date-elem, {})}
})

如何在不需要.vue文件,webpack等的情况下轻松地将vanilla js集成到Vue组件中？

我在一个项目上使用了惊人的flatpickr，并且需要强制指定日历日期。

我试图在本机 HTML 中进行所有验证，所以我天真地尝试将required属性添加到输入标记，但这似乎不起作用。

有没有办法用 flatpickr 本地强制日期，还是我需要编写一些自定义检查？

当我打开然后关闭 Flatpickr 实例而不选择日期时，它会将其设置为今天的日期。如何防止这种行为？当用户未设置时，我需要日期输入保持为空。

Flatpickr 实例用 React-Flatpickr 包装。

<Flatpickr
    ref={fpStartDate}
    className='th-input-container__input'
    value={startDate}
    onClose={(selectedDates, dateStr, instance) => { 
        if (selectedDates.length > 0) {
            setInputValue(1);
            setCurrentPage(1);
            setStartDate(selectedDates[0]);
        }
    }}
    options={{
        enableTime: true,
        enableSeconds: true,
        dateFormat: 'd.m.Y, H:i:S',
        locale: Russian,
        mode: 'single',
        time_24hr: true,
        minuteIncrement: 1,
        allowInput: true,
        disableMobile: true,
        monthSelectorType: 'dropdown',
        onOpen: function(selectedDates, dateStr, instance) {
            setTimeout(function() {
                instance.open();
            }, 200);
        }
    }}
    placeholder='from'
/>

在我的 laravel 7 /livewire 1.3 / alpinejs 2 项目中，我从https://flatpickr.js.org datepicker 添加了 flatpickr datepicker 工作正常，但反应式不起作用。在 $current_operation_date 下面的代码中 - 组件中的 public var 被修改了，但是在 datepicker 值被选中时，alpine var operation_date 没有改变：

<div>        
    $current_operation_date::{{$current_operation_date}}<BR>
    operation_date::<div x-html="operation_date"></div>
    <!-- The line above is not modified when in datepicker value is selected -->

    <div x-data="{ operation_date: '{{$current_operation_date}}'}">
        <input
            type='text'
            id="flatpickr_operation_date"
            wire:model.lazy="current_operation_date"

            x-model="operation_date"
            x-on:blur="$dispatch('input', operation_date)"
            class="form-control editable_field"
        />
    </div>

</div>


@section('scripts')
    <script>


        $(document).ready(function(){

            var fp = flatpickr(document.querySelector('#flatpickr_operation_date'), {
                enableTime: false,
                dateFormat: 'Y-m-d',
                altFormat: "F j, Y",
                altInput: true,
                inline: …

我通过npm install flatpickr安装了flatpickr.日历显示就像点击输入控件一样

var React = require('React');
var ReactDOM = require('ReactDOM');
var Flatpickr = require('flatpickr');

var Calender = React.createClass({

    componentDidMount: function(){
    this.flatpickr = new Flatpickr(this.refs.date, {dateFormat: "m/d/Y"});
    },

    render: function() {
        return(
                <div>            
                    <input data-enable-time defaultValue='2016-11-11' ref="date_from" />    
                </div>
             );
    }
});

我是 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 不会渲染。 …

我正在使用 flatpickr 来设置日期，

onChange: function(selectedDates, dateStr, instance) {
    var myDate = selectedDates[0];

首先，我正在跟踪 selecteDate[0] 并给我一个字符串

Thu Dec 20 2018 00:00:00 GMT-0500 (GMT-05:00)

然后我正在跟踪 myDate 并且似乎已转换为 GMT+0000 ISO 字符串。

2018-12-20T05:00:00.000Z

所以我的问题是 flatpickr 从哪里挑选 GMT-0500？有没有可能改变它？

我有一个 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": [ …