Ausführliche Erklärung zur Verwendung des JS-Steuer-Bootstrap-Datepickers (Bild)-js-Tutorial-php.cn

Ausführliche Erklärung zur Verwendung des JS-Steuer-Bootstrap-Datepickers (Bild)

PHPz

Freigeben： 2018-10-13 17:31:19

Original

9877 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Verwendung des js-Control-Bootstrap-Datepickers vorgestellt, der einen bestimmten Referenzwert hat. Interessierte Freunde können sich auf das Bootstrap-Tutorial

Bootstrap- beziehen. Datepicker-Sandbox-Umgebung:
Bootstrap-Datepicker-Sandbox-Umgebung:

1. Erfordert JS-Konfiguration

requirejs.config({
  baseUrl: &#39;../pages/modules&#39;,
//  urlArgs: "v=" + (new Date()).getTime(),//禁止缓存，生产环境去除
  urlArgs:&#39;v=2016110701&#39;,
  paths: {
    jquery: ["../../plugins/jquery/jquery"],
    bootstrap: ["../../plugins/bootstrap/dist/js/bootstrap.min"],
    datepicker:["../../plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min"],
    datepicker_zh:["../../plugins/bootstrap-datepicker/dist/locales/bootstrap-datepicker.zh-CN.min"]
  },
  shim: {
    bootstrap: {deps: ["jquery"],exports: &#39;bootstrap&#39;},
    datepicker:{deps:["jquery"],exports:"datepicker"},
    datepicker_zh:{deps:["jquery","datepicker"],exports:"datepicker_zh"}
  }
});
require([&#39;jquery&#39;, &#39;bootstrap&#39;]);

Nach dem Login kopieren

2 HTML

<p class="form-group col col-sm-3 padding no-margin-bottom" id="birthdayGroup">
        <label class="col col-sm-4 text-right form-label no-padding-left">出生日期：</label>
        <p class="col col-sm-8 no-padding-left no-padding-left input-group date">
          <span class="input-group-addon">
            <i class="fa fa-calendar"></i>
          </span>
          <input id="birthday" type="text" class="form-control" placeholder="出生日期"/>
        </p>
      </p>

Nach dem Login kopieren

3 js

var $ = require(&#39;jquery&#39;);
require(&#39;datepicker_zh&#39;);
$("#birthdayGroup .input-group.date").datepicker({todayHighlight:true,todayBtn: &#39;linked&#39;
      ,keyboardNavigation:true,autoclose:true,language:&#39;zh-CN&#39;,format:&#39;yyyy-mm-dd&#39;
      ,daysOfWeekHighlighted:&#39;0,6&#39;});

Nach dem Login kopieren

4 Effekte

5 Standardkonfiguration ändern

Wenn jedes Steuerelement nicht sehr schmerzhaft ist nach der oben genannten js-Methode schreiben? So können Sie die Konfiguration festlegen, die Ihrer Meinung nach häufig verwendet wird

Nach dem Einrichten müssen Sie nur noch das Format des Datums festlegen, da Bootstrap- datepicker.zh-CN.min .js legt das Format auf jjjj Jahr mm Monat dd Tag fest. Wenn das Standardformat also „jjjj-mm-tt“ sein soll, müssen Sie bootstrap-datepicker.zh-CN.min ändern .js.

Jetzt müssen Sie nur noch den Effekt erzielen.
$("#birthdayGroup .input-group.date").datepicker();

6 Das Datum des Zeitraums
Der Fokus des JSP-Seite ist EingabedatumBereich Stil der Eingabegruppe

<p class="form-group col col-sm-4 padding no-margin-bottom">
   <label class="col col-sm-4 text-right form-label no-padding-left">入库日期:</label>
   <p class="col col-sm-8 col-xs-6 no-padding-left input-daterange input-group">
   <input type="text" class="input-sm form-control" name="filter_ged_instockDateFontalInstockExample" 
   value="<fmt:formatDate value=&#39;${filter_ged_instockDate}&#39; pattern=&#39;yyyy-MM-dd&#39;/>" />
    <span class="input-group-addon">到</span>
    <input type="text" class="input-sm form-control" name="filter_led_instockDateFontalInstockExample" 
    value="<fmt:formatDate value=&#39;${filter_led_instockDate}&#39; pattern=&#39;yyyy-MM-dd&#39;/>"/>
    </p>
</p>

Nach dem Login kopieren

Die Konfiguration von js ist auch relativ einfach. Konfigurieren Sie es einfach während der Initialisierung und es wird gut sein.

$(".input-daterange").datepicker({keyboardNavigation:!1,forceParse:!1,autoclose:!0});

Nach dem Login kopieren

Wie aus dem folgenden Beispiel hervorgeht, gibt es ein ausgewähltes Datum im Kalender und die Größe der beiden Daten davor und danach wird durch die Steuerung selbst vervollständigt, es ist kein menschlicher Eingriff erforderlich

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung des JS-Steuer-Bootstrap-Datepickers (Bild). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!