Невозможно ввести 01 в поле месяца в первый раз для поля texbox, замаскированного с помощью плагина Inputmask - PullRequest
0 голосов
/ 10 декабря 2018

У меня есть текстовое поле, к которому прикреплен Datepicker для выбора даты, а также я должен предусмотреть ввод даты вручную с клавиатуры.Я достиг этой функциональности, используя плагин inputmask js от Github.Однако, когда страница загружается впервые, и я пытаюсь ввести значение месяца как «01» для января, маскировка, примененная к текстовому полю, показывает «10».Обходной путь - я могу ввести «11» и затем изменить первую цифру на 0, но я стараюсь избежать этого.Надеюсь, я смогу помочь вам разобраться в проблеме. Заранее я сконцентрировал проблему в простом коде ниже.

PS: я не хочу, чтобы текст заполнителя изменялся, как указано в ответе ниже.Это должно быть "00/00/0000" и все же разрешать пользователю вводить 01.

var maskConfig = {
        leapday: "29-02-",
        separator: "/",
        showMaskOnHover: false,
        showMaskOnFocus: false,
        placeholder: "00/00/0000"
    }

    $('#datepicker1').inputmask('mm/dd/yyyy', maskConfig);
    
    $('#datepicker1').datepicker({
        dateFormat: "mm/dd/yy",
        changeMonth: true,
        changeYear: true,
        
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>

<input type="text" id="datepicker1"/>

1 Ответ

0 голосов
/ 10 декабря 2018

Изменить эту строку

placeholder: "00/00/0000"

на:

placeholder: "01/00/0000"

var maskConfig = {
        leapday: "29-02-",
        separator: "/",
        showMaskOnHover: true,
        showMaskOnFocus: true,
        placeholder: "01/00/0000"
    }

    $('#datepicker1').inputmask('mm/dd/yyyy', maskConfig);
    
    $('#datepicker1').datepicker({
        dateFormat: "mm/dd/yy",
        changeMonth: false,
        changeYear: false,
        
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>

<input type="text" id="datepicker1"/>
...