内容简介:折腾:期间,去试试:
折腾:
期间,去试试:
貌似好看些。
去试试:
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 }); } <ul><span>时间</span> <li> {/* <DateSelector value={this.state.selected_time} onConfirm={this.onConfirmSwitchTime} /> */} <input readonly onClick={this.toggleSelectTime} value={this.state.selected_time} /> {/* <DateTime open input={false} /> */} {/* <DateTimeField dateTime={"1990-06-05"} format={"YYYY-MM-DD"} viewMode={"date"} inputFormat={"DD/MM/YYYY"} onChange={this.handleDateTimeFieldChange} /> */} </li> <i/> </ul> <Popup show={this.state.isSelectTimeVisible} onRequestClose={this.onCancelPopup} > <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 /> </Popup> </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) => { // console.log("handleDateTimeFieldChange: newDate", newDate); // // return this.setState({date: newDate}); // } render() { return ( <div class={style.content_div}> <div class={style.cows_n_box}> <Link href={`${ROUTE_PREFIX.COW_SEARCH}/cowActivity`}> <ul><span>牛号</span> <li> <input value={this.state.cow_code} class={style.ui_input} placeholder="请填写牛号" readonly /> </li> <i/> </ul> </Link> <ul><span>时间</span> <li> {/* <DateSelector value={this.state.selected_time} onConfirm={this.onConfirmSwitchTime} /> */} <input value={datetimeToStr(this.state.selected_time, "无", "yyyy-MM-dd HH:mm")} class={style.ui_input} onClick={this.toggleSelectTime} readonly /> {/* <DateTime open input={false} /> */} {/* <DateTimeField dateTime={"1990-06-05"} format={"YYYY-MM-DD"} viewMode={"date"} inputFormat={"DD/MM/YYYY"} onChange={this.handleDateTimeFieldChange} /> */} </li> <i/> </ul> </div> <Button title={"查询"} onClick={this.handleQuery} /> {/* <div> <Popup onCancel={this.onCancelPopup.bind(this)} onConfirm={this.onConfirmPopup.bind(this)} centerTitle={"选择时间"} visible={this.state.isSelectTimeVisible}> <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 /> </Popup> </div> */} {/* <div class={style.select_time_popup}> */} <Popup show={this.state.isSelectTimeVisible} onRequestClose={this.onCancelPopup} > <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 /> </Popup> {/* </div> */} </div> ); } } </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>
实现了,弹框选择日期:
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- jQuery日期范围选择器
- 一个简约、漂亮的日期时间选择器
- flatpickr 发布 V3 版本 ,Javascript 日期选择器
- flatpickr 4.1 版本发布 ,Javascript 日期选择器
- flatpickr 4.2.2 发布 ,Javascript 日期选择器
- flatpickr 4.2.4 发布 ,Javascript 日期选择器
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Blog Design Solutions
Richard Rutter、Andy Budd、Simon Collison、Chris J Davis、Michael Heilemann、Phil Sherry、David Powers、John Oxton / friendsofED / 2006-2-16 / USD 39.99
Blogging has moved rapidly from being a craze to become a core feature of the Internetfrom individuals sharing their thoughts with the world via online diaries, through fans talking about their favori......一起来看看 《Blog Design Solutions》 这本书的介绍吧!