Как добавить текст к числу в поле Value?

Question

[San Manjiro]

Нужно в поле "input", где написан срок, добавить слово "дней", как на скриншотах.


Код:

<IMaskInput
         value={convertObjectValues(valueDay, true)+"дней"} //вот такой способ не работает :(
         mask={Number}
         min={5}
         max={30}
         placeholder={valueDay}
         unmask={true}
         onAccept={ (value) => setValueDay(value) }
 />

Comments

[ildar-meyker]

А почему вы не хотите использовать маску?

[Вадим]

ildar-meyker, ну так Вы в инпут с маской на числа передаёте текст. Вот он и отрезается. Неожиданно, да?
Уверен что в маске Number буквы не поддероживаются.

[San Manjiro]

ildar-meyker, а как именно? я пробовал использовать маску, но не знаю как сделать так, чтобы числа делились на разряды пробелом правильно. Потому что когда я вводил 10000, число становилось вида 1 0 000, а должно 10 000.

[San Manjiro]

ildar-meyker, есть ли какой-то способ просто прибивать текст к convertObjectValues(valueDay, true) непосреедственно в самом value={}

[San Manjiro]

Вадим, как раз таки если попробовать заполнить value={} числовым типом данным, а не стринговым, посыпаться ошибки, т.к. библиотека, которую я использую, применяет к переменное, находящиеся в value={} такие свойства как .replac()

[Вадим]

Михаил Ларионов, причём тут числовой не числовой тип данных.
Вы знаете что такое маска у инпута? Как она работает?
Если нет, то пойдите погуглите.
Я Вам не с точки зрения типов данных говорю.
Символы есть специальные, есть цифры, есть буквы и все тип данных - строка.
У Вас 99% стоит маска чтобы пропускало только символы, представляющие цифры.
А Вы пытаетесь тудаже пропихнуть буквы.
Понимаете разницу?
строка цифра != тип данных число.

[San Manjiro]

Вадим, теперь понял вас) как тогда можно выйти из этой ситуации? не делать же input текстом.

[Вадим]

Михаил Ларионов, опять же, 99% что у Вас он итак input type text.
Дополните маску если это слово всегда одно и то же, чтобы после цифр всегда было статичное слово "дней". Как это сделать Вам лучше подскажет документация этого компонента, который Вы используете для маски.

[San Manjiro]

Вадим, можно использовать Pattern Mask для маски: https://imask.js.org/guide.html, но как я уже говорил, я не знаю как мне разделять тогда числа на разряды, потому что тогда получается вот такой бред, что число становилось вида 1 0 000, а должно 10 000

Answer 1

[ildar-meyker]

Типо так:

IMaskInput
placeholder="Enter number here"
mask={"d дней"}
lazy={false}
blocks={{ d: { mask: Number } }}
/>

Comments

[San Manjiro]

то, что нужно, но теперь не работают параметры min и max, чтобы нельзя было вводить меньше 1 500 и больше 15 000

[San Manjiro]

ещё числа не делятся на рязряды, по типу 1500 => 1 500 ; 10000 => 10 000

[ildar-meyker]

Михаил Ларионов,

<IMaskInput
        placeholder="Enter number here"
        mask={"d дней"}
        lazy={false}
        blocks={{
          d: { mask: Number, min: 1, max: 5000, thousandsSeparator: " " }
        }}
        placeholderChar={" "}
        value={days}
        unmask={true}
        onAccept={(value, mask) => {
          setDays(value);
        }}
      />

Answer 2

[San Manjiro]

Вопрос можно считать закрытым, очень сильно помучившись, методом научного тыка я смог сделать маску, которая добавляет в конец нужный знак или же текст, и при этом делит число на разряды пробелом, и запрещает вводить числа, установленные в mix и max, вот код кому надо:

<IMaskInput
     value={convertObjectValues(valueSum, true)}
     mask={"a d"}
     blocks={{ d: { mask: "₽" }, a:{mask: Number, thousandsSeparator: ' ', min: 1500, max: 15000} }}
     lazy={false}
     placeholder={valueSum}
     unmask={true}
     onAccept={ (value) => setValueSum(value) }
     onBlur={handlerBlurSum}
     onPointerLeave={handlerBlurSum}
     onClick={handlerBlurSum}
 />