Jak dodać Date Picker Bootstrap 3 w projekcie MVC 5 przy użyciu silnika Razor?

Potrzebuję wskazówek, jak zainstalować Date Picker Bootstrap 3 w projekcie MVC 5 przy użyciu silnika Razor. Znalazłem ten link tutaj, ale nie mogłem go uruchomić w VS2013.

Kopiując z przykładu w późniejszym linku powyżej, wykonałem już następujące czynności:

            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"));

Następnie dodałem skrypt do widoku indeksu w następujący sposób

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

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

Jak teraz zadzwonić do selektora dat?

   <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>

Ta odpowiedź wykorzystuje jQuery UI Datepicker , który jest osobnym włączaniem. Są na to inne sposoby bez dołączania interfejsu użytkownika jQuery.

Najpierw musisz po prostu dodać datepickerklasę do pola tekstowego, a także 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>

Następnie, aby upewnić się, że javascript jest uruchamiany po wyrenderowaniu pola tekstowego, musisz umieścić wywołanie datepicker w funkcji gotowej do jQuery:

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

Ta odpowiedź po prostu stosuje type=dateatrybut do inputelementu HTML i polega na tym, że przeglądarka dostarcza selektor dat. Zwróć uwagę, że nawet w 2017 roku nie wszystkie przeglądarki udostępniają swój własny selektor dat, więc możesz chcieć wprowadzić rezerwę.

Wszystko, co musisz zrobić, to dodać atrybuty do właściwości w modelu widoku. Przykład zmiennej Ldate:

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

Zakładając, że używasz MVC 5 i Visual Studio 2013.

Dodaj tylko te dwa wiersze przed właściwością datetime w modelu

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

a wynikiem będzie:

Mam nadzieję, że pomoże to komuś, kto miał ten sam problem.

Ta odpowiedź wykorzystuje wtyczkę Bootstrap DatePicker , która nie jest natywna dla ładowania początkowego.

Upewnij się, że instalujesz Bootstrap DatePicker za pośrednictwem NuGet

Utwórz mały kawałek JavaScript i nazwij go DatePickerReady.js zapisz go w katalogu Scripts dir. Dzięki temu będzie działać nawet w przeglądarkach innych niż HTML5, chociaż obecnie jest ich niewiele.

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

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

    });
}

Ustaw pakiety

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"))

Teraz ustaw typ danych, aby w przypadku użycia EditorFor MVC zidentyfikował, co ma być używane.

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

Twój kod widoku powinien być

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

i voila

Próba dostarczenia zwięzłej aktualizacji w oparciu o odpowiedź Enzero .

• Zainstaluj pakiet Bootstrap.Datepicker .

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

• W AppStart / BundleConfig.cs dodaj powiązane skrypty i style w pakietach.

  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"));
  

• W odpowiednim widoku, w sekcji skryptów, włącz i dostosuj datepicker.

  @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>
  

• Ostatecznie dodaj klasę Datepicker w pokrewnej kontrolce. Na przykład w TextBox i dla formatu daty podobnego do „31/12/2018” będzie to:

  @Html.TextBox("YOUR-STRING-FOR-THE-DATE", "{0:dd/MM/yyyy}", new { @class = "datepicker" })
  

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

udekoruj swój model w ten sposób. mogę użyć selektora daty i czasu ładowania początkowego. Użyłem tego. https://github.com/Eonasdan/bootstrap-datetimepicker/

Przypuszczam, że masz już pakiety dla bootstrap css i js

Twoje wpisy w paczce selektora dat

 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"));

Renderuj pakiety w widoku układu

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

Twój HTML na widoku

<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>

Na końcu swojego widoku dodaj to.

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

1. upewnij się, że na początku odnosisz się do jquery.js 2. sprawdź
układ, upewnij się, że wywołujesz "~ / bundles / bootstrap"
3. sprawdź układ, zobacz sekcję renderowania Pozycja skryptów, musi znajdować się po "~ / bundles / bootstrap"
4 .dodaj klasę "datepicker" do
pola tekstowego 5.put $ ('. datepicker'). datepicker (); w $ (funkcja () {...});

Selektor dat w interfejsie Checkout Shield dla MVC . Potężny komponent, który możesz zintegrować za pomocą kilku linii, takich jak:

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

Prosty:

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