SweetAlert 2 Mask Input

Question

I'm using Sweet Alert2 (https://sweetalert2.github.io/) -react component and I need on second step mask the input with (thousand separator and prefix="$") it's possible?

Here some code


    import React, { Component } from 'react';
    import Swal from 'sweetalert2';
    import { Fab } from '@material-ui/core';
    import withReactContent from 'sweetalert2-react-content';


    const reSwal = withReactContent(Swal);

    class NewTask extends Component {


      state = {
        goToProfile: false
      };


      handleNewTask = async () => {

        reSwal.mixin({
          input: 'text',
          confirmButtonText: 'Next →',
          showCancelButton: true,
          progressSteps: ['1', '2']
        }).queue([
          {
            title: 'Age',
            text: 'Your Age'
          },
          {
            title: 'Budget',
            text: 'Your Budget',
            input: 'number',
            inputAttributes: {
              min: 100,
              max: 1000000
            },
          },

        ]).then((result) => {
          if (result.value) {
            reSwal.fire({
              title: 'thank u !',
              confirmButtonText: 'Lovely!'
            })
          }
        })
      }

      render() {

        return (
          
            New
          
        );
      }
    }

    export default NewTask;

I don't know how to control this. Thank for your help

Dahan Schuster Dahan Schuster · Accepted Answer · 2019-11-02T19:42:49

I know that already passed 3 months, but I hope I can still help you.

I got this problem just now and googled for answers but didn't get any solution, so I used this method to achieve what I wanted:

swal.fire({
    text: 'myText',
    input: 'text',
    inputAttributes: {
        id: 'myInput'
    },
    onOpen: function(el) {
        var container = $(el);
        container.find('#myInput').mask('$ 0000.00');
    }

That solution uses the Jquery's Mask Plugin (you can see the documentation here) and the onOpen attribute from SweetAlert2. At onOpen, you can pass a function that gets the swal container, finds the input by id with JQuery and calls the .mask() method with the mask you asked for.

At the Jquery's Mask Plugin official site you can see more examples of masks.

Good afternoon!

SweetAlert 2 Mask Input

1 Answers