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 datepicker 1.4.0，我试图弄清楚如何执行以下操作。

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

ajax部分非常简单，但我无法弄清楚如何在输入中很好地显示值，并将完整日期存储在用户选择更改日期时的附加属性。任何想法都非常感激

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

Answer 1

简单如下：

$("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

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

以下部分初始化了类别为datepicker和date-picker的输入的日期选择器

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

选择日期后，将日期显示为dd MMM（3月1日）

以下事件changeDate负责显示和存储价值

.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请求。

以下部分可帮助您达到上述要求

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

Answer 2

$(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 3

见

＆＃13;

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

＆＃13;

<!--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" />

＆＃13;

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

3 个答案: