Custom appointment dialog with date-time-picker

[dsapo]

Hi Support:

We need to create a custom dialog but using a ej-time-picker to select the time rather than using the ej-date-time-picker that embed date and time.

We need to do this because the ej-date-time-picker does not have a min-time and max time properties. 

Do you have a sample of how we can use the ej-date-picker and ej-time-picker in order to save at the end the appointtime datetime in one db field.

For example how we are going to combine the date a and time after a user provide these values.

Thanks

David

[Karthigeyan Krishnamurthi]

Hi David, 

 

Thank you for contacting Syncfusion support. 

 

We have prepared the sample to both Date and Time picker separately instead DateTime picker which can be download from the below location. 

http://www.syncfusion.com/downloads/support/forum/130923/ze/Sample1740475613 

 

Kindly refer the below code example used in the sample. 

<Code> 

function onAppointmentWindowOpen(args) { 

    args.cancel = true; 

    $("#StartDate").ejDatePicker({ value: ej.format(args.startTime, this._datepattern(), this.model.locale) }); 

    $("#EndDate").ejDatePicker({ value: ej.format(args.endTime, this._datepattern(), this.model.locale) }); 

    $("#StartTime").ejTimePicker({ value: ej.format(args.startTime, this._pattern.t, this.model.locale) }); 

    $("#EndTime").ejTimePicker({ value: ej.format(args.endTime, this._pattern.t, this.model.locale) }); 

    if (!ej.isNullOrUndefined(args.target)) { 

        if ($(args.target.currentTarget).hasClass("e-alldaycells") || this._allDay) { 

            $("#allday").prop("checked", true); 

            alldayCheck(); 

        } 

        else 

            args.model.currentView == "month" ? $("#allday").prop("checked", true) : $("#allday").prop("checked", false); 

        $("#StartTime,#EndTime").ejTimePicker({ enabled: ($(args.target.currentTarget).hasClass("e-alldaycells") || $(args.target.currentTarget).hasClass("e-monthcells") || args.model.currentView == "month") ? false : true }); 

    } 

    if (!ej.isNullOrUndefined(args.appointment)) { 

        $("#customId").val(args.appointment.Id); 

        $("#subject").val(args.appointment.Subject); 

        $("#customdescription").val(args.appointment.Description); 

        $("#StartDate").ejDatePicker({ value: ej.format(args.appointment.StartTime, this._datepattern(), this.model.locale) }); 

        $("#EndDate").ejDatePicker({ value: ej.format(args.appointment.EndTime, this._datepattern(), this.model.locale) }); 

        $("#StartTime").ejTimePicker({ value: ej.format(args.appointment.StartTime, this._pattern.t, this.model.locale) }); 

        $("#EndTime").ejTimePicker({ value: ej.format(args.appointment.EndTime, this._pattern.t, this.model.locale) }); 

        $("#allday").prop("checked", args.appointment.AllDay); 

        $("#recurrence").prop("checked", args.appointment.Recurrence); 

        if (args.appointment.Recurrence) { 

            $("#rType").val(args.appointment.RecurrenceRule.split(";")[0].split("=")[1].toLowerCase()); 

            $("tr.recurrence").css("display", "table-row"); 

        } 

    } 

    $("#customWindow").ejDialog("open"); 

    if (this._allDay) alldayCheck(); 

} 

</Code> 

Regards, 

Karthigeyan