रेजर इंजन का उपयोग करके एमवीसी 5 प्रोजेक्ट पर डेट पिकर बूटस्ट्रैप 3 कैसे जोड़ें?

Question 1

रेजर इंजन का उपयोग करके MVC 5 प्रोजेक्ट पर दिनांक पिकर बूटस्ट्रैप 3 स्थापित करने के तरीके के बारे में मुझे कुछ गाइड लाइन्स की आवश्यकता है । मुझे यहाँ यह लिंक मिला लेकिन यह VS2013 में काम नहीं कर सका।

ऊपर दिए गए लिंक में उदाहरण से नकल करना मैं पहले ही कर चुका हूं:

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/bootstrap-datepicker.js",    // ** NEW for Bootstrap Datepicker
                  "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/bootstrap-datepicker.css",  // ** NEW for Bootstrap Datepicker
                  "~/Content/site.css"));

फिर मैंने स्क्रिप्ट को अनुक्रमणिका दृश्य में अनुसरण के रूप में जोड़ा है

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")

<script type="text/javascript">
    $('.datepicker').datepicker(); //Initialise any date pickers
</script>
}

अब, तारीख लेने वाले को यहाँ कैसे कॉल करें?

   <div class="form-group input-group-sm">
    @Html.LabelFor(model => model.DropOffDate)
    @Html.TextBoxFor(model => model.DropOffDate, new { @class = "form-control", placeholder = "Enter Drop-off date here..." })
    @Html.ValidationMessageFor(model => model.DropOffDate)
</div>

Question 2

यह उत्तर jQuery UI Datepicker का उपयोग करता है , जो एक अलग शामिल है। JQuery UI को शामिल किए बिना ऐसा करने के अन्य तरीके हैं।

सबसे पहले, आपको बस datepickerइसके अलावा क्लास को टेक्स्टबॉक्स में जोड़ना होगा form-control:

<div class="form-group input-group-sm">
    @Html.LabelFor(model => model.DropOffDate)
    @Html.TextBoxFor(model => model.DropOffDate, new { @class = "form-control datepicker", placeholder = "Enter Drop-off date here..." })
    @Html.ValidationMessageFor(model => model.DropOffDate)
</div>

फिर, यह सुनिश्चित करने के लिए कि टेक्स्टबॉक्स के प्रस्तुत होने के बाद जावास्क्रिप्ट को ट्रिगर किया गया है, आपको jp तैयार फ़ंक्शन में डेटपिकर कॉल डालना होगा:

<script type="text/javascript">
    $(function () { // will trigger when the document is ready
       $('.datepicker').datepicker(); //Initialise any date pickers
    });
</script>

Question 3

यह उत्तर केवल HTML तत्व पर type=dateविशेषता को लागू inputकरता है और एक तिथि पिकर की आपूर्ति करने के लिए ब्राउज़र पर निर्भर करता है। ध्यान दें कि 2017 में भी, सभी ब्राउज़र अपनी स्वयं की दिनांक पिकर प्रदान नहीं करते हैं, इसलिए आप फ़ॉल बैक प्रदान करना चाह सकते हैं।

आपको बस इतना करना है कि व्यू मॉडल में प्रॉपर्टी के लिए विशेषता जोड़ें। चर के लिए उदाहरण Ldate:

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
Public DateTime Ldate {get;set;}

मान लें कि आप MVC 5 और विज़ुअल स्टूडियो 2013 का उपयोग कर रहे हैं।

Question 4

अपने मॉडल में डेटाटाइम प्रॉपर्टी से पहले इन दो लाइनों को जोड़ें

[DataType(DataType.Date)] 
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]

और परिणाम होगा: एमवीसी एप्लीकेशन में डेट पिकर

Question 5

मुझे उम्मीद है कि यह मेरी समस्या का सामना करने वाले किसी व्यक्ति की मदद कर सकता है।

यह उत्तर बूटस्ट्रैप DatePicker प्लगइन का उपयोग करता है , जो बूटस्ट्रैप का मूल निवासी नहीं है।

सुनिश्चित करें कि आप NuGet के माध्यम से बूटस्ट्रैप DatePicker स्थापित करें

जावास्क्रिप्ट का एक छोटा सा टुकड़ा बनाएँ और इसे DatePickerReady.js नाम दें इसे लिपियों में सेव करें। यह सुनिश्चित करेगा कि यह गैर एचटीएमएल 5 ब्राउज़रों में भी काम करता है, हालांकि आजकल वे बहुत कम हैं।

if (!Modernizr.inputtypes.date) {
    $(function () {

       $(".datecontrol").datepicker();

    });
}

बंडल सेट करें

bundles.Add(New ScriptBundle("~/bundles/bootstrap").Include(
              "~/Scripts/bootstrap.js",
              "~/Scripts/bootstrap-datepicker.js",
              "~/Scripts/DatePickerReady.js",
              "~/Scripts/respond.js"))

