react-np-datepicker/dist/App.js

Integrate Nepali Datepicker in your React app easily.

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

import React, { Component } from 'react';
import DayView from './DayView';
import MonthView from './MonthView';
import YearView from './YearView';
import BSMoment from './BSDate';
import './index.css';

var NepaliDatePicker = /*#__PURE__*/function (_Component) {
  _inherits(NepaliDatePicker, _Component);

  var _super = _createSuper(NepaliDatePicker);

  function NepaliDatePicker(_props) {
    var _this;

    _classCallCheck(this, NepaliDatePicker);

    _this = _super.call(this, _props);

    _this.setInternalDate = function (date) {
      _this.setState({
        date: date
      });
    };

    _this.setInputDate = function (date) {
      _this.setState({
        date: date,
        hideCalendar: _this.props.closeOnSelect
      });

      if (date && _this.props.onChange) {
        if (_this.state.format) _this.props.onChange(date.format(_this.state.format));else _this.props.onChange(date.format('YYYY/MM/DD'));
      }
    };

    _this.todayClick = function () {
      if (_this.state.format) _this.props.onChange(new BSMoment().now().format(_this.state.format));else _this.props.onChange(new BSMoment().now().format('YYYY/MM/DD'));
    };

    _this.nextView = function () {
      var currentView = _this.state.currentView;
      ++currentView;

      _this.setState({
        currentView: currentView
      });
    };

    _this.prevView = function (date) {
      var currentView = _this.state.currentView;
      --currentView;

      _this.setState({
        currentView: currentView,
        date: date
      });
    };

    _this.getView = function () {
      var calendarDate = _this.state.date;
      var props = {
        date: calendarDate,
        nextView: _this.nextView,
        setInputDate: _this.setInputDate,
        setInternalDate: _this.setInternalDate,
        prevView: _this.prevView
      };

      switch (_this.state.currentView) {
        case 0:
          return /*#__PURE__*/React.createElement(DayView, props);

        case 1:
          return /*#__PURE__*/React.createElement(MonthView, props);

        case 2:
          return /*#__PURE__*/React.createElement(YearView, props);

        default:
          return /*#__PURE__*/React.createElement(DayView, props);
      }
    };

    _this.inputFocus = function () {// console.log(this.state.isCalendar)
      // this.setState({ isCalendar: !this.state.isCalendar, hideCalendar: !this.state.hideCalendar });
    };

    _this.calendarClick = function () {
      _this.setState({
        isCalendar: !_this.state.isCalendar,
        hideCalendar: !_this.state.hideCalendar
      });
    };

    _this.state = {
      date: _props.value ? new BSMoment(_props.value) : new BSMoment().now(),
      currentView: 0,
      name: _props.name,
      hideCalendar: true,
      isCalendar: false,
      today: '',
      format: _props.format ? _props.format : ''
    };
    return _this;
  } // static npDateToday = new BSMoment().now();


  _createClass(NepaliDatePicker, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      var value = this.props.value;

      if (prevProps.value !== value) {
        var date = value ? new BSMoment(value) : this.state.date;
        this.setState({
          date: date
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var name = this.state.name;
      var _this$props = this.props,
          value = _this$props.value,
          className = _this$props.className,
          classNameInput = _this$props.classNameInput,
          placeholder = _this$props.placeholder;
      var today = new BSMoment().now().format(this.props.format);
      var newDate = value ? typeof value === 'string' ? value : typeof value === 'object' ? today : null : null,
          view = this.getView(),
          calendar = this.state.hideCalendar ? '' : /*#__PURE__*/React.createElement("div", {
        className: "input-datepicker-wrapper"
      }, view),
          defaultProps = {
        name: name,
        value: newDate,
        readOnly: true // onFocus: this.inputFocus

      };
      var trigger = this.props.trigger;
      trigger = trigger || /*#__PURE__*/React.createElement("input", {
        type: "text",
        onClick: this.calendarClick,
        className: "input-datepicker-fields ".concat(classNameInput ? classNameInput : ''),
        placeholder: placeholder
      });
      trigger = _objectSpread({}, trigger, {
        props: _objectSpread({}, trigger.props, defaultProps)
      });
      return /*#__PURE__*/React.createElement("div", {
        className: "input-datepicker ".concat(className ? className : '')
      }, trigger, calendar);
    }
  }]);

  return NepaliDatePicker;
}(Component);

export default NepaliDatePicker;