Timepicker for DateTime field

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.
4 năm cách đây
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 năm cách đây
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 năm cách đây
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 năm cách đây
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 năm cách đây
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.