Question

我目前正在C＃asp.net开发一个约会应用程序。

该应用程序涉及某人投入预约。目前，如果管理员不可用，我会在提交表单时进行检查，但我想动态地进行检查。

我正在使用Javascript / jQuery DateTimePicker，理想情况下我想执行以下操作：

没有约会的日期应该是灰色的
不可用的时间或预订管理员的时间应为红色

我知道我需要一个Ajax调用来执行此操作，但我完全失去了。

这是我的DateTimePicker：

<script>
$('#DateOfAppointment').datetimepicker({
    format: 'd/m/Y H:i',
    minDate: 0,
    inline: true,
    allowTimes: ['9:00', '9:30', '11:30', '12:00', '12:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00']
});

如果有人想要CSS文件或脚本，我可以使它可用。

编辑我将包含我的控制器方法和更新的datetimepicker：

public JsonResult UnAvailableSlots()
    {
        var events = (from a in db.Appointments
                      select a).ToList();

        return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }

    @section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

}

<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/jquery.datetimepicker.js"></script>

<script>
    $(document).ready(function () {
        var events = [];
        $.ajax({
            type: "GET",
            url: "/Appointments/UnAvailableSlots",
            success: function (data) {
                $.each(data, function (i, v) {
                    events.push({
                        details: v.DetailsOfAppointment,
                        date: moment(v.DateOfAppointment),
                        room: v.RoomType,
                        confirmed: v.Confirmed,
                        colour: v.ThemeColour,
                        church: v.Church.Name,
                        parishAdminName: v.Admins.AdministratorName,
                        parishAdminUser: v.Admins.AdminUsername,
                        parishAdminId: v.Admins.AdministratorId,
                        fee: v.Fee,
                        id: v.AppointmentId
                    });

                })
                GenerateCalender(events);
            },
            error: function (error) {
                alert("failed");
                console.log(error);
            }
        })

        function GenerateCalender(events) {
            $('#DateOfAppointment').datetimepicker({
                format: 'd/m/Y H:i',
                minDate: 0,
                inline: true,
                disabledDates: [events.date],
                allowTimes: ['9:00', '9:30', '11:30', '12:00', '12:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00']
            });
        }
    })
</script>

Answer 1

太糟糕了，这个插件不支持允许日期和时间的ajax和回调。

您必须设置：https://xdsoft.net/jqplugins/datetimepicker/#allowDates

allowDates:['not','full','dates']

选择日期后，您可以使用以下内容覆盖allowTimes：

$('#input').datetimepicker('setOptions', {allowTime:['times']});

像这样：

onSelectDate:function(date,$i){
  // your ajax call here with callback method updating datepicker
  api.availableHoursOnDay(date,function(hoursOpen){
         $('#input').datetimepicker('setOptions', {allowTime:hoursOpen});
  })
  alert(ct.dateFormat('d/m/Y'))
}

可能有点hacky。但唯一的另一种方式是：

下载源代码并根据需要进行更改
创建自己的插件/ datepicker。

DateTimePicker具有从数据库中预订的日期和时间

1 个答案: