locked
Pull Down Menu v Date Picker interface / Date format in pull down menu RRS feed

Answers

  • User1520731567 posted

    Hi 3v3rhart,

    According to your models,it is one to many entity,please try my above method.

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 28, 2019 10:12 AM

All replies

  • User2074931137 posted

    Link to question illustrated in PDF

    The pull down menu works to set a value in the Calendar.CalendarDate1 property in the Schedule Create view.  The date picker in the Schedule Create view does not save the value (whereas it is saved successfully through the pull down menu).

    1. Can I even use the date picker in a joined field...does the pull down menu provide a link to the joined table that the date picker doesn't?

    2. If the answer is that I need to use the pull down menu in order for the tables to be successfully joined, how do get the date to appear without the 1200AM time appended?

    @model fvm.Models.Schedule
    
    @{
        ViewBag.Title = "Create";
    }
    
    <h2>Create</h2>
    
    
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
    
        <div class="form-horizontal">
            <h4>Schedule</h4>
            <hr />
            @Html.ValidationSummary(true)
    
            <div class="form-group">
                @Html.LabelFor(model => model.CalendarDateID, "CalendarDateID", new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("CalendarDateID", String.Empty)
                    @Html.ValidationMessageFor(model => model.CalendarDateID)
                </div>
            </div>
    
            <div class="form-group">
                <div class="form-group ">
                    @Html.LabelFor(model => model.CalendarDate.CalendarDate1)
                    @Html.TextBoxFor(model => model.CalendarDate.CalendarDate1, new { @class = "CalendarDate_CalendarDate1 date-picker", placeholder = "Enter Drop-off date here..." })
                    @Html.ValidationMessageFor(model => model.CalendarDate.CalendarDate1)
                </div>
            </div>
    
            @*<div class="form-group">
                    @Html.LabelFor(model => model.ScheduleDateString, "ScheduleDateString", new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.DropDownList("CalendarDateID", String.Empty)
                        @Html.ValidationMessageFor(model => model.ScheduleDateString)
                    </div>
                </div>*@
    
            <div class="form-group">
                @Html.LabelFor(model => model.CalendarID, "CalendarID", new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("CalendarID", String.Empty)
                    @Html.ValidationMessageFor(model => model.CalendarID)
                </div>
            </div>
    
            @*<div class="form-group">
                <div class="form-group ">
                    @Html.LabelFor(model => model.CalendarDate.CalendarDate1)
                    @Html.TextBoxFor(model => model.CalendarDate.CalendarDate1, new { @class = "date-picker", placeholder = "Enter Drop-off date here..." })
                    @Html.ValidationMessageFor(model => model.CalendarDate.CalendarDate1)
                </div>
            </div>*@
    
            <div class="form-group">
                @Html.LabelFor(model => model.ContactID, "ContactID", new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("ContactID", String.Empty)
                    @Html.ValidationMessageFor(model => model.ContactID)
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.ResourceID, "ResourceID", new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("ResourceID", String.Empty)
                    @Html.ValidationMessageFor(model => model.ResourceID)
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.RouteID, "RouteID", new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("RouteID", String.Empty)
                    @Html.ValidationMessageFor(model => model.RouteID)
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.CharterID, "CharterID", new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("CharterID", String.Empty)
                    @Html.ValidationMessageFor(model => model.CharterID)
                </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{
    
        <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>
    }
    
    @*___________________________________
    
        @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
        @Styles.Render("~/Content/cssjqryUi")
        <script type="text/javascript">
            $(function () {
                $('#CalendarDate_CalendarDate1').datepicker();
            })
        </script>
    }
    ______________________________________    *@
    
    @*@section Scripts {
            @Scripts.Render("~/bundles/jqueryval")
        }*@
    
    

            // POST: /Schedule/Create
            // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
            // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
            [HttpPost]
            [ValidateAntiForgeryToken]
            public ActionResult Create([Bind(Include = "ScheduleID,CalendarDateID,CalendarID,ContactID,ResourceID,RouteID,CharterID")] Schedule schedule)
            {
                if (ModelState.IsValid)
                {
                    db.Schedules.Add(schedule);
                    db.SaveChanges();
                    return RedirectToAction("Index");
                }
    
                ViewBag.CalendarID = new SelectList(db.Calendars, "CalendarID", "CalendarDateString", schedule.CalendarID);
                ViewBag.CalendarDateID = new SelectList(db.CalendarDates, "CalendarDateID", "CalendarDate1", schedule.CalendarDateID);
                ViewBag.CharterID = new SelectList(db.Charters, "CharterID", "CharterDesignatorString", schedule.CharterID);
                ViewBag.ContactID = new SelectList(db.Contacts, "ContactID", "ContactDesignator1String", schedule.ContactID);
                ViewBag.ResourceID = new SelectList(db.Resources, "ResourceID", "ResourceDesignatorString", schedule.ResourceID);
                ViewBag.RouteID = new SelectList(db.Routes, "RouteID", "RouteDesignatorString", schedule.RouteID);
                return View(schedule);
            }
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    //
    using System.ComponentModel.DataAnnotations;          // Date Format
    using System.ComponentModel.DataAnnotations.Schema;   // Column
    
    namespace fvm.Models
    {
        public class Schedule
        {
            public int ScheduleID { get; set; }
    
            public int? CalendarDateID { get; set; }
            public int? CalendarID { get; set; }
            public int? ContactID { get; set; }
            public int? ResourceID { get; set; }
            public int? RouteID { get; set; }
            public int? CharterID { get; set; }
    
            public virtual CalendarDate CalendarDate { get; set; }
            public virtual Calendar Calendar { get; set; }
            public virtual Contact Contact { get; set; }
            public virtual Resource Resource { get; set; }
            public virtual Route Route { get; set; }
            public virtual Charter Charter { get; set; }
        }
    }

    Thursday, January 24, 2019 10:24 PM
  • User1520731567 posted

    Hi 3v3rhart,

    According to your descriptions, I find there are something wrong in your model.

    3v3rhart

    @Html.LabelFor(model => model.CalendarDate.CalendarDate1)

    You have no field to store date from date picker.

    namespace fvm.Models
    {
        public class Schedule
        {
            public int ScheduleID { get; set; }
    
            public int? CalendarDateID { get; set; }//match model.CalendarDateID
            public int? CalendarID { get; set; }
            public int? ContactID { get; set; }
            public int? ResourceID { get; set; }
            public int? RouteID { get; set; }
            public int? CharterID { get; set; }

    public int CalendarDate1{ get; set; } //set a Foreign Key to save the data from date picker //match model.CalendarDate.CalendarDate1
    [ForeignKey("CalendarDate1")]//if the primary key in CalendarDate model is named CalendarDateId public virtual CalendarDate CalendarDate { get; set; } public virtual Calendar Calendar { get; set; } public virtual Contact Contact { get; set; } public virtual Resource Resource { get; set; } public virtual Route Route { get; set; } public virtual Charter Charter { get; set; } } }

    And as I can see in your model,it is one to many entity not many to many ,if you would like to many to many,please refer to:

    http://www.entityframeworktutorial.net/code-first/configure-many-to-many-relationship-in-code-first.aspx

    If you have other questions,please post more detaisl,such as: CalendarDate  model...

    Best Regards.

    Yuki Tao

    Friday, January 25, 2019 6:54 AM
  • User2074931137 posted

    Thank you so much Yuki Tao. 

    I include the CalendarDate model below...

    I'll wait to make changes until I hear from you in case the model below changes your advice.

    Thanks again.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    //
    using System.ComponentModel.DataAnnotations;          // Date Format
    using System.ComponentModel.DataAnnotations.Schema;   // Column
    
    namespace fvm.Models
    {
        public class CalendarDate
        {
            public int CalendarDateID { get; set; }                                             <-
    
            [DataType(DataType.Date)]                                                           <-
            [Column(TypeName = "DateTime2")]
            [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
            [Display(Name = "Date")]
            public DateTime CalendarDate1 { get; set; }
    
            [DataType(DataType.Date)]
            [Column(TypeName = "DateTime2")]
            [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
            [Display(Name = "Date")]
            public DateTime CalendarDate2 { get; set; }
    
            [DataType(DataType.Time)]
            [Column(TypeName = "DateTime2")]
            [DisplayFormat(DataFormatString = "{0:HH:mm}", ApplyFormatInEditMode = true)]
            public DateTime? CalendarDateTime{ get; set; }
    
            public string ScheduleDateString { get; set; }
    
            [Display(Name = "Day of Week")]
            public string ScheduleDateDayOfWeek { get; set; }
    
            [Display(Name = "Day of Week")]
            public string CalendarDateDayOfWeek { get; set; }
    
            [Display(Name = "Shift")]
            public string CalendarDateAMPM { get; set; }
    
            public string CalendarDateString2 { get; set; }
    
            //public virtual ICollection<Assignment> Assignments { get; set; }
            public virtual ICollection<Schedule> Schedules { get; set; }
        }
    }

    Friday, January 25, 2019 11:46 AM
  • User1520731567 posted

    Hi 3v3rhart,

    According to your models,it is one to many entity,please try my above method.

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 28, 2019 10:12 AM
  • User2074931137 posted

    I'm getting the following error:

    Error Number:547,State:0,Class:16
    The ALTER TABLE statement conflicted with the FOREIGN KEY constraint "FK_dbo.Schedule_dbo.CalendarDate_CalendarDate1". The conflict occurred in database "fvm", table "dbo.CalendarDate", column 'CalendarDateID'.

    Confused:
    I thought that the CalendarDateID column was the foreign key - not the CalendarDate1 column.

    Monday, January 28, 2019 12:58 PM
  • User2074931137 posted

    Thank you Yuki -

    Please forgive me but I'm concerned about changing the CalendarDate key from CalendarDateID to the CalendarDate1 column.  Everything I've made so far uses the PropertySetNameID format for key.  Is there anyway to use a the separate ID column, rather than make CalendarDate1 the key?

    Tuesday, January 29, 2019 7:25 PM
  • User1520731567 posted

    Hi 3v3rhart,

    Sorry,it's my mistake.

    As your said,you could set PropertySetNameID format,I suggest you change my previous method:

      public class Schedule
        {
            public int ScheduleID { get; set; }
    
            public int? CalendarDateID { get; set; }//match model.CalendarDateID
            public int? CalendarID { get; set; }
            public int? ContactID { get; set; }
            public int? ResourceID { get; set; }
            public int? RouteID { get; set; }
            public int? CharterID { get; set; }
    
    
            public int CalendarDate1{ get; set; } //set a Foreign Key to save the data from date picker //match model.CalendarDate.CalendarDate1
            [ForeignKey("CalendarDate1")]//if the primary key in CalendarDate  model is named CalendarDateId
            public virtual CalendarDate CalendarDate { get; set; }
            public virtual Calendar Calendar { get; set; }
            public virtual Contact Contact { get; set; }
            public virtual Resource Resource { get; set; }
            public virtual Route Route { get; set; }
            public virtual Charter Charter { get; set; }
        }

    to:

      public class Schedule
        {
            public int ScheduleID { get; set; }
    
            public int? CalendarDateID { get; set; }//match model.CalendarDateID
            public int? CalendarID { get; set; }
            public int? ContactID { get; set; }
            public int? ResourceID { get; set; }
            public int? RouteID { get; set; }
            public int? CharterID { get; set; }
    
    
            //public int CalendarDate1{ get; set; } //set a Foreign Key to save the data from date picker //match model.CalendarDate.CalendarDate1
            [ForeignKey("CalendarDateID")]
            public virtual CalendarDate CalendarDate { get; set; }
            public virtual Calendar Calendar { get; set; }
            public virtual Contact Contact { get; set; }
            public virtual Resource Resource { get; set; }
            public virtual Route Route { get; set; }
            public virtual Charter Charter { get; set; }
        }

    Check that there is not existing data in the database that is conflicting with the FK constraint causing the creation to fail.

    It's best to delete existing data when you add-migration and updata-database.

    If you add successfully, the data of datepicker will saved in CalendarDate table.And Schedule will also has related record.

    Best Regards.

    Yuki Tao

    Thursday, January 31, 2019 5:07 AM