如何在使用日期选择器时输入字段中的日期，当按键上的逗号替换为句点时 - How to in input field date when use datepicker, when pres comma on presskey replaced with dot

我使用日期选择器和输入表单来输入日期。有时需要，由于速度更快，只从键盘输入数字，而没有数据选择器。如何允许在格式输入字段日期(type=text)上，按逗号并同时在输入字段中显示点（用点代替逗号）。这是因为键盘数字键盘只有一个逗号而没有一个点。现在我不能用逗号了。现在只允许点。

脚本

<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>

maxlength中的属性不大小，所以在输入字段中设置maxlength＝10。我想您还需要使用日期格式验证输入字符串。你可以试试这个：

<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>

有关格式，请参阅此处：Regex验证日期格式dd/mm/yyyy

Datepicker现在是这样的。在结束时添加鼠标很重要，因为当您从日历中选择日期时需要鼠标。

$(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');       
   });                           
 });