We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Custom appointment dialog with date-time-picker

Thread ID:

Created:

Updated:

Platform:

Replies:

130923 Jun 11,2017 01:10 PM Jun 12,2017 03:04 AM ASP.NET Core 1
loading
Tags: Schedule
dsapo
Asked On June 11, 2017 01:10 PM

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 [Syncfusion]
Replied On June 12, 2017 03:04 AM

 
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. 
 
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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;