jQuery UI datepicker: ¿Se puede formatear una fecha y permitir varios caracteres de separador?

Question

prefiero mi planificador de evento a formatear con esta opción

{dateFormat: 'mm-dd-yy'} 

Ex: 06-16-2010

Pero, me gustaría que la gente pueda entrar en una barra como un separador en lugar de un guión si eligen

¿Hay alguna manera de configurar el marcador de fecha para que se convierta en mm-dd-aa pero no impediría que alguien ingrese mm/dd/aa?

Yo sé que puedo establecer {constrainInput: false}. A pesar de que entonces la gente puede introducir letras :(

Gracias por cualquier ayuda

Answer 1

el selector de fechas tiene la opción altFormat altField & para que pueda mostrar un formato pero enviar a la otra, pero eso no es lo que quiere.

le sugiero que utilice Datejs (http://www.datejs.com/) para analizar la entrada del usuario y actualizar un cuadro de texto oculto que está vinculada a su planificador de evento.

Answer 2

Absolutamente. Puede escribir cualquier cosa en el campo si desactiva constrainInput.

$("#myDateInput").datepicker({ 
    dateFormat: 'mm-dd-yy', 
    constrainInput: false 
}); 

documentos completos: http://api.jqueryui.com/datepicker/#option-constrainInput

Answer 3

El constraininput hará el truco. Intentaba hacer algo similar y afecté el cambio para hacer algunas cosas adicionales. Puedes usar cualquier delimitador./-. , espacio, etc. Convierte cualquier dígito que no sea a /. Si ingresas m/d o m/d /, agregará el año actual usando cualquier delimitador. Si haces T o t, devolverá el día actual. Puedes hacer T10 o T + 10 y volverá hoy más 10 días. Puedes hacer t-10 y volverá 10 días antes. Puede cambiar los 2 lugares donde tiene "mm-dd-y" para usar el formato deseado. Esta solución debería funcionar para el formato internacional, excepto por la fecha automática agregada, pero no lo probé para eso.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<script> 
 
$(function() { 
 
    $("#STARTDATE").datepicker({ 
 
     numberOfMonths: 4, 
 
     showButtonPanel: true, 
 
     constrainInput: false, 
 
\t dateFormat: "mm-dd-y" 
 
    }); 
 
\t $("#STARTDATE").change(function() { 
 
\t if ($("#STARTDATE").val().toUpperCase().indexOf("T") >= 0) { 
 
     Days = parseInt("0" + $("#STARTDATE").val().replace(/\D/g,'')); 
 
     if ($("#STARTDATE").val().indexOf('-') >= 0){Days*=-1} 
 
     var tdate = new Date(); 
 
     tdate.setDate(tdate.getDate() + Days); 
 
\t } else { 
 
     var tdate = $("#STARTDATE").val().replace(/[^0-9]+/g, '/'); 
 
\t var tvar = tdate.split("/"); 
 
\t if (tvar.length == 3){ 
 
\t  if (tvar[2] == "") {tdate += new Date().getFullYear().toString().substr(-2)} 
 
\t } 
 
\t if (tvar.length == 2){tdate += "/" + new Date().getFullYear().toString().substr(-2)} 
 
     try { 
 
    \t  tdate = $.datepicker.parseDate('mm/dd/y', tdate); 
 
\t } catch (Error) { 
 
     try { 
 
    \t  tdate = $.datepicker.parseDate('mm/dd/yy', tdate); 
 
    \t  } catch (Error) { 
 
     } 
 
     } 
 
\t } 
 
\t tdate = $.datepicker.formatDate("mm-dd-y", new Date(tdate)); 
 
\t $("#STARTDATE").val(tdate); 
 
    }); 
 
}); 
 
</script>