Q:

Retrieve value from datepicker to the application from the cshtml file

I'm new to 'MVC' and have been trying to use a 'Jquery' 'datepicker' to get a date from a user and retrieve it back in the main application, please could give me some guidance on retrieving the date back to the application (controller).  Below is my code:
Search.cshtml
@model Dropdowns.Models.SearchModel

@{ ViewBag.Title = "Search RedSea"; }
<head>
    <title>RedSea holidays</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <!-- Code to wire up your DatePicker -->
    <script type="text/javascript">
        $(function () {
            // This will make every element with the class "date-picker" into a DatePicker element
            $('.date-picker').datepicker(); //Date Picker script
        })
    </script>
    <script type="text/javascript">
    </script>

</head>
<div class="row">
    <div class="col-sm-4 col-sm-offset-4">

        <h1>Search Red-Sea Holidays</h1>

        <div class="panel panel-default">
            <div class="panel-body">
                @using (Html.BeginForm("Search", "Search", FormMethod.Post, new { role = "form" }))
                {

                    @* State selection dropdown *@
                    <div class="form-group">
                        @Html.LabelFor(m => m.Airport)
                        @Html.DropDownListFor(m => m.Airport, 

                        Model.Airports,

                        "- Please select a Airport -",

                        new { @class = "form-control" })
                    </div>
                    @* Destination Dropdown*@

                    <div class="form-group">
                        @Html.LabelFor(m => m.Destination)
                        @Html.DropDownListFor(m => m.Destination,

                     Model.Destinations,
                       "- Please select a Destination -",

                       new {@class = "form-control"})
                    </div>

                    @* Preferred Accomodation Dropdown *@
                    <div class="form-group">
                     @Html.LabelFor(m => m.PreferredAccomodation)
                     @Html.DropDownListFor(m => m.PreferredAccomodation,

                         Model.PreferredAccomodations,
                       "- Please select Preferred Accomodation -",
                       new {@class = "form-control"})
                    </div>

                    <label>Desired Departure Date</label>
                    <input class="date-picker" /> //date picker control

                    <div class="form-group">
                     @Html.LabelFor(m => m.Duration)
                        @Html.DropDownListFor(m => m.Duration,

                       Model.Durations,
                       "- Please select Preferred Number of Rooms-",
                       new { @class = "form-control" })
                    </div>
                    <div class="form-group">
                     @Html.LabelFor(m => m.Room)
                     @Html.DropDownListFor(m => m.Room,

                         Model.Rooms,
                       "- Please select Preferred Number of Rooms-",
                       new { @class = "form-control" })
                    </div>

                    <button type="submit" class="btn btn-primary">Submit</button>                    
                }

            </div>
        </div>
    </div>
</div>

SearchController.cs
using System.Collections.Generic;
using System.Web.Mvc;
using Dropdowns.Models;
using System;

namespace Dropdowns.Controllers
{
    public class SearchController : Controller
    {
        //
        // 1. Action method for displaying 'Sign Up' page
        //
        public ActionResult Search()
        {
            // Let's get all states that we need for a DropDownList
            var Airports = GetAllAirports();
            var Destinations = getAllDestinations();
            var PreferredAccomodations = getAllAccomodations();
            var Durations = getAllDurations();
            var Rooms = getAllRooms();
            var model = new SearchModel();

            // Create a list of SelectListItems so these can be rendered on the page
            model.Airports = GetSelectListItems(Airports);
            model.Destinations = GetSelectListItems(Destinations);
            model.PreferredAccomodations = GetSelectListItems(PreferredAccomodations);
            model.Durations = GetSelectListItems(Durations);
            model.Rooms = GetSelectListItems(Rooms);
            return View(model);
        }

        //
        // 2. Action method for handling user-entered data when 'Sign Up' button is pressed.
        //
        [HttpPost]
        public ActionResult Search(SearchModel model)
        {
            // Get all states again
            var airports = GetAllAirports();
            var Destinations = getAllDestinations();
            var PreferredAccomodations = getAllAccomodations();
            var Durations = getAllDurations();
            var Rooms = getAllRooms();
            // Set these states on the model. We need to do this because
            // only the selected value from the DropDownList is posted back, not the whole
            // list of states
            model.Airports = GetSelectListItems(airports);
            model.Destinations = GetSelectListItems(Destinations);
            model.PreferredAccomodations = GetSelectListItems(PreferredAccomodations);
            model.Durations = GetSelectListItems(Durations);
            model.Rooms = GetSelectListItems(Rooms);
            // In case everything is fine - i.e. both "Name" and "State" are entered/selected,
            // redirect user to the "Done" page, and pass the user object along via Session
            if (ModelState.IsValid)
            {
                Session["SearchModel"] = model;
                return RedirectToAction("Done");
            }

            // Something is not right - so render the registration page again,
            // keeping the data user has entered by supplying the model.
            return View("Search", model);
        }

        //
        // 3. Action method for displaying 'Done' page
        //
        public ActionResult Done()
        {
            // Get Sign Up information from the session
            var model = Session["SearchModel"] as SearchModel;

            // Display Done.html page that shows Name and selected state.
            return View(model);
        }

  //      public DateTime getDatePickerValue()
 //       {
           // var dt = new DateTime(DateTime.Parse($('#FromDateCollected').val()));
           // alert(dt);
        //    return dt; 
  //      }

