Timepicker for DateTime field

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.
4 anni tempo fa
Is there a way that I can use the Timepicker for a DateTime property in my model, as shown here? The NopEditorFor currently shows a DateTimePicker control but I will only be using the time portion as I currently have Delivery Date, Start Time and End Time fields and the start and end time dates will be set based on the delivery date.

I am using version 3.90
4 anni tempo fa
You can create an editor template to achieve this.
Create an editor template named TimeNullable.cshtml inside the editortemplate directory where the other templates are located. Use this code

@model DateTime?
<input id="@Html.IdForModel()" name="@Html.NameForModel()" value="@(Model > DateTime.MinValue || Model.HasValue ? Model.Value.ToShortDateString() : null)" />
<script>
    $(document).ready(function () {
        $("#@Html.IdForModel()").kendoTimePicker({
            dateInput: true
        });
    });
</script>


and decorate your property name with
       [UIHint("TimeNullable")]
        public DateTime? StartTime{ get; set; }

This should be it. I have not tried it in 3.9 but it should be similar to this
4 anni tempo fa
Thank you Sanju, that has worked for me. For reference, here is the code I used for v3.90:

Editor Template
@model DateTime

<input id="@ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)" name="@ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)" value="@((Model > DateTime.MinValue ? Model : DateTime.Today).ToString("HH:mm"))" />
<script>
    $(document).ready(function () {
        $("#@ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)").kendoTimePicker({
            popup: {
                position: "bottom right",
                origin: "top right"
            }
        });
    });
</script>


Property Name
[UIHint("Time")]
public DateTime StartTimeUtc { get; set; }
3 anni tempo fa
I am using 4.30 version and I given a product attribute with the name of delivery date with date picker but in this date picker customer can select past date because it is drop down now I want customer or buyer can only chose a future date for delivery show, is there any date and time picker plugins so I can applied here I am using no source code version.
1 anno tempo fa
Template : EditorTemplates=>TimeNullable

//to show only time on datetimepicker

[UIHint("../../../Plugins/DiscountRules.DiscountBetweenTimeOfDay/Views/EditorTemplates/TimeNullable")]
        public DateTime StartTime { get; set; }


Model.Value.ToString("hh:mm tt") : null)



@model DateTime?
<input id="@Html.IdForModel()" name="@Html.NameForModel()" value="@(Model > DateTime.MinValue || Model.HasValue ? Model.Value.ToString("hh:mm tt") : null)" />
<script>
    $(document).ready(function () {
        $("#@Html.IdForModel()").kendoTimePicker({
            dateInput: true,
        });
    });
</script>
This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.