Timepicker for DateTime field

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.
4 years ago
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 years ago
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 years ago
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 years ago
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 year ago
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.