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

Posted 2023-02-19

【中文标题】DateTimePicker 从数据库中预订日期和时间

【英文标题】：DateTimePicker to have dates and times booked from Database

【发布时间】：2018-08-24 09:01:43

【问题描述】：

我目前正在用 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 文件或脚本，我可以提供。

编辑我将包括我的控制器方法和我更新的日期时间选择器：

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>

【问题讨论】：

你使用的是哪个datetimepicker？

@webBer 使用这个xdsoft.net/jqplugins/datetimepicker

【参考方案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。但唯一的其他方法是：

下载源代码并根据您的需要进行更改 创建您自己的插件/日期选择器。