Jquery 日期选择器，显示 dd MMM，同时在数据属性中存储 dd/mm/yyyy

Question

$("input.datepicker, input.date-picker").datepicker({
      format: 'dd/mm/yyyy', 
      orientation : 'left', 
      todayHighlight : true, 
      autoClose: true, 
      clearBtn: true
}).on('changeDate', function (ev) {
      $(this).datepicker('hide');
});

我正在使用 bootstrap 日期选择器 1.4.0，我正在尝试弄清楚如何执行以下操作。

允许用户通过日期选择器select日期。
当日期为 selected 时，将日期显示为 dd MMM（3 月 1 日）
然后将日期值存储在 data-val 属性中作为 dd/mm/yyyy 这样我就可以将它传递给服务器进行存储通过 ajax 请求在数据库中。

ajax 部分非常简单，但我不知道如何很好地显示输入中的值，以及如何将完整日期存储在用户选择更改日期时的附加属性。非常感谢任何想法

https://github.com/eternicode/bootstrap-datepicker

Answer 1

$(function() {
  $('#thedate').datepicker({
    dateFormat: 'dd MM',
    altField: '#altdate',
    altFormat: 'dd/mm/yy'
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Shown Field :
<input id="thedate" type="text" />
<br />Hidden Field :
<input id="altdate" type="text" />
<br />
<input id="thesubmit" type="button" value="Submit" />

看看这个，根据自己的喜好更改格式！

Answer 2

见

$("input.datepicker, input.date-picker").datepicker({
  format: 'dd MM',
  orientation: 'left',
  todayHighlight: true,
  autoClose: true,
  clearBtn: true
}).on('changeDate', function(ev) {
  var $this = $(this),
    format;
  $this.datepicker('hide');
  var date = $(this).datepicker('getDate');
  if (date) {
    format = $.fn.datepicker.DPGlobal.formatDate(date, 'dd/mm/yyyy', $(this).data('datepicker').o.language);
  } else {
    format = '';
  }
  $(this).attr('data-val', format);
  snippet.log('selected date:' + format)
});

<!--Only for demo-->
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>


<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker3.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.js"></script>

<input class="datepicker" />

Answer 3

就这么简单：

$("input.datepicker, input.date-picker").datepicker({
      format: 'dd MM', 
      orientation : 'left', 
      todayHighlight : true, 
      autoClose: true, 
      clearBtn: true
}).on('changeDate', function (ev) {
      $(this).datepicker('hide');
      var date=ev.date.getDate() + "/" + ev.date.getMonth()+"/"+ev.date.getFullYear();
      $(this).attr('data-val',date);
      alert($(this).attr('data-val')); //just for demo purpose
});

DEMO

允许用户通过日期选择器select日期。

The below part initializes the datepicker for an input with classname datepicker and date-picker

$("input.datepicker, input.date-picker").datepicker({
          format: 'dd MM', 
          orientation : 'left', 
          todayHighlight : true, 
          autoClose: true, 
          clearBtn: true
})

当日期为 selected 时，将日期显示为 dd MMM（3 月 1 日）

This below event changeDate takes care of the displaying and storing the value

.on('changeDate', function (ev) {
          $(this).datepicker('hide');
          var date=ev.date.getDate() + "/" + ev.date.getMonth()+"/"+ev.date.getFullYear();
          $(this).attr('data-val',date);
          alert($(this).attr('data-val')); //you can remove this
});

然后将日期的值存储在data-val属性中作为 dd/mm/yyyy 这样我就可以将它传递给服务器以存储在数据中通过 ajax 请求建立基础。

The below part helps you to achieve the above requirement

var date=ev.date.getDate() + "/" +ev.date.getMonth()+"/"+ev.date.getFullYear();
//parameter passed to the changeDate event will have a property called `date` which 
//holds current date value from which you can extract the required date, month and year 
//and store it 
$(this).attr('data-val',date); // or $(this).data('val',date);

Jquery 日期选择器，显示 dd MMM，同时在数据属性中存储 dd/mm/yyyy

Jquery date picker, display dd MMM, whilst storing dd/mm/yyyy in data attribute

jquery

datepicker

twitter-bootstrap