@react-awesome-query-builder/fluent/cjs/widgets/value/FluentUIDate.js

User-friendly query builder for React. Fluent 8 widgets

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@fluentui/react");
var _ui = require("@react-awesome-query-builder/ui");
var moment = _ui.Utils.moment;
var _default = exports["default"] = function _default(props) {
  var value = props.value,
    setValue = props.setValue,
    config = props.config,
    valueFormat = props.valueFormat,
    dateFormat = props.dateFormat,
    readonly = props.readonly,
    customProps = props.customProps,
    placeholder = props.placeholder;
  var momentValue = value ? moment(value, valueFormat) : undefined;
  var dateValue = momentValue ? momentValue.toDate() : undefined;
  var onChange = function onChange(date) {
    // clear if invalid date
    if (date == "" || date instanceof Date && isNaN(date)) date = undefined;
    var newValue = date ? moment(date).format(valueFormat) : undefined;
    setValue(newValue);
  };
  var formatDate = function formatDate(date) {
    return moment(date).format(dateFormat);
  };
  var stylesDatePicker = {
    // width: "auto", 
    marginRight: "0.25rem",
    width: "150px"
  };
  return /*#__PURE__*/_react["default"].createElement(_react2.DatePicker, (0, _extends2["default"])({
    disabled: readonly,
    value: dateValue,
    onSelectDate: onChange,
    style: stylesDatePicker,
    placeholder: placeholder,
    formatDate: formatDate
  }, customProps));
};