JQuery UI datepicker: вы можете отформатировать дату и разрешить несколько символов-разделителей? - PullRequest
Новая
       6

JQuery UI datepicker: вы можете отформатировать дату и разрешить несколько символов-разделителей?

9 голосов
/ 16 июня 2010

Я предпочитаю, чтобы мой указатель даты форматировался с этой опцией 

{dateFormat: 'mm-dd-yy'}

Пример: 06-16-2010

Но я бы хотел, чтобы люди входили в косую черту какразделитель вместо тире, если они выберут.

Есть ли способ настроить средство выбора даты так, чтобы оно по умолчанию имело значение mm-dd-yy, но не помешало бы кому-либо ввести mm / dd / yy?

Я знаю, что могу установить {constrainInput: false}, хотя тогда люди могут вводить буквы: (

Спасибо за любую помощь.

Ответы [ 3 ]

22 голосов
/ 16 июня 2010

Абсолютно. Вы можете ввести в поле все, что угодно, если вы отключите restinInput. 

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

Полная документация: http://api.jqueryui.com/datepicker/#option-constrainInput

1 голос
/ 16 июня 2010

DatePicker имеет опцию altField & altFormat, поэтому вы можете показать один формат, но отправить другой, но это не то, что вам нужно.

Я предлагаю использовать datejs (http://www.datejs.com/) для разборапользователь вводит и обновляет скрытое текстовое поле, которое связано с вашим указателем даты.

0 голосов
/ 18 сентября 2017

Ограничение будет делать свое дело. Я пытался сделать то же самое, и я связал изменение, чтобы сделать несколько дополнительных вещей. Вы можете использовать любой разделитель. / -. , пробел и т. д. Он преобразует любые не цифры в /. Если вы введете m / d или m / d /, он добавит текущий год, используя любой разделитель. Если вы сделаете T или T, он вернет текущий день. Вы можете сделать T10 или T + 10, и он вернется сегодня плюс 10 дней. Вы можете сделать T-10, и он вернется за 10 дней до. Вы можете изменить 2 места, где он имеет "mm-dd-y", чтобы использовать желаемый формат. Это решение должно работать для международного формата, за исключением автоматического добавления даты, но я не проверял его для этого. 

<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,
	  dateFormat: "mm-dd-y"
    });
	$( "#STARTDATE" ).change(function() {
	  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);
	  } else {
       var tdate = $("#STARTDATE").val().replace(/[^0-9]+/g, '/');
	   var tvar = tdate.split("/");
	   if (tvar.length == 3){
	    if (tvar[2] == "") {tdate += new Date().getFullYear().toString().substr(-2)}
	   }
	   if (tvar.length == 2){tdate += "/" + new Date().getFullYear().toString().substr(-2)}
       try {
 	    tdate = $.datepicker.parseDate('mm/dd/y', tdate);
	   } catch (Error) {
        try {
 	     tdate = $.datepicker.parseDate('mm/dd/yy', tdate);
  	    } catch (Error) {
        }
       }
	  }
	  tdate = $.datepicker.formatDate( "mm-dd-y", new Date( tdate ) );
	  $( "#STARTDATE" ).val(tdate);
    });
 });
</script>
...