locked
Date Picker - no Time with Date RRS feed

  • Question

  • User2074931137 posted

    Having hard time getting date picker to work through jquery and for time to display without time.

    Question Illustrated in PDF

    @model fvm.Models.CalendarDate
    
    @{
        ViewBag.Title = "Create";
    }
    
    <h2>Create</h2>
    
    
    @using (Html.BeginForm()) 
    {
        @Html.AntiForgeryToken()
        
        <div class="form-horizontal">
            <h4>CalendarDate</h4>
            <hr />
            @Html.ValidationSummary(true)
    
            <div class="form-group">
                @Html.LabelFor(model => model.CalendarDateDayOfWeek, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.CalendarDateDayOfWeek)
                    @Html.ValidationMessageFor(model => model.CalendarDateDayOfWeek)
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.CalendarDate1, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.CalendarDate1)
                    @Html.ValidationMessageFor(model => model.CalendarDate1)
                </div>
            </div>
    
            <div class="form-group">                                                  <- *
                <div class="form-group ">
                    @Html.LabelFor(model => model.CalendarDate1)
                    @Html.TextBoxFor(model => model.CalendarDate1, new { @class = "date-picker", placeholder = "Enter Drop-off date here..." })
                    @Html.ValidationMessageFor(model => model.CalendarDate1)
                </div>
            </div>
    
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="submit" value="Create" class="btn btn-default" />
                    </div>
                </div>
            </div>
    }
    
    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>
    
    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
        @Styles.Render("~/Content/cssjqryUi")
        <script type="text/javascript">
            $(function () {
                $('#CalendarDate_CalendarDate1').datepicker();
            })
        </script>
    }

    using System.Web;
    using System.Web.Optimization;
    
    namespace fvm
    {
        public class BundleConfig
        {
            // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
            public static void RegisterBundles(BundleCollection bundles)
            {
                bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                            "~/Scripts/jquery-{version}.js"));
    
                bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                            "~/Scripts/jquery.validate*"));
    
                // _______________________
    
                bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(                 <- *
            "~/Scripts/jquery-ui-{version}.js"));
                //css  
                bundles.Add(new StyleBundle("~/Content/cssjqryUi").Include(
                        "~/Content/themes/base/jquery-ui.css"));
    
                // _______________________
    
                // Use the development version of Modernizr to develop with and learn from. Then, when you're
                // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
                bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                            "~/Scripts/modernizr-*"));
    
                bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                          "~/Scripts/bootstrap.js",
                          "~/Scripts/respond.js"));
    
                bundles.Add(new StyleBundle("~/Content/css").Include(
                          "~/Content/bootstrap.css",
                          "~/Content/site.css"));
            }
        }
    }
    

    Tuesday, January 22, 2019 8:19 PM

Answers

  • User1520731567 posted

    Hi 3v3rhart,

    3v3rhart

    @Html.TextBoxFor(model => model.CalendarDate1, new { @class = "date-picker", placeholder = "Enter Drop-off date here..." })

    3v3rhart

     $('#CalendarDate_CalendarDate1').datepicker();

    It seems that your JQ selector is worng and I suggest you could add some libraries in the view,

    For example:

     <div class="form-group">                                              
                <div class="form-group ">
                    @Html.LabelFor(model => model.CalendarDate1)
                    @Html.TextBoxFor(model => model.CalendarDate1, new { @class = "CalendarDate_CalendarDate1 date-picker", placeholder = "Enter Drop-off date here..." })
                    @Html.ValidationMessageFor(model => model.CalendarDate1)
                </div>
            </div>
    
    
    @section scripts{
    
        <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    
        <script>

    $(".CalendarDate_CalendarDate1").datepicker({ dateFormat: 'dd/mm/yy' })

    </script>
    }

    And then If you have other requirements, you can refer to the link from @mgebhard.

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 23, 2019 7:45 AM

All replies

  • User1520731567 posted

    Hi 3v3rhart,

    3v3rhart

    @Html.TextBoxFor(model => model.CalendarDate1, new { @class = "date-picker", placeholder = "Enter Drop-off date here..." })

    3v3rhart

     $('#CalendarDate_CalendarDate1').datepicker();

    It seems that your JQ selector is worng and I suggest you could add some libraries in the view,

    For example:

     <div class="form-group">                                              
                <div class="form-group ">
                    @Html.LabelFor(model => model.CalendarDate1)
                    @Html.TextBoxFor(model => model.CalendarDate1, new { @class = "CalendarDate_CalendarDate1 date-picker", placeholder = "Enter Drop-off date here..." })
                    @Html.ValidationMessageFor(model => model.CalendarDate1)
                </div>
            </div>
    
    
    @section scripts{
    
        <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    
        <script>

    $(".CalendarDate_CalendarDate1").datepicker({ dateFormat: 'dd/mm/yy' })

    </script>
    }

    And then If you have other requirements, you can refer to the link from @mgebhard.

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 23, 2019 7:45 AM
  • User2074931137 posted

    Thank you Yuki Tao - that got me closer to the solution.  The question continues at the following link:

    Thursday, January 24, 2019 10:29 PM