Как я могу уменьшить ширину и высоту моего dateTimePicker? - PullRequest
Новая
       45

Как я могу уменьшить ширину и высоту моего dateTimePicker?

0 голосов
/ 25 февраля 2020

Я хочу уменьшить ширину и высоту окна моего сборщика даты и времени. Это изображение из моего dateTimePicker. dataTimePicker image

И это мой компонент: 

import React,{useState} from 'react';
import momentLocaliser from 'react-widgets-moment';
import DateTime from 'react-datetime';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import 'react-datetime/css/react-datetime.css';

const moment = require('moment');

     moment.locale('es');
     momentLocaliser(moment);

     const DateTimePickerInput = ({
         label,
         format,
         input,
         width,
         placeholder,
         selected,
         tooltip,
         tooltipPlacement,
         disabled,
         defaultValue,
         value,
         onChange,
         inputProps,
         meta: { valid, touched, error},
         showTime,
         style,
         ...props
     }) => {
         const classes = classNames('form-group', {
         'has-error': (touched && !valid),
         'has-success': (touched && !valid)
     })
     return (
         <div className={classes}>
             <label htmlFor={input.name}>{label}</label> <br />
             <DateTime
                 name = {input.name}
                 locale='es'
                 dateFormat= "DD-MM-YYYY"
                 timeFormat= "HH:mm:ss"
                 onChange={param => {
                     input.onChange(param)
                 }}
                inputProps={{placeholder: !input.value ? 'Please, select a date':                    moment(input.value).format('DD-MM-YYYY HH:mm:ss')/*,disabled: true}*/}}
                style={{}}

                 {(!valid && touched) &&
                     <p className='help-block'>{error}</p>
                 }
          </div>
       );
          };

       DateTimePickerInput.propTypes = {
           disabled: PropTypes.bool,
           input: PropTypes.object.isRequired,
           label: PropTypes.string.isRequired,
           meta: PropTypes.object.isRequired,
           placeholder: PropTypes.string,
           tooltip: PropTypes.string,
           tooltipPlacement: PropTypes.string
                                                            }

export default DateTimePickerInput;

А это моя таблица стилей, таблица стилей I ' m импортирую из моего виджета DateTimePicker: 

/*!
     https://github.com/YouCanBookMe/react-datetime
 */

.rdt {
    position: relative;
}

.rdtPicker {
    display: none;
    position: absolute;
    width: 250px;
    padding: 4px;
    margin-top: 1px;
    z-index: 99999 !important;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    border: 1px solid #f9f9f9;
}

.rdtOpen .rdtPicker {
    display: block;
}

.rdtStatic .rdtPicker {
    box-shadow: none;
    position: static;
}

.rdtPicker .rdtTimeToggle {
    text-align: center;
}

.rdtPicker table {
    width: 100%;
    margin: 0;
}

.rdtPicker td,
.rdtPicker th {
    text-align: center;
    height: 28px;
}

.rdtPicker td {
    cursor: pointer;
}

.rdtPicker td.rdtDay:hover,
.rdtPicker td.rdtHour:hover,
.rdtPicker td.rdtMinute:hover,
.rdtPicker td.rdtSecond:hover,
.rdtPicker .rdtTimeToggle:hover {
    background: #eeeeee;
    cursor: pointer;
}

.rdtPicker td.rdtOld,
.rdtPicker td.rdtNew {
    color: #999999;
}

.rdtPicker td.rdtToday {
    position: relative;
}

.rdtPicker td.rdtToday:before {
    content: '';
    display: inline-block;
    border-left: 7px solid transparent;
    border-bottom: 7px solid #428bca;
    border-top-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: 4px;
    right: 4px;
}

.rdtPicker td.rdtActive,
.rdtPicker td.rdtActive:hover {
    background-color: #428bca;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.rdtPicker td.rdtActive.rdtToday:before {
    border-bottom-color: #fff;
}

.rdtPicker td.rdtDisabled,
.rdtPicker td.rdtDisabled:hover {
    background: none;
    color: #999999;
    cursor: not-allowed;
}

.rdtPicker td span.rdtOld {
    color: #999999;
}

.rdtPicker td span.rdtDisabled,
.rdtPicker td span.rdtDisabled:hover {
    background: none;
    color: #999999;
    cursor: not-allowed;
}

.rdtPicker th {
    border-bottom: 1px solid #f9f9f9;
}

.rdtPicker .dow {
    width: 14.2857%;
    border-bottom: none;
    cursor: default;
}

.rdtPicker th.rdtSwitch {
    width: 100px;
}

.rdtPicker th.rdtNext,
.rdtPicker th.rdtPrev {
    font-size: 21px;
    vertical-align: top;
}

.rdtPrev span,
.rdtNext span {
    display: block;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

.rdtPicker th.rdtDisabled,
.rdtPicker th.rdtDisabled:hover {
    background: none;
    color: #999999;
    cursor: not-allowed;
}

.rdtPicker thead tr:first-child th {
    cursor: pointer;
}

.rdtPicker thead tr:first-child th:hover {
    background: #eeeeee;
}

.rdtPicker tfoot {
    border-top: 1px solid #f9f9f9;
}

.rdtPicker button {
    border: none;
    background: none;
    cursor: pointer;
}

.rdtPicker button:hover {
    background-color: #eee;
}

.rdtPicker thead button {
    width: 100%;
    height: 100%;
}

td.rdtMonth,
td.rdtYear {
    height: 50px;
    width: 25%;
    cursor: pointer;
}

td.rdtMonth:hover,
td.rdtYear:hover {
    background: #eee;
}

.rdtCounters {
    display: inline-block;
}

.rdtCounters > div {
    float: left;
}

.rdtCounter {
    height: 100px;
}

.rdtCounter {
    width: 40px;
}

.rdtCounterSeparator {
    line-height: 100px;
}

.rdtCounter .rdtBtn {
    height: 40%;
    line-height: 40px;
    cursor: pointer;
    display: block;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

.rdtCounter .rdtBtn:hover {
    background: #eee;
}

.rdtCounter .rdtCount {
    height: 20%;
    font-size: 1.2em;
}

.rdtMilli {
    vertical-align: middle;
    padding-left: 8px;
    width: 48px;
}

.rdtMilli input {
    width: 100%;
    font-size: 1.2em;
    margin-top: 37px;
}

.rdtTime td {
    cursor: default;
}

Я использую response-datetime в качестве зависимости. Коробка виджета имеет слишком большую ширину, и мне нужно уменьшить ее ширину. Как я могу уменьшить ширину окна моего выбора даты и времени?

1 Ответ

0 голосов
/ 25 февраля 2020

Переопределите CSS правила react-datetime, как показано ниже: 

.rdtPicker {
  width: 400px; //Change it your preferred width
}

.rdtPicker tr {
  height: 50px; //Choose the height of each row so that the overall height will change
}

Вот рабочая ручка .

...