完整日历插件 - 点击日期输入

时间:2017-12-15 08:22:55

标签: javascript jquery fullcalendar

工作更新:

我使用完整的日历jQuery插件,但我无法弄清楚如何获取点击日期并将其设置为输入值。

点击日期的警报工作正常,但当我想移动到事件或输入字段时它不起作用。这是代码:

$(document).ready(function() {
        $('#bootstrapModalFullCalendar').fullCalendar({
            lang: 'hr',
            displayEventTime: false,
            dayClick: function(date, jsEvent, view) {
                var datum = date.format();
                alert(datum);
            },
            header: {
                left: '',
                center: 'prev title next',
                right: ''
            },
            eventClick:  function(event, jsEvent, view) {
                $('#modalTitle').html(event.title);
                $('#modalBody').html(event.description);
                $('#datum').html(moment(event.start._d).format("YYYY-MM-DD"));
                $('#fullCalModal').modal();
                return false;
            },
            events:
            [
               {
                  "title":"   Add data on this day",
                  "datum":"Date:"+moment(datum).format(),
                  "allday":"true",
                  "description":"<p><center><b>test..</b></center></p>",
                  "start":'06:00',
                  "end":'23:00',
                  "dow":'[1,2,3,4,5,6, 7]'

               }
            ]
        });
    });

在事件上单击它调用模式(HTML表单):

<div id="fullCalModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">

                <h4 id="modalTitle" class="modal-title"></h4> <!-- NASLOV -->
            </div>
            <div id="modalBody" class="modal-body"></div> <!-- OPIS  -->
        <form method="POST" name="plan" id="plan">
            <!-- POLJA ZA UNOS  -->
                <center><label for="datum">Datum:</label></center> <div id="datum" class=""></div>
                <center><input style="width:200px" autocomplete="off" style="z-index: 1;" placeholder="Datum" maxlength="100" class="form-control" type="text"  name="datum" id="datum" value="" /></center>
                <br />
                <center><label for="sifra_smjene">Šifra smjene:</label></center>
                <center><input style="width:200px" autocomplete="off" style="z-index: 1;" placeholder="Šifra smjene" maxlength="100" class="form-control" type="number"  name="sifra_smjene" id="sifra_smjene" value="" /></center>
                <br />
                <center><label for="objekt">Objekt:</label></center>
                <center><input style="width:200px" autocomplete="off" style="z-index: 1;" placeholder="Objekt" maxlength="100" class="form-control" type="number"  name="objekt" id="objekt" value="" /></center>
                <br />
                <center><label for="smjena">Smjena</label></center>
                <center><input style="width:200px" autocomplete="off" style="z-index: 1;" placeholder="Smjena" maxlength="100" class="form-control" type="number"  name="smjena" id="smjena" value="" /></center>
                <br />
        </form>

            <!-- KRAJ POLJA -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Odustani</button>
                <button class="btn btn-success font" type="submit">Spremi</button>
            </div>
        </div>
    </div>
</div>

我点击了日期:未定义/无效日期。 我错过了什么吗?

1 个答案:

答案 0 :(得分:2)

尝试将JS更改为

$(document).ready(function() {

  var datum;

        $('#bootstrapModalFullCalendar').fullCalendar({
            lang: 'hr',
            displayEventTime: false,
            dayClick: function(date, jsEvent, view) {
                datum = date.format();
                alert(datum);
            },
            header: {
                left: '',
                center: 'prev title next',
                right: ''
            },
            eventClick:  function(event, jsEvent, view) {
                $('#modalTitle').html(event.title);
                $('#modalBody').html(event.description);
                $('#datum').html(event.datum);
                $('#fullCalModal').modal();
                return false;
            },
            events:
            [
               {
                  "title":"   Add data on this day",
                  "datum":"Date:"+moment(datum).format(),
                  "allday":"true",
                  "description":"<p><center><b>test..</b></center></p>",
                  "start":'06:00',
                  "end":'23:00'
               }
            ]
        });
    });

您最有可能获得undefined,因为您在函数内声明了变量,因此无法在其外部访问它。将其声明为外部的空变量,然后更改其中的值应该有效。