bundles.Add(New StyleBundle("~/Content/css").Include(
              "~/Content/bootstrap.css",
              "~/Content/bootstrap-datepicker3.css",
              "~/Content/site.css"))

अब Datatype सेट करें ताकि जब EditorFor का उपयोग किया जाए तो MVC की पहचान हो जाएगी कि क्या उपयोग किया जाना है।

<Required>
<DataType(DataType.Date)>
Public Property DOB As DateTime? = Nothing

आपका व्यू कोड होना चाहिए

@Html.EditorFor(Function(model) model.DOB, New With {.htmlAttributes = New With {.class = "form-control datecontrol", .PlaceHolder = "Enter Date of Birth"}})

और वोइला

यहाँ छवि विवरण दर्ज करें

Question 6

एनज़रो के उत्तर के आधार पर एक संक्षिप्त अद्यतन प्रदान करने का प्रयास किया जा रहा है ।

Bootstrap.Datepicker पैकेज स्थापित करें ।

PM> install-package Bootstrap.Datepicker
...
Successfully installed 'Bootstrap.Datepicker 1.7.1' to ...

में AppStart / BundleConfig.cs , बंडलों में संबंधित स्क्रिप्ट और शैलियों जोड़ें।

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
      //...,
      "~/Scripts/bootstrap-datepicker.js",
      "~/Scripts/locales/bootstrap-datepicker.YOUR-LOCALE-CODE-HERE.min.js"));

bundles.Add(new StyleBundle("~/Content/css").Include(
      ...,
      "~/Content/bootstrap-datepicker3.css"));

संबंधित दृश्य में, स्क्रिप्ट्स सेक्शन में, डेटपिकर को सक्षम और अनुकूलित करें।

@section scripts{
    <script type="text/javascript">
        //...
        $('.datepicker').datepicker({
            format: 'dd/mm/yyyy', //choose the date format you prefer
            language: "YOUR-LOCALE-CODE-HERE",
            orientation: 'left bottom'
        });
    </script>

अंत में संबंधित नियंत्रण में डेटापिक क्लास जोड़ें । उदाहरण के लिए, टेक्स्टबॉक्स में और दिनांक प्रारूप में "31/12/2018" की तरह यह होगा:
```
@Html.TextBox("YOUR-STRING-FOR-THE-DATE", "{0:dd/MM/yyyy}", new { @class = "datepicker" })
```

Question 7

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

अपने मॉडल को इस तरह से सजाएं। मैं एक बूटस्ट्रैप दिनांक समय पिकर का उपयोग कर सकता हूं जिसका मैंने यह उपयोग किया है। https://github.com/Eonasdan/bootstrap-datetimepicker/

मुझे लगता है कि आपके पास बूटस्ट्रैप सीएसएस और जेएस के लिए पहले से ही बंडल हैं

आपकी तिथि पिकर बंडल प्रविष्टियां

 bundles.Add(new ScriptBundle("~/bundles/datePicker").Include(
           "~/Scripts/moment.min.js",
           "~/Scripts/bootstrap-datetimepicker.min.js"));

        bundles.Add(new StyleBundle("~/Content/datepicker").Include(
                 "~/Content/bootstrap-datetimepicker.min.css"));

रेंडर आपके लेआउट दृश्य पर बंडल करता है

@Styles.Render("~/Content/datepicker")
@Scripts.Render("~/bundles/datePicker")

देखने में आपका एच.टी.एम.एल.

<div class="form-group">
        @Html.LabelFor(model => model.BirthDate, htmlAttributes: new { @class = "lead col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(model => model.BirthDate, new { @class = "datetimepicker form-control" })
            @Html.ValidationMessageFor(model => model.BirthDate, "", new { @class = "text-danger" })
        </div>
</div>

अपने विचार के अंत में इसे जोड़ें।

<script>
    $(document).ready(function () {
        $('.datetimepicker').datetimepicker({
            format: 'lll'
        });
    });
</script>

Question 8

1. सुनिश्चित करें कि आप पहले jcery.js रेफरी करते हैं। 2. चेक
लेआउट पर, सुनिश्चित करें कि आप "~ / बंडलों / बूटस्ट्रैप" को
कॉल करते हैं। 3. चेक लेआउट, सेक्शन स्क्रिप्स की स्थिति देखें, यह "~ / बंडलों / बूटस्ट्रैप"
4 के बाद होना चाहिए .add क्लास "डेटपिकर" से टेक्स्टबॉक्स
5.put $ ('। डेटपिकर'); डेटपिकर (); $ में (फ़ंक्शन () {...});

Question 9

MVC के लिए चेकआउट शील्ड UI का दिनांक पिकर । एक शक्तिशाली घटक जिसे आप कुछ लाइनों के साथ एकीकृत कर सकते हैं जैसे:

@(Html.ShieldDatePicker()
    .Name("datepicker"))

Question 10

सरल:

[DataType(DataType.Date)]
Public DateTime Ldate {get;set;}