Heim > Web-Frontend > js-Tutorial > js-Code zur Implementierung der Datumsauswahl

js-Code zur Implementierung der Datumsauswahl

不言
Freigeben: 2018-07-18 17:23:02
Original
1897 Leute haben es durchsucht

In diesem Artikel erfahren Sie, wie Sie die Datumsauswahl in js implementieren. Freunde in Not können sich darauf beziehen.

/* JS代码部分 */
 3 const date = new Date()
const years = []
const months = []
const days = []
const hours = []
const minutes = []
var thisMon = date.getMonth();
var thisDay = date.getDate();

for (let i = 2017; i <= date.getFullYear() + 1; i++) {
  years.push(i)
}

for (let i = date.getMonth(); i <= 11; i++) {
  var k = i;
  if (0 <= i && i < 9) {
    k = "0" + (i + 1);
  } else {
    k = (i + 1);
  }
  months.push(k)
}
if (0 <= thisMon && thisMon < 9) {
  thisMon = "0" + (thisMon + 1);
} else {
  thisMon = (thisMon + 1);
}
if (0 <= thisDay && thisDay < 10) {
  thisDay = "0" + thisDay;
}

var totalDay = mGetDate(date.getFullYear(), thisMon);
for (let i = 1; i <= 31; i++) {
  var k = i;
  if (0 <= i && i < 10) {
    k = "0" + i
  }
  days.push(k)
}

for (let i = 0; i <= 23; i++) {
  var k = i;
  if (0 <= i && i < 10) {
    k = "0" + i
  }
  hours.push(k)
}
for (let i = 0; i <= 59; i++) {
  var k = i;
  if (0 <= i && i < 10) {
    k = "0" + i
  }
  minutes.push(k)
}
function mGetDate(year, month) {
  var d = new Date(year, month, 0);
  return d.getDate();
}
Page({
  data: {
    years: years,
    year: date.getFullYear(),
    months: months,
    month: thisMon,
    days: days,
    day: thisDay,
    value: [1, thisMon - 1, thisDay - 1, 0, 0],
    hours: hours,
    hour: "00",
    minutes: minutes,
    minute: "00",
  },
  bindChange: function (e) {
    const val = e.detail.value
    this.setData({
      year: this.data.years[val[0]],
      month: this.data.months[val[1]],
      day: this.data.days[val[2]],
      hour: this.data.hours[val[3]],
      minute: this.data.minutes[val[4]],
    })
    var totalDay = mGetDate(this.data.year, this.data.month);
    var changeDate = [];
    for (let i = 1; i <= totalDay; i++) {
      var k = i;
      if (0 <= i && i < 10) {
        k = "0" + i
      }
      changeDate.push(k)
    }
    this.setData({
      days: changeDate
    })
  },

})





/* css代码部分 */
.time-title{
  float:left;
  width:20%;
  text-align:center;
  color:#45BCE8;
}
.picker-text{
  text-align:center;
}
/*mask*/
.time_screens {
 width: 100%;
 position: fixed;
 bottom: 0;
 left: 0;
 z-index: 1000;
 opacity: 0.5;
 overflow: hidden;
}


/* html代码部分 */
  <view class="time_screens">
    <view style="text-align:center;color:#45BCE8">{{year}}-{{month}}-{{day}}
      <label style="float:left;margin-left:30px;">取消</label>
      <label style="float:right;margin-right:30px;">确定</label>
    </view>
    <view style="border-top:1px solid #45BCE8;height:25px;font-size:14px;">
    </view>
    <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
      <picker-view-column class="picker-text">
        <view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
      </picker-view-column>
      <picker-view-column class="picker-text">
        <view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
      </picker-view-column>
      <picker-view-column class="picker-text">
        <view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
      </picker-view-column>

    </picker-view>
  </view>

/* Json */
{
  "navigationBarTitleText": "XXXX"
}
Nach dem Login kopieren

Verwandte Empfehlungen:

jQuery-Code zum Implementieren des freien Ziehens und Sortierens von Elementen

Wie Javascript die Slider-Anmeldeüberprüfung implementiert

Das obige ist der detaillierte Inhalt vonjs-Code zur Implementierung der Datumsauswahl. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage