最新消息：20210917 已从crifan.com换到crifan.org
    你的位置：在路上 > 工作和技术 > React > ReactJS > Preact > 【记录】Preact中集成日期时间选择器：input-moment

    【记录】Preact中集成日期时间选择器：input-moment

    Preact crifan 3117浏览 0评论

    折腾：

    【已解决】Preact中实现日期时间选择

    期间，去试试：

    input-moment

    貌似好看些。

    去试试：

    wangzuo/input-moment: React datetime picker powered by momentjs

    <code>➜  ucowsapp_h5_pure_web git:(pure_web) ✗ npm i input-moment --save
npm WARN react-dom@0.14.9 requires a peer of react@^0.14.9 but none is installed. You must install peer dependencies yourself.
npm WARN react-infinite@0.11.0 requires a peer of react-dom@^15.5.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-transition-group@1.2.0 requires a peer of react-dom@^15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN input-moment@0.4.0 requires a peer of moment@^2.10.6 but none is installed. You must install peer dependencies yourself.
npm WARN input-moment@0.4.0 requires a peer of react-dom@^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-input-slider@4.0.1 requires a peer of react-dom@^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ucows-app@2017.9.21 No repository field.
npm WARN ucows-app@2017.9.21 No license field.

+ input-moment@0.4.0
added 3 packages in 9.473s
</code>

    发现运行出错，先去安装：moment：

    <code>npm i moment --save
</code>

    再去试试

    结果参考了：

    https://github.com/wangzuo/input-moment/blob/master/example/app.js

    去写了代码后，显示异常和错乱：

    貌似还需要自己准备弹框，把日期选择的放进去？

    对于：

    input-moment

    参考：

    https://github.com/wangzuo/input-moment/blob/master/example/app.js

    的

    import ‘../src/less/input-moment.less’;

    去添加css

    <code>import moment from 'moment';
import InputMoment from 'input-moment';
import 'input-moment/dist/input-moment.css';

</code>

    可以显示出来了：

    很明显，大小需要调整，也需要确定是否显示

    然后继续调试，效果是：

    还是显示不完整。

    后来调整了之前的页面的显示区域的高度后：

    <code>// src/components/base-modal/style.less

.modal_overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom:0;
  z-index: 1000;
  background-color:rgba(11,11,11,0.4);
  width: 100%;

  .modal {
    position: fixed;
    // top: calc(~"100% - 260px");
    top: calc(~"100% - 480px");
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1001;
    background-color: #fff;
    width: 100%;
    // height: 260px;
    height: 480px;
  }
}

// /src/components/popup/style.less

.ui_popup_content {
  // height: 216px;
  height: 480px;
  background: white;
  width: 100%;
  overflow: hidden;
  -webkit-overflow-scrolling : touch;
}

.m-input-moment {
  width: 100% !important;
}
</code>

    是可以显示了：

    最后是：

    <code>
import { Popup } from 'react-weui';

import moment from 'moment';
import InputMoment from 'input-moment';
import 'input-moment/dist/input-moment.css';


  onSelectTimeChange(curSelectedMonment) {
    console.log("onSelectTimeChange, curSelectedMonment=", curSelectedMonment);
    this.setState({ curMoment: curSelectedMonment});
  }

  onConfirmSelectTime() {
    console.log("onConfirmSelectTime");
    console.log('saved', this.state.curMoment.format('llll'));
    console.log(this.state.curMoment);
    console.log(this.state.selected_time);

    this.setState({ selected_time: this.state.curMoment});
  }

  onCancelPopup() {
    console.log("onCancelPopup");

    this.setState({
      isSelectTimeVisible: false
    });
  }

  onConfirmPopup(selectedTime) {
    console.log("onConfirmPopup, selectedTime=", selectedTime);

    this.setState({
      isSelectTimeVisible: false,
      selected_time: selectedTime
    });
  }

  toggleSelectTime(){
    console.log(`toggleSelectTime: this.state.isSelectTimeVisible=${this.state.isSelectTimeVisible}`);

    this.setState({
      isSelectTimeVisible: !this.state.isSelectTimeVisible
    });
  }


          &lt;ul&gt;&lt;span&gt;时间&lt;/span&gt;
            &lt;li&gt;
              {/* &lt;DateSelector
                value={this.state.selected_time}
                onConfirm={this.onConfirmSwitchTime}
              /&gt; */}

              &lt;input readonly
                onClick={this.toggleSelectTime}
                value={this.state.selected_time}
              /&gt;

              {/* &lt;DateTime open input={false} /&gt; */}

              {/* &lt;DateTimeField
                dateTime={"1990-06-05"}
                format={"YYYY-MM-DD"}
                viewMode={"date"}
                inputFormat={"DD/MM/YYYY"}
                onChange={this.handleDateTimeFieldChange}
              /&gt; */}
            &lt;/li&gt;
            &lt;i/&gt;
          &lt;/ul&gt;

        &lt;Popup
          show={this.state.isSelectTimeVisible}
          onRequestClose={this.onCancelPopup}
        &gt;
          &lt;InputMoment
            moment={this.state.curMoment}
            onChange={this.onSelectTimeChange}
            onSave={this.onConfirmSelectTime}
            minStep={1} // default
            hourStep={1} // default
            prevMonthIcon="ion-ios-arrow-left" // default
            nextMonthIcon="ion-ios-arrow-right" // default
          /&gt;
        &lt;/Popup&gt;
</code>

    加上额外的css：

    /src/style/variables.less

    <code>/*********************************************
for react-weui Popup
*********************************************/
.m-input-moment {
  width: 100% !important;
  // width: 150px !important;
  // width: 375px !important;
}
</code>

    才使得最终可以正常显示，居中显示的：

    但是还是icon图标无法显示，所以再去解决图标问题：

    【已解决】react中input-moment的icon图标ion-ios-arrow-left无法显示

    【总结】

    最终用如下代码：

    js:

    <code>import { h, Component } from 'preact';
import { route, Link } from 'preact-router';
import autoBind from 'react-autobind';

import { connect } from 'preact-redux';
import { bindActions } from '../../../store/util';
import reducer from '../../../store/reducers';
import * as actions from '../../../store/actions';

import style from './style.less';
import Button from '../../../components/button';
import { ROUTE_PREFIX } from "../../../common/define";

// import DateSelector from 'components/date-selector';
import { datetimeToStr, strToDatetime } from "lib/datetime";

import moment from 'moment';
import InputMoment from 'input-moment';
import 'input-moment/dist/input-moment.css';

// import Popup from 'components/popup';

// import DateTime from 'react-datetime';
// require('react-datetime');
// import 'react-datetime/css/react-datetime.css';

// import DateTimeField from 'react-bootstrap-datetimepicker';

// import weui from 'weui.js';
import { Popup } from 'react-weui';

//CowActivity Initial Invalid
const CAInitialInvalid = {
  cow_code : "",
  start_time: null,
  end_time: null,
  selected_time : null
};

@connect(reducer, bindActions(actions))
export default class CowActivity extends Component {
  state = {
    cow_code : CAInitialInvalid.cow_code,

    start_time : CAInitialInvalid.start_time,
    end_time : CAInitialInvalid.end_time,

    isSelectTimeVisible: false,
    selected_time : CAInitialInvalid.selected_time,
    curMoment: moment()
  };

  constructor(props) {
    super(props);
    autoBind(this);

    this.onSelectTimeChange = this.onSelectTimeChange.bind(this);
    this.onConfirmSelectTime = this.onConfirmSelectTime.bind(this);

    this.onCancelPopup = this.onCancelPopup.bind(this);
    // this.onConfirmPopup = this.onConfirmPopup.bind(this);

    this.toggleSelectTime = this.toggleSelectTime.bind(this);

    console.log(`this.props.cow_code=${this.props.cow_code}`);

    this.state.cow_code = this.props.cow_code;
  }

  ...

  onSelectTimeChange(curSelectedMonment) {
    console.log("onSelectTimeChange, curSelectedMonment=", curSelectedMonment);
    this.setState({ curMoment: curSelectedMonment});
  }

  onConfirmSelectTime() {
    console.log("onConfirmSelectTime");
    // console.log(this.state.curMoment);
    // console.log('saved', this.state.curMoment.format('llll'));
    // console.log(`before select: this.state.selected_time=${this.state.selected_time}`);
    // console.log(`curMoment instanceof moment=${this.state.curMoment instanceof moment}`);
    // console.log(`selected_time instanceof Date=${this.state.selected_time instanceof Date}`);
    // console.log(`selected_time instanceof moment=${this.state.selected_time instanceof moment}`);

    console.log(`previous selected_time=${this.state.selected_time}`);

    let convertedDate = this.state.curMoment.toDate();
    // console.log(`convertedDate instanceof Date=${convertedDate instanceof Date}`);

    this.setState({
      isSelectTimeVisible: false,
      selected_time: convertedDate
    });

    // console.log(`after select: this.state.selected_time=${this.state.selected_time}`);
    // console.log(`curMoment instanceof moment=${this.state.curMoment instanceof moment}`);
    // console.log(`selected_time instanceof Date=${this.state.selected_time instanceof Date}`);
    // console.log(`selected_time instanceof moment=${this.state.selected_time instanceof moment}`);

    console.log(`current  selected_time=${this.state.selected_time}`);
  }

  onCancelPopup() {
    console.log("onCancelPopup");

    this.setState({
      isSelectTimeVisible: false
    });
  }

  // onConfirmPopup(selectedTime) {
  //   console.log("onConfirmPopup, selectedTime=", selectedTime);

  //   this.setState({
  //     isSelectTimeVisible: false,
  //     selected_time: selectedTime
  //   });
  // }

  toggleSelectTime(){
    console.log(`toggleSelectTime: this.state.isSelectTimeVisible=${this.state.isSelectTimeVisible}`);

    this.setState({
      isSelectTimeVisible: !this.state.isSelectTimeVisible
    });
  }

  // handleDateTimeFieldChange = (newDate) =&gt; {
  //   console.log("handleDateTimeFieldChange: newDate", newDate);
  //   // return this.setState({date: newDate});
  // }

  render() {
    return (
      &lt;div class={style.content_div}&gt;
        &lt;div class={style.cows_n_box}&gt;

          &lt;Link href={`${ROUTE_PREFIX.COW_SEARCH}/cowActivity`}&gt;
            &lt;ul&gt;&lt;span&gt;牛号&lt;/span&gt;
              &lt;li&gt;
                &lt;input
                  value={this.state.cow_code}
                  class={style.ui_input}
                  placeholder="请填写牛号"
                  readonly
                /&gt;
              &lt;/li&gt;
              &lt;i/&gt;
            &lt;/ul&gt;
          &lt;/Link&gt;

          &lt;ul&gt;&lt;span&gt;时间&lt;/span&gt;
            &lt;li&gt;
              {/* &lt;DateSelector
                value={this.state.selected_time}
                onConfirm={this.onConfirmSwitchTime}
              /&gt; */}

              &lt;input
                value={datetimeToStr(this.state.selected_time, "无", "yyyy-MM-dd HH:mm")}
                class={style.ui_input}
                onClick={this.toggleSelectTime}
                readonly
              /&gt;

              {/* &lt;DateTime open input={false} /&gt; */}

              {/* &lt;DateTimeField
                dateTime={"1990-06-05"}
                format={"YYYY-MM-DD"}
                viewMode={"date"}
                inputFormat={"DD/MM/YYYY"}
                onChange={this.handleDateTimeFieldChange}
              /&gt; */}
            &lt;/li&gt;
            &lt;i/&gt;
          &lt;/ul&gt;

        &lt;/div&gt;

        &lt;Button
          title={"查询"}
          onClick={this.handleQuery}
        /&gt;

        {/* &lt;div&gt;
          &lt;Popup
            onCancel={this.onCancelPopup.bind(this)}
            onConfirm={this.onConfirmPopup.bind(this)}
            centerTitle={"选择时间"}
            visible={this.state.isSelectTimeVisible}&gt;
              &lt;InputMoment
                moment={this.state.curMoment}
                onChange={this.onSelectTimeChange}
                onSave={this.onConfirmSelectTime}
                minStep={1} // default
                hourStep={1} // default
                prevMonthIcon="ion-ios-arrow-left" // default
                nextMonthIcon="ion-ios-arrow-right" // default
              /&gt;
          &lt;/Popup&gt;
        &lt;/div&gt; */}

      {/* &lt;div class={style.select_time_popup}&gt; */}
        &lt;Popup
          show={this.state.isSelectTimeVisible}
          onRequestClose={this.onCancelPopup}
        &gt;
          &lt;InputMoment
            moment={this.state.curMoment}
            onChange={this.onSelectTimeChange}
            onSave={this.onConfirmSelectTime}
            minStep={1} // default
            hourStep={1} // default
            prevMonthIcon="ion-ios-arrow-left" // default
            nextMonthIcon="ion-ios-arrow-right" // default
          /&gt;
        &lt;/Popup&gt;
      {/* &lt;/div&gt; */}

      &lt;/div&gt;
    );
  }

}

</code>

    css:

    <code>
/*********************************************
for react-weui Popup
*********************************************/
.m-input-moment {
width: 100% !important;
// width: 150px !important;
// width: 375px !important;
}

/*********************************************
for input-moment using icon from http://ionicons.com
*********************************************/
// .ion-ios-arrow-right {
button.next-month {
background: url("@{env-prefix}/assets/ios7-arrow-right-30x30.png") no-repeat !important;
}

button.prev-month {
background: url("@{env-prefix}/assets/ios7-arrow-left-30x30.png") no-repeat !important;
}

.m-calendar .toolbar button{
background-color: #1385e5 !important;
}

</code>

    实现了，弹框选择日期：

    转载请注明：在路上 » 【记录】Preact中集成日期时间选择器：input-moment

    与本文相关的文章

    发表我的评论
    取消评论

    表情

    Hi，您需要填写昵称和邮箱！

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址
    87 queries in 0.231 seconds, using 20.32MB memory