Home » Jquery » jquery – How do I get the values from Semantic UI datetime picker in MVC razor view?-Exceptionshub

jquery – How do I get the values from Semantic UI datetime picker in MVC razor view?-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

I’m new to Semantic UI and trying to use it in a new project where I have a model with a Datetime value. I finally got the calendar to display but don’t understand how to get the values (date and time) from what the user picks. Is there a way to get these values to populate the values in my form?

In my CSHTML, this is how my code is currently written. I would like to populate the StartTime and EndTime values with the datetime picker.

 @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.Hidden("TutorID", (object)ViewBag.CurrentTutorID)

        <div class="ui attached message schedule">
            <div class="header">
                Welcome to tutor scheduling!
            </div>
            <p>Fill out the form below to add a new schedule</p>
        </div>
        <form>
            <div class="three fields">
                <div class="field">
                    <h4>Description</h4>
                    @Html.TextBoxFor(model => model.Description, new { placeholder = "Your Name - Event", @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
                </div>
                <div class="field">
                    <h4>Start</h4>
                    @Html.EditorFor(model => model.StartTime, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.StartTime, "", new { @class = "text-danger" })
                </div>
                <div class="field">
                    <h4>End</h4>
                    @Html.EditorFor(model => model.EndTime, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.EndTime, "", new { @class = "text-danger" })
                </div>
            </div>
            <button class="fluid ui button schedule"><b>Submit New Schedule</b></button>
        </form>
}

The same file:

<input type="text" id="demo" />

@section scripts
{
    <link href="~/Content/jquery.datetimepicker.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="~/Scripts/jquery.datetimepicker.js"></script>
    <script src="~/Scripts/main.js"></script>
}

Then in main.js I have the following:

$('#demo').datetimepicker({
    inline: true,
});

I finally got the datetime picker to display but am lost on where to go from there.
This where the documentation that I used for what I have so far: https://www.jqueryscript.net/time-clock/Clean-jQuery-Date-Time-Picker-Plugin-datetimepicker.html

How to&Answer: