单击日期选择器 jQuery

Question

我正在使用 jQuery Datepicker，我想在选择日期时捕获点击事件，可以吗，我该怎么做？

HTML代码：

Date From : <input type="text" name="datefrom" id="inputdate2" required>

<p id='someText'>
  <!-- I want to set the date here after it was clicked -->
</p>

jQuery代码：

$(function() {
     
     $("#inputdate2").datepicker({ dateFormat: 'dd-mm-yy' });
     
});

Follow the code here

谢谢大家

Answer 1

这样试试

$(function() {
     
     $("#inputdate2").datepicker({
     dateFormat: 'dd-mm-yy',
    onSelect: function(dateText, inst) {
        var date = $(this).val();
        var time = $('#time').val();
        console.log('on select triggered', date);
    }
});
     
});

Answer 2

您可以简单地使用 onSelect function datePicker and show the selected date in your someText using .html()

一旦您更改 datepicker 中的 date，文本将 change。

现场演示：

$(function() {
  $("#inputdate2").datepicker({
    dateFormat: 'dd-mm-yy',
    onSelect: function(date, inst) {
      $('#someText').html(date)
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" integrity="sha512-cViKBZswH231Ui53apFnPzem4pvG8mlCDrSyZskDE9OK2gyUd/L08e1AC0wjJodXYZ1wmXEuNimN1d3MWG7jaQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.min.css" integrity="sha512-YqF4f2cbm2jH7sEEu/iDJFjSQ/qUSzoiQIK2OQ3OFTsQQE5dxoCTYz1wZrTMv8ES8NYqOB5ChZU8jQdMaEv/yg==" crossorigin="anonymous" />Date From : <input type="text" name="datefrom" id="inputdate2" required>

<p id='someText'>
  <!-- I want to set the date here after it was clicked -->
</p>

Answer 3

是的，这是可能的。只需找出以下事件示例：

$("#inputdate2").datepicker("destroy");
$("#inputdate2").datepicker({
dayNamesMin: ["S", "M", "T", "W", "T", "F", "S"],
beforeShowDay: function (d) {
  var date = $.datepicker.formatDate("mm/dd/yy", d);
  var c = dates.length;
  var colorclass = "";
  for (var i = 0; i < c; i++) {
    if (date == dates[i].Date) {
      colorclass += " " + dates[i].Color;
    }
  }
  return [true, colorclass];
},
defaultDate: sDate ? sDate : moment().format("MM/DD/YYYY"),
onSelect: function (selectedDate) {
  showLoader();
  // Do stuff on date select
},
afterShow: function () {
  afterCalenderShow();
}});

仅供参考：使用 Moment.js 进行正确的日期操作。

单击日期选择器 jQuery

Click on Datepicker jQuery

javascript

jquery

datepicker