当使用日期选择器，按键上的逗号替换为点时，如何在输入字段中输入日期

Question

I use datepicker and input form for input date. Sometimes need, becouse of better speed only input numbers from keyboard without datapicker. How I can allowed on format input field date (type=text) , press comma and in same moment show dot in input field (replace comma with dot). This is becouse keyboard num pad just has a comma and not a dot. Now I can not pres comma. Allowed now is only dot.

script

<script>
$(function() {
$( "#dokumentdatum" ).datepicker( { changeMonth: true , changeYear:   
true, yearRange:"-100:+100", dateFormat: "dd.mm.yy",
dayNamesMin: ["Su", "Ne", "Po", "Ut", "Sr", "Če", "Pe"],
monthNamesShort: [ "Sij", "Vel", "Ožu", "Tra", "Svi", "Lip", "Srp", "Kol", "Ruj", "Lis", "Stu", "Pro" ],
firstDay: 2, showOn: "button",  buttonText: 'Odaberi datum', buttonImageOnly: true, buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif' , 
onClose: function()
   { this.focus(); }                       
 } );

 $(".ui-datepicker-trigger").mouseover(function() {
    $(this).css('cursor', 'pointer');       
   });                           
 });  
</script>

php

<p><label class="field4" for "Dokumentdatum">Datum dokumenta : </label> <input type="text" id="dokumentdatum" onblur="prepisidatumdvo(this)"  name="dokumentdatum" value="'.$dokumentdatum.'" placeholder="dd.mm.yyyy" size="10" class="textbox-xx" ></p>

Answer 1

the property in maxlength not size so set maxlength=10 in your input field.I guess you also need to validate the input string with the date format . you can try this:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ var lastValue="" $(function(){ $('#dokumentdatum').on('input', function(e){ var data; data=$('#dokumentdatum').val(); var count= data.length, ml= 10,remaining= ml - count; if(remaining <= 0){ return; } var str=data.replace(/\\,/g,"."); $('#dokumentdatum').val(str.replace(/\\.\\.+/g, '.')); }); }); }); function checkFormat() { var reg = /^(?:(?:31(\\.)(?:0?[13578]|1[02]))\\1|(?:(?:29|30)(\\.)(?:0?[1,3-9]|1[0-2])\\2))(?:(?:1[6-9]|[2-9]\\d)?\\d{2})$|^(?:29(\\.)0?2\\3(?:(?:(?:1[6-9]|[2-9]\\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\\d|2[0-8])(\\.)(?:(?:0?[1-9])|(?:1[0-2]))\\4(?:(?:1[6-9]|[2-9]\\d)?\\d{2})$/g; var txt = $('#dokumentdatum').val(); if (reg.test(txt)) { document.getElementById("mainDiv").innerHTML = "<h1 style='color:green'>Correct</h1>"; } else { document.getElementById("mainDiv").innerHTML = "<h1 style='color:red'>Wrong</h1>"; } } </script> <p><label class="field4" for "Dokumentdatum">Datum dokumenta : </label> <input type="text" id="dokumentdatum" onblur="checkFormat()" name="dokumentdatum" value="" placeholder="dd.mm.yyyy" class="textbox-xx" maxlength="10"></p> <div id="mainDiv"></div> 

see here for formats: Regex to validate date format dd/mm/yyyy

Answer 2

Datepicker is now look like this. It is important to add on close, becaouse is need when You pick date from calendar.

$(function() {
$( "#dokumentdatum" ).datepicker( { changeMonth: true , changeYear:  true, yearRange:"-100:+100", dateFormat: "dd,mm,yy",
dayNamesMin: ["Su", "Ne", "Po", "Ut", "Sr", "Če", "Pe"],
monthNamesShort: [ "Sij", "Vel", "Ožu", "Tra", "Svi", "Lip", "Srp", "Kol", "Ruj", "Lis", "Stu", "Pro" ],
firstDay: 2, showOn: "button",  buttonText: 'Odaberi datum', buttonImageOnly: true, buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif' , 
onClose: function()
   { 
   var data;
   data=$('#dokumentdatum').val();
   var str=data.replace(/\,/g,".");
   $('#dokumentdatum').val(str.replace(/\.\.+/g, '.'));
   this.focus(); 
   }                       
 } );

 $(".ui-datepicker-trigger").mouseover(function() {
    $(this).css('cursor', 'pointer');       
   });                           
 });