Нажмите на Datepicker jQuery

#javascript #jquery #datepicker

#javascript #jquery #средство выбора даты

Вопрос:

Я использую 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' });
     
});

Следуйте приведенному здесь коду

Спасибо всем

Ответ №1:

Вы можете просто использовать функцию onSelect datePicker и отобразить выбранную дату в вашем someText с помощью .html()

Текст появится, change как только вы измените date с вашего datepicker .

Живая демонстрация:

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

1. Спасибо @Aways, это помогло мне!

2. @RXSD Привет, не уверен, что было не так с моим ответом. Вы приняли сначала и не приняли сегодня — это работает именно так, как вы хотели?

Ответ №2:

Попробуйте вот так

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

Ответ №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 для правильных операций с датой.