        // Just return a list of states - in a real-world application this would call
        // into data access layer to retrieve states from a database.
        private IEnumerable<string> GetAllAirports()
        {
            return new List<string>
            {
                "London Gatwick",
                "Manchester",
                "Birmingham",
                "Belfast",
                "Bristol",
                "Cardiff",
                "East Midlands",
                "Edinburgh",
                "Exeter",
                "Glasgow",
                "London Heathrow",
                "London Luton",
                "Newcastle",
                "London Stansted",
            };
        }
        private IEnumerable<string> getAllDestinations()
        {
            return new List<string>
            {
                "Egypt",
                "Sharm El Sheikh",
                "Hurghada",
                "Marsa Alam",
                "Luxor",
                "Tunisia",
                "Djerba",
                "Tunisia (Mainland)",
            };

        }
        private IEnumerable<string> getAllAccomodations()
        {
            return new List<string>
            {        
            "Red Sea Saver: 4 Sun, Sharm el Sheikh",
            "The Grand Hotel, Sharm el Sheikh",    
            "Hilton Sharm Waterfalls Resort",     
            "Xperience St George Homestay",       
            "Sharm Plaza Hotel",       
            "Sharm Resort Hotel",      
            "Ghazala Gardens Hotel",
            "Ghazala Beach Hotel",         
            "Hilton Sharm Dreams Resort",        
            "Hilton Fayrouz Resort",       
            "Mövenpick Resort",        
            "Baron Palms Resort",        
            "Siva Sharm Resort & Spa",         
            "Sierra Sharm el Sheikh Hotel",
            "Melia Sharm Resort &amp; Spa",        
            "Hilton Sharks Bay Resort",         
            "Xperience Sea Breeze Resort",       
            "Cleopatra Luxury Resort",         
            "Rixos Sharm el Sheikh Hotel",          
            "Park Inn Sharm el Sheikh Resort",          
            "Iberotel Il Mercato Hotel",          
            "Royal Albatros Moderna Hotel",         
            "Iberotel Dahabeya",         
            "Le Meridien Dahab Resort",        
            "The Makadi Spa Hotel",         
            "The Makadi Palace Hotel",         
            "The Grand Makadi Hotel",        
            "Sunwing Makadi Hotel",         
            "Fort Arabesque Resort",        
            "Cleopatra Luxury Resort, Makadi Bay",         
            "Siva Grand Beach Hotel",       
            "The Grand Resort, Hurghada",      
            "The Grand Hotel, Hurghada (B&amp;B)",       
            "The Grand Hotel, Hurghada (All Inclusive)",
            "Jungle Aqua Park Hotel",       
            "Red Sea Saver: 4 Sun, Hurghada",          
            "Red Sea Saver: 5 Sun, Makadi Bay",         
            "Movenpick Resort &amp; Spa El Gouna",       
            "Three Corners Rihana Resort",        
            "The Captain’s Inn", 
            "Sheraton Miramar Resort El Gouna",        
            "Mosaique Hotel",      
            "Fanadir Hotel",        
            "The Oberoi Hotel, Sahl Hasheesh",      
            "Tropitel Sahl Hasheesh Resort",     
            "Sheraton Soma Bay Resort",       
            "The Palace Port Ghalib Resort",        
            "Siva Port Ghalib Resort",         
            "Hilton Marsa Alam Nubian Resort",   
            "Fayrouz Plaza Beach Resort",        
            "Maritim Jolie Ville Kings Island Hotel",        
            "Iberotel Luxor Hotel",       
            "Sonesta St George Hotel",
           };
        }
        private IEnumerable<string> getAllDurations()
        {
            return new List<string>
            {
                    "7 nights",
                    "9 nights",
                    "10 nights",
                    "11 nights",
                    "12 nights",
                    "14 nights",
            };
        }
        private IEnumerable<string> getAllRooms()
        {
            return new List<string>
            {
                "1",
                "2",
                "3",
            };                
        }

        // This is one of the most important parts in the whole example.
        // This function takes a list of strings and returns a list of SelectListItem objects.
        // These objects are going to be used later in the SignUp.html template to render the
        // DropDownList.
        private IEnumerable<SelectListItem> GetSelectListItems(IEnumerable<string> elements)
        {
            // Create an empty list to hold result of the operation
            var selectList = new List<SelectListItem>();

            // For each string in the 'elements' variable, create a new SelectListItem object
            // that has both its Value and Text properties set to a particular value.
            // This will result in MVC rendering each item as:
            //     <option value="State Name">State Name</option>
            foreach (var element in elements)
            {
                selectList.Add(new SelectListItem
                {
                    Value = element,
                    Text = element
                });
            }

            return selectList;
        }

}

    }

SearchModel.cs
using System.Collections.Generic;
using System.Web.Mvc;
using System.ComponentModel.DataAnnotations;
using System;

namespace Dropdowns.Models
{
    public class SearchModel
    {

        // This property will hold a state, selected by user
        [Required]
        [Display(Name = "Airport")]
        public string Airport { get; set; }

        // This property will hold all available states for selection
        public IEnumerable<SelectListItem> Airports { get; set; }

        [Required]
        [Display(Name = "Destination")]
        public string Destination { get; set; }

        public IEnumerable<SelectListItem> Destinations { get; set; }

        [Display(Name = "OutboundDate")]
        public DateTime OutboundDate {get; set;}

        [Required]
        [Display(Name = "PreferredAccomodation")]
        public string PreferredAccomodation { get; set; }

        public IEnumerable<SelectListItem> PreferredAccomodations { get; set; }

        [Required]
        [Display(Name = "Duration")]
        public string Duration { get; set; }

        public IEnumerable<SelectListItem> Durations { get; set; }

        [DataType(DataType.Date)]
        public DateTime DepatureDate { get; set; }

        [Required]
        [Display(Name = "Rooms")]
        public string Room { get; set; }

        public IEnumerable<SelectListItem> Rooms {get; set;}
    }
}

A:

You need to associate name-value pair with your input elements like this
  <input class="date-picker" name="departureDate" />

And you will select the value.
In your controller's action method, you need a input parameter with name exactly same as the name of the datapicker input element, in this case it needs to be "departureDate"

