Как отобразить ежемесячный сборщик в другом div, используя Jquery - PullRequest
Новая
       11

Как отобразить ежемесячный сборщик в другом div, используя Jquery

0 голосов
/ 26 октября 2018

Мне нужно отобразить ежемесячный указатель Пользовательский интерфейс внутри одного другого div, но выбранное значение будет извлечено в поле ввода с помощью Jquery.Я объясняю мой код ниже. 

<!DOCTYPE html>
<html>
    <head>
        <title>Parent-Child Communication</title>
        <link rel="stylesheet" type="text/css" href="jquery-ui.min.css" />
        <link rel="stylesheet" type="text/css" href="monthpicker.css" />
        <script src="jquery-2.2.3.min.js"></script>
        <script src="jquery-ui.min.js"></script>
        <script src="monthpicker.min.js"></script>
    </head>
    <body>
        <input id="sDate" type="text" />
        <div id="packagetour_datepickerpick"></div>
        <script type="text/javascript">
            $('#sDate').Monthpicker();
        </script>
    </body>
</html>

Здесь мне нужно отобразить ежемесячный указатель внутри <div id="packagetour_datepickerpick"></div>, но выбранное значение должно быть выбрано в поле ввода.(Вот демонстрационный код) [http://plnkr.co/edit/vtth4dTXTUapFfFQB8MC?p=preview].

1 Ответ

0 голосов
/ 26 октября 2018

Примечание: как обсуждено в разделе комментариев

Я создал работающий пример, в котором используются следующие библиотеки.

  1. https://code.jquery.com/jquery-1.9.1.js
  2. https://code.jquery.com/ui/1.9.2/jquery-ui.js
  3. https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css
  4. https://rawgit.com/KidSysco/jquery-ui-month-picker/v3.0.0/demo/MonthPicker.min.css
  5. https://rawgit.com/KidSysco/jquery-ui-month-picker/v3.0.0/demo/MonthPicker.min.js

$("#packagetour_datepickerpick").MonthPicker({
    SelectedMonth: '04/' + new Date().getFullYear(),
    AltField: '#sDate',
    OnAfterChooseMonth: function(selectedDate) {
        // Do something with selected JavaScript date.
        // console.log(selectedDate);
    }
});
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/KidSysco/jquery-ui-month-picker/v3.0.0/demo/MonthPicker.min.css" rel="stylesheet"/>
<script src="https://rawgit.com/KidSysco/jquery-ui-month-picker/v3.0.0/demo/MonthPicker.min.js"></script>


<input id="sDate" type="text" />
<div id="packagetour_datepickerpick"></div>

Надеюсь, это поможет вам. :)

...