How to implement jquery datepicker in orchard ?

Topics: General, Troubleshooting, Writing modules
Aug 15, 2013 at 7:24 AM
Edited Aug 15, 2013 at 7:25 AM
I try to look for proper way to implement jquery datepicker in orchard from the forum , but unfortunately i can't find it or maybe i search for the wrong key words.

i have the following

View model
namespace NGame.ViewModels
{
    public class DrawDateViewModel
    {
        [Required]
        [DataType(DataType.DateTime)]
        [DisplayFormat(DataFormatString = "{0:MM-dd-yyyy}", ApplyFormatInEditMode = true)]
        public DateTime GameDate { get; set; }
       
        [Required]
        public bool  IsSpecial { get; set; }
        [Required]
        public bool IsActive { get; set; }
       
    }
}
View
@model NGame.ViewModels.DrawDateViewModel
@{     
    Script.Require("ShapesBase");
    Style.Require("jQueryUI_DatePicker").AtHead();
    Script.Require("jQueryUI_DatePicker").AtFoot();
    Layout.Title = T("Add Draw Date").ToString();
}
@using (Html.BeginFormAntiForgeryPost())
{ 
    @Html.ValidationSummary()
    <fieldset>
        <div class="editor-label">@Html.LabelFor(x => x.GameDate)</div>
        <div class="editor-field">
        
            @Html.EditorFor(x => x.GameDate)
            @Html.ValidationMessageFor(x => x.GameDate)
        </div>
        <div class="editor-label">@Html.LabelFor(x => x.IsSpecial)</div>
        <div class="editor-field">
            @Html.CheckBoxFor(x => x.IsSpecial)
            @Html.ValidationMessageFor(x => x.IsSpecial)
        </div>
        <div class="editor-label">@Html.LabelFor(x => x.IsActive)</div>
        <div class="editor-field">
            @Html.CheckBoxFor(x => x.IsActive)
            @Html.ValidationMessageFor(x => x.IsActive)
        </div>
    </fieldset>
    <fieldset>
        <button class="primaryAction" type="submit">@T("Save")</button>
    </fieldset>
}
The gamedate is the datetime attribute, and i include the
    Style.Require("jQueryUI_DatePicker").AtHead();
    Script.Require("jQueryUI_DatePicker").AtFoot();
in my view.
but the datepicker not pop out in the gamedate textbox.
any expect on the jquery datepicker ? pls help .
thanks
Aug 15, 2013 at 9:27 AM
Edited Aug 15, 2013 at 9:44 AM
see datetime field as ex
Aug 15, 2013 at 11:01 AM
as ex ?
Yup just find a solution of it .

add

View
@model NGame.ViewModels.DrawDateViewModel
@{     
    Script.Require("ShapesBase");
    Style.Require("jQueryUI_DatePicker").AtHead();
    Script.Require("jQueryUI_DatePicker").AtFoot();
    Layout.Title = T("Add Draw Date").ToString();
}
@using (Html.BeginFormAntiForgeryPost())
{ 
    @Html.ValidationSummary()
    <fieldset>
        <div class="editor-label">@Html.LabelFor(x => x.GameDate)</div>
        <div class="editor-field">
        
            @Html.EditorFor(x => x.GameDate)
            @Html.ValidationMessageFor(x => x.GameDate)
        </div>
        <div class="editor-label">@Html.LabelFor(x => x.IsSpecial)</div>
        <div class="editor-field">
            @Html.CheckBoxFor(x => x.IsSpecial)
            @Html.ValidationMessageFor(x => x.IsSpecial)
        </div>
        <div class="editor-label">@Html.LabelFor(x => x.IsActive)</div>
        <div class="editor-field">
            @Html.CheckBoxFor(x => x.IsActive)
            @Html.ValidationMessageFor(x => x.IsActive)
        </div>
    </fieldset>
    <fieldset>
        <button class="primaryAction" type="submit">@T("Save")</button>
    </fieldset>
}
__@using (Script.Foot()) {
     <script type="text/javascript">

         $("#GameDate").datepicker();

     </script>
 }__
add
@using (Script.Foot()) {
     <script type="text/javascript">

         $("#GameDate").datepicker();

     </script>
 }
at the bottom will do .

thanks