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

Я предпочитаю, чтобы мой datepicker был отформатирован с этой опцией

{dateFormat: 'mm-dd-yy'}

Ex: 06-16-2010

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

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

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

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


jquery jquery-ui jquery-ui-datepicker
person user169867    schedule 16.06.2010    source источник

Ответы (3)


arrow_upward
1
arrow_downward

у средства выбора даты есть опция altField и altFormat, поэтому вы можете показывать один формат, но отправлять другой, но это не то, что вам нужно.

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

person marc.d    schedule 16.06.2010

arrow_upward
22
arrow_downward

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

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

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

person Jon Weers    schedule 16.06.2010
comment
Спасибо за contrainInput - person reignsly; 09.07.2015

arrow_upward
0
arrow_downward

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

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

person user999684    schedule 18.09.2017
comment
Кроме того, необходимо поменять местами STARTDATE с вашим идентификатором поля даты. - person user999684; 18.09.2017