HTML5 自定义日历控件

ys_datetime_selector.css

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

<code>.ys-datetime-selector{</code>

<code>    </code><code>position</code><code>:</code><code>fixed</code><code>;</code>

<code>    </code><code>left</code><code>:</code><code>0</code><code>;</code>

<code>    </code><code>right</code><code>:</code><code>0</code><code>;</code>

<code>    </code><code>top</code><code>:</code><code>0</code><code>;</code>

<code>    </code><code>bottom</code><code>:</code><code>0</code><code>;</code>

<code>    </code><code>background-color</code><code>:rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.3</code><code>);</code>

<code>    </code><code>z-index</code><code>: </code><code>999</code><code>;</code>

<code>}</code>

<code>.ys-datetime-selector.display-</code><code>hide</code><code>{</code>

<code>    </code><code>transform: translate</code><code>3</code><code>d(</code><code>100%</code><code>,</code><code>0</code><code>,</code><code>0</code><code>);</code>

<code>    </code><code>-webkit-transform: translate</code><code>3</code><code>d(</code><code>100%</code><code>,</code><code>0</code><code>,</code><code>0</code><code>);</code>

<code>    </code><code>visibility</code><code>: </code><code>hidden</code><code>;</code>

<code>.ys-datetime-selector .ys-datetime-selector-content{</code>

<code>    </code><code>position</code><code>:</code><code>absolute</code><code>;</code>

<code>    </code><code>background-color</code><code>:</code><code>#fff</code><code>;</code>

<code>/* ======================================== ys-datetime-operation-bar ======================================== */</code>

<code>.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-operation-bar{</code>

<code>    </code><code>height</code><code>:</code><code>45px</code><code>;</code>

<code>    </code><code>line-height</code><code>: </code><code>44px</code><code>;</code>

<code>    </code><code>border-bottom</code><code>:</code><code>1px</code> <code>solid</code> <code>#e0e0e0</code><code>;</code>

<code>    </code><code>text-align</code><code>: </code><code>center</code><code>;</code>

<code>.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-operation-bar span{</code>

<code>    </code><code>color</code><code>:</code><code>#333</code><code>;</code>

<code>    </code><code>font-size</code><code>:</code><code>16px</code><code>;</code>

<code>.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-operation-bar a{</code>

<code>    </code><code>padding</code><code>:</code><code>0</code> <code>15px</code><code>;</code>

<code>    </code><code>color</code><code>:</code><code>#4e9dcf</code><code>;</code>

<code>.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-operation-bar a.ys-datetime-cancel-btn{</code><code>left</code><code>:</code><code>0</code><code>;}</code>

<code>.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-operation-bar a.ys-datetime-ok-btn{</code><code>right</code><code>:</code><code>0</code><code>;}</code>

<code>/* ======================================== ys-datetime-blocks ======================================== */</code>

<code>.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks{</code>

<code>    </code><code>position</code><code>:</code><code>relative</code><code>;</code>

<code>    </code><code>height</code><code>:</code><code>170px</code><code>;</code>

<code>    </code><code>-webkit-mask-box-image: -webkit-linear-gradient(</code><code>top</code><code>, rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.2</code><code>), rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.4</code><code>) </code><code>20%</code><code>,rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.6</code><code>) </code><code>39%</code><code>,</code><code>white</code> <code>40%</code><code>, </code><code>white</code> <code>60%</code><code>,rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.6</code><code>) </code><code>41%</code><code>, rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.4</code><code>) </code><code>80%</code><code>,rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.2</code><code>));</code>

<code>    </code><code>-webkit-mask-box-image: linear-gradient(to </code><code>top</code><code>, rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.2</code><code>), rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.2</code><code>), rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.4</code><code>) </code><code>20%</code><code>,rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.6</code><code>) </code><code>39%</code><code>,</code><code>white</code> <code>40%</code><code>, </code><code>white</code> <code>60%</code><code>,rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.6</code><code>) </code><code>41%</code><code>, rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.4</code><code>) </code><code>80%</code><code>,rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.2</code><code>));</code>

<code>.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks:before{</code>

<code>    </code><code>content</code><code>:</code><code>""</code><code>;</code>

<code>    </code><code>height</code><code>:</code><code>1px</code><code>;</code>

<code>    </code><code>background-color</code><code>:</code><code>#cdcdcd</code><code>;</code>

<code>    </code><code>top</code><code>:</code><code>68px</code><code>;</code>

<code>.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks:after{</code>

<code>    </code><code>bottom</code><code>:</code><code>68px</code><code>;</code>

<code>.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks&gt;div{</code>

<code>    </code><code>width</code><code>:</code><code>33.333%</code><code>;</code>

<code>    </code><code>float</code><code>:</code><code>left</code><code>;</code>

<code>.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks&gt;div.block-</code><code>hide</code><code>{</code>

<code>    </code><code>display</code><code>:</code><code>none</code><code>;</code>

<code>.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks&gt;div.width</code><code>-50</code><code>{</code>

<code>    </code><code>width</code><code>:</code><code>50%</code><code>;</code>

<code>.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks&gt;div.width</code><code>-100</code><code>{</code>

<code>    </code><code>width</code><code>:</code><code>100%</code><code>;</code>

<code>.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks .swiper-container{</code>

<code>.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks .swiper-container .swiper-slide{</code>

<code>    </code><code>height</code><code>:</code><code>34px</code><code>;</code>

<code>    </code><code>line-height</code><code>: </code><code>34px</code><code>;</code>

<code>/* ================================================== page animation start ================================================== */</code>

<code>.ys-datetime-selector .datetime-selector-animated{</code>

<code>    </code><code>animation-duration: </code><code>0.3</code><code>s;</code>

<code>    </code><code>-webkit-animation-duration: </code><code>0.3</code><code>s;</code>

<code>    </code><code>-webkit-animation-fill-mode: </code><code>both</code><code>;</code>

<code>    </code><code>animation-fill-mode: </code><code>both</code><code>;</code>

<code>/* datetime-selector-slide-down-in */</code>

<code>.ys-datetime-selector .datetime-selector-slide-down-in{</code>

<code>    </code><code>animation-name:datetime-selector-slide-down-in;</code>

<code>    </code><code>-webkit-animation-name:datetime-selector-slide-down-in;</code>

<code>@keyframes datetime-selector-slide-down-in {</code>

<code>    </code><code>from{</code>

<code>        </code><code>-webkit-transform: translate</code><code>3</code><code>d(</code><code>0</code><code>, </code><code>100%</code><code>, </code><code>0</code><code>);</code>

<code>        </code><code>transform: translate</code><code>3</code><code>d(</code><code>0</code><code>, </code><code>100%</code><code>, </code><code>0</code><code>);</code>

<code>    </code><code>}</code>

<code>    </code><code>to{</code>

<code>        </code><code>-webkit-transform: translate</code><code>3</code><code>d(</code><code>0</code><code>, </code><code>0</code><code>, </code><code>0</code><code>);</code>

<code>        </code><code>transform: translate</code><code>3</code><code>d(</code><code>0</code><code>, </code><code>0</code><code>, </code><code>0</code><code>);</code>

<code>@-webkit-keyframes datetime-selector-slide-down-in {</code>

<code>/* datetime-selector-slide-down-out */</code>

<code>.datetime-selector-slide-down-out{</code>

<code>    </code><code>animation-name:datetime-selector-slide-down-out;</code>

<code>    </code><code>-webkit-animation-name:datetime-selector-slide-down-out;</code>

<code>@keyframes datetime-selector-slide-down-out {</code>

<code>@-webkit-keyframes datetime-selector-slide-down-out {</code>

ys_datetime_selector.js

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

<code>(</code><code>function</code><code>($){</code>

<code>    </code><code>var</code> <code>container = $(</code><code>".ys-datetime-selector"</code><code>);</code>

<code>    </code><code>var</code> <code>currentYear = </code><code>new</code> <code>Date().getFullYear();</code>

<code>    </code><code>var</code> <code>currentMonth = </code><code>new</code> <code>Date().getMonth()+1;</code>

<code>    </code><code>var</code> <code>currentDate = </code><code>new</code> <code>Date().getDate();</code>

<code>    </code><code>var</code> <code>currentDayCount = getMaxDateInMonth(currentYear,currentMonth);</code>

<code>    </code><code>var</code> <code>yearSwiper =</code><code>null</code><code>;</code>

<code>    </code><code>var</code>  <code>monthSwiper =</code><code>null</code><code>;</code>

<code>    </code><code>var</code>  <code>dateSwiper =</code><code>null</code><code>;</code>

<code>    </code><code>var</code> <code>callback = </code><code>function</code><code>(year,month,date){};</code>

<code>    </code><code>var</code> <code>html =  </code><code>"&lt;div class='ys-datetime-selector display-hide'&gt;    "</code><code>+</code>

<code>        </code><code>"  &lt;div class='ys-datetime-selector-content'&gt;          "</code><code>+</code>

<code>        </code><code>"     &lt;div class='ys-datetime-operation-bar'&gt;         "</code><code>+</code>

<code>        </code><code>"        &lt;a class='ys-datetime-cancel-btn'&gt;取消&lt;/a&gt;"</code><code>+</code>

<code>        </code><code>"        &lt;span&gt;选择日期&lt;/span&gt;                     "</code><code>+</code>

<code>        </code><code>"        &lt;a class='ys-datetime-ok-btn'&gt;确定&lt;/a&gt;    "</code><code>+</code>

<code>        </code><code>"     &lt;/div&gt;                                        "</code><code>+</code>

<code>        </code><code>"     &lt;div class='ys-datetime-blocks'&gt;              "</code><code>+</code>

<code>        </code><code>"        &lt;div class='ys-datetime-year-block'&gt;      "</code><code>+</code>

<code>        </code><code>"           &lt;div class='swiper-container'&gt;        "</code><code>+</code>

<code>        </code><code>"              &lt;div class='swiper-wrapper'&gt;&lt;/div&gt;"</code><code>+</code>

<code>        </code><code>"           &lt;/div&gt;                                "</code><code>+</code>

<code>        </code><code>"        &lt;/div&gt;                                    "</code><code>+</code>

<code>        </code><code>"        &lt;div class='ys-datetime-month-block'&gt;     "</code><code>+</code>

<code>        </code><code>"        &lt;div class='ys-datetime-date-block'&gt;      "</code><code>+</code>

<code>        </code><code>"        &lt;div style='clear:both;'&gt;&lt;/div&gt;           "</code><code>+</code>

<code>        </code><code>"  &lt;/div&gt;                                            "</code><code>+</code>

<code>        </code><code>"&lt;/div&gt;                                               "</code><code>;</code>

<code>    </code><code>/* ======================================== initialize the page view ======================================== */</code>

<code>    </code><code>function</code> <code>render(){</code>

<code>        </code><code>container = $(html).appendTo(</code><code>"body"</code><code>);</code>

<code>        </code><code>yearSwiper = </code><code>new</code> <code>Swiper(</code><code>".ys-datetime-year-block .swiper-container"</code><code>, {</code>

<code>            </code><code>direction : </code><code>"vertical"</code><code>,</code>

<code>            </code><code>freeMode:</code><code>true</code><code>,</code>

<code>            </code><code>freeModeSticky:</code><code>true</code><code>,</code>

<code>            </code><code>slidesPerView: </code><code>"auto"</code><code>,</code>

<code>            </code><code>onTransitionEnd:</code><code>function</code><code>(swiper){</code>

<code>                </code><code>var</code> <code>activeIndex = swiper.activeIndex;</code>

<code>                </code><code>var</code> <code>slidesLen = swiper.slides.length;</code>

<code>                </code><code>if</code><code>(activeIndex&lt;20){</code>

<code>                    </code><code>var</code> <code>firstYear = parseInt($(swiper.slides[0]).attr(</code><code>"data-year"</code><code>));</code>

<code>                    </code><code>var</code> <code>prevYears = [];</code>

<code>                    </code><code>for</code><code>(</code><code>var</code> <code>i=firstYear-1;i&gt;=firstYear-100;i--){</code>

<code>                        </code><code>prevYears.push(</code><code>"&lt;div class='swiper-slide' data-year='"</code><code>+i+</code><code>"'&gt;"</code><code>+i+</code><code>"年&lt;/div&gt;"</code><code>);</code>

<code>                    </code><code>}</code>

<code>                    </code><code>swiper.prependSlide(prevYears);</code>

<code>                </code><code>}</code><code>else</code> <code>if</code><code>(slidesLen-activeIndex&lt;20){</code>

<code>                    </code><code>var</code> <code>lastYear = parseInt($(swiper.slides[slidesLen-1]).attr(</code><code>"data-year"</code><code>));</code>

<code>                    </code><code>var</code> <code>nextYears = [];</code>

<code>                    </code><code>for</code><code>(</code><code>var</code> <code>i=lastYear+1;i&lt;=lastYear+100;i++){</code>

<code>                        </code><code>nextYears.push(</code><code>"&lt;div class='swiper-slide' data-year='"</code><code>+i+</code><code>"'&gt;"</code><code>+i+</code><code>"年&lt;/div&gt;"</code><code>);</code>

<code>                    </code><code>swiper.appendSlide(nextYears);</code>

<code>                </code><code>}</code>

<code>                </code><code>// 计算这个月有多少天</code>

<code>                </code><code>currentYear = parseInt($(swiper.slides[activeIndex+2]).attr(</code><code>"data-year"</code><code>));</code>

<code>                </code><code>updateDateSwiper();</code>

<code>            </code><code>}</code>

<code>        </code><code>});</code>

<code>        </code><code>var</code> <code>yearSlides = [];</code>

<code>        </code><code>for</code><code>(</code><code>var</code> <code>i=currentYear-2;i&lt;=currentYear+102;i++){</code>

<code>            </code><code>yearSlides.push(</code><code>"&lt;div class='swiper-slide' data-year='"</code><code>+i+</code><code>"'&gt;"</code><code>+i+</code><code>"年&lt;/div&gt;"</code><code>);</code>

<code>        </code><code>}</code>

<code>        </code><code>var</code> <code>prevYears = [];</code>

<code>        </code><code>for</code><code>(</code><code>var</code> <code>i=currentYear-3;i&gt;currentYear-100;i--){</code>

<code>            </code><code>prevYears.push(</code><code>"&lt;div class='swiper-slide' data-year='"</code><code>+i+</code><code>"'&gt;"</code><code>+i+</code><code>"年&lt;/div&gt;"</code><code>);</code>

<code>        </code><code>yearSwiper.appendSlide(yearSlides);</code>

<code>        </code><code>yearSwiper.prependSlide(prevYears);</code>

<code>        </code><code>monthSwiper = </code><code>new</code> <code>Swiper(</code><code>".ys-datetime-month-block .swiper-container"</code><code>, {</code>

<code>            </code><code>direction :</code><code>"vertical"</code><code>,</code>

<code>            </code><code>freeModeMomentumRatio:0.2,</code>

<code>            </code><code>loop:</code><code>true</code><code>,</code>

<code>            </code><code>loopAdditionalSlides:24,</code>

<code>            </code><code>slidesPerView:</code><code>"auto"</code><code>,</code>

<code>                </code><code>if</code><code>(isNaN(activeIndex)){</code>

<code>                    </code><code>return</code><code>;</code>

<code>                </code><code>currentMonth = parseInt($(swiper.slides[activeIndex+2]).attr(</code><code>"data-month"</code><code>));</code>

<code>        </code><code>var</code> <code>monthSlides=[];</code>

<code>        </code><code>for</code><code>(</code><code>var</code> <code>i=1;i&lt;=12;i++){</code>

<code>            </code><code>monthSlides.push(</code><code>"&lt;div class='swiper-slide' data-month='"</code><code>+i+</code><code>"'&gt;"</code><code>+i+</code><code>"月&lt;/div&gt;"</code><code>);</code>

<code>        </code><code>monthSwiper.appendSlide(monthSlides);</code>

<code>        </code><code>dateSwiper = </code><code>new</code> <code>Swiper(</code><code>".ys-datetime-date-block .swiper-container"</code><code>, {</code>

<code>            </code><code>loop : </code><code>true</code><code>,</code>

<code>                </code><code>currentDate = parseInt($(swiper.slides[activeIndex+2]).attr(</code><code>"data-date"</code><code>));</code>

<code>        </code><code>var</code> <code>dateSlides=[];</code>

<code>        </code><code>for</code><code>(</code><code>var</code> <code>i=1;i&lt;=currentDayCount;i++){</code>

<code>            </code><code>dateSlides.push(</code><code>"&lt;div class='swiper-slide' data-date='"</code><code>+i+</code><code>"'&gt;"</code><code>+i+</code><code>"日&lt;/div&gt;"</code><code>);</code>

<code>        </code><code>dateSwiper.appendSlide(dateSlides);</code>

<code>    </code><code>/* ======================================== bind events ======================================== */</code>

<code>    </code><code>function</code> <code>bindEvents(){</code>

<code>        </code><code>container.on(</code><code>"click"</code><code>,</code><code>function</code><code>(e){</code>

<code>            </code><code>e.stopPropagation();</code>

<code>            </code><code>e.preventDefault();</code>

<code>            </code><code>container.find(</code><code>".ys-datetime-selector-content"</code><code>).addClass(</code><code>"datetime-selector-slide-down-out"</code><code>);</code>

<code>        </code><code>container.on(</code><code>"click"</code><code>,</code><code>".ys-datetime-selector-content"</code><code>,</code><code>function</code><code>(e){</code>

<code>        </code><code>container.on(</code><code>"click"</code><code>,</code><code>function</code><code>(e){e.preventDefault();e.stopPropagation();});</code>

<code>        </code><code>container.on(</code><code>"click"</code><code>,</code><code>".ys-datetime-cancel-btn"</code><code>,</code><code>function</code><code>(e){</code>

<code>        </code><code>container.on(</code><code>"click"</code><code>,</code><code>".ys-datetime-ok-btn"</code><code>,</code><code>function</code><code>(e){</code>

<code>            </code><code>callback(currentYear,currentMonth,currentDate);</code>

<code>        </code><code>container.find(</code><code>".ys-datetime-selector-content"</code><code>).on(</code><code>"animationend webkitAnimationEnd"</code><code>,</code><code>function</code><code>(){</code>

<code>            </code><code>if</code><code>($(</code><code>this</code><code>).hasClass(</code><code>"datetime-selector-slide-down-out"</code><code>)){</code>

<code>                </code><code>container.addClass(</code><code>"display-hide"</code><code>);</code>

<code>            </code><code>$(</code><code>this</code><code>).removeClass(</code><code>"datetime-selector-slide-down-in"</code><code>).removeClass(</code><code>"datetime-selector-slide-down-out"</code><code>);</code>

<code>    </code><code>var</code> <code>initialized = </code><code>false</code><code>;</code>

<code>    </code><code>function</code> <code>init(){</code>

<code>        </code><code>if</code><code>(initialized){</code>

<code>            </code><code>return</code><code>;</code>

<code>        </code><code>initialized = </code><code>true</code><code>;</code>

<code>        </code><code>render();</code>

<code>        </code><code>bindEvents();</code>

<code>    </code><code>/* ======================================== common methods ======================================== */</code>

<code>    </code><code>function</code> <code>getMaxDateInMonth(year,month){</code>

<code>        </code><code>var</code> <code>date = </code><code>new</code> <code>Date();</code>

<code>        </code><code>date.setFullYear(year);</code>

<code>        </code><code>date.setMonth(month);</code>

<code>        </code><code>date.setDate(0);</code>

<code>        </code><code>return</code> <code>date.getDate();</code>

<code>    </code><code>function</code> <code>updateDateSwiper(){</code>

<code>        </code><code>var</code> <code>nextDayCount = getMaxDateInMonth(currentYear,currentMonth);</code>

<code>        </code><code>if</code><code>(currentDayCount&gt;nextDayCount){</code>

<code>            </code><code>for</code><code>(</code><code>var</code> <code>i=currentDayCount-1;i&gt;=nextDayCount;i--){</code>

<code>                </code><code>dateSwiper.removeSlide(i);</code>

<code>        </code><code>}</code><code>else</code> <code>if</code><code>(currentDayCount&lt;nextDayCount){</code>

<code>            </code><code>for</code><code>(</code><code>var</code> <code>i=currentDayCount+1;i&lt;=nextDayCount;i++){</code>

<code>                </code><code>dateSwiper.appendSlide(</code><code>"&lt;div class='swiper-slide' data-date='"</code><code>+i+</code><code>"'&gt;"</code><code>+i+</code><code>"日&lt;/div&gt;"</code><code>);</code>

<code>        </code><code>currentDayCount = nextDayCount;</code>

<code>        </code><code>currentDate = parseInt($(dateSwiper.slides[dateSwiper.activeIndex+2]).attr(</code><code>"data-date"</code><code>));</code>

<code>    </code><code>function</code> <code>showDateTime(options){</code>

<code>        </code><code>options = options||{};</code>

<code>        </code><code>var</code> <code>year = options.year;</code>

<code>        </code><code>var</code> <code>month = options.month;</code>

<code>        </code><code>var</code> <code>date = options.date;</code>

<code>        </code><code>var</code> <code>type = options.type||</code><code>"year-month-date"</code><code>;</code>

<code>        </code><code>if</code><code>(type==</code><code>"year-month-date"</code><code>){</code>

<code>            </code><code>container.find(</code><code>".ys-datetime-year-block"</code><code>).removeClass(</code><code>"block-hide"</code><code>).removeClass(</code><code>"width-50"</code><code>).removeClass(</code><code>"width-100"</code><code>);</code>

<code>            </code><code>container.find(</code><code>".ys-datetime-month-block"</code><code>).removeClass(</code><code>"block-hide"</code><code>).removeClass(</code><code>"width-50"</code><code>).removeClass(</code><code>"width-100"</code><code>);</code>

<code>            </code><code>container.find(</code><code>".ys-datetime-date-block"</code><code>).removeClass(</code><code>"block-hide"</code><code>).removeClass(</code><code>"width-50"</code><code>).removeClass(</code><code>"width-100"</code><code>);</code>

<code>        </code><code>}</code><code>else</code> <code>if</code><code>(type==</code><code>"year-month"</code><code>){</code>

<code>            </code><code>container.find(</code><code>".ys-datetime-date-block"</code><code>).addClass(</code><code>"block-hide"</code><code>);</code>

<code>            </code><code>container.find(</code><code>".ys-datetime-year-block"</code><code>).addClass(</code><code>"width-50"</code><code>).removeClass(</code><code>"width-100"</code><code>).removeClass(</code><code>"block-hide"</code><code>);</code>

<code>            </code><code>container.find(</code><code>".ys-datetime-month-block"</code><code>).addClass(</code><code>"width-50"</code><code>).removeClass(</code><code>"width-100"</code><code>).removeClass(</code><code>"block-hide"</code><code>);</code>

<code>        </code><code>}</code><code>else</code> <code>if</code><code>(type==</code><code>"year"</code><code>){</code>

<code>            </code><code>container.find(</code><code>".ys-datetime-month-block"</code><code>).addClass(</code><code>"block-hide"</code><code>);</code>

<code>            </code><code>container.find(</code><code>".ys-datetime-year-block"</code><code>).addClass(</code><code>"width-100"</code><code>);</code>

<code>        </code><code>callback = options.callback||callback;</code>

<code>        </code><code>currentYear = year||currentYear;</code>

<code>        </code><code>currentMonth = month||currentMonth;</code>

<code>        </code><code>currentDate = date||currentDate;</code>

<code>        </code><code>currentDayCount = getMaxDateInMonth(currentYear,currentMonth);</code>

<code>        </code><code>var</code> <code>yearSlidesLength = yearSwiper.slides.length;</code>

<code>        </code><code>var</code> <code>minYear = parseInt($(yearSwiper.slides[2]).attr(</code><code>"data-year"</code><code>));</code>

<code>        </code><code>var</code> <code>maxYear = parseInt($(yearSwiper.slides[yearSlidesLength-3]).attr(</code><code>"data-year"</code><code>));</code>

<code>        </code><code>if</code><code>(currentYear&lt;minYear){</code>

<code>            </code><code>var</code> <code>prevYears = [];</code>

<code>            </code><code>for</code><code>(</code><code>var</code> <code>i=minYear-3;i&gt;currentYear-20;i--){</code>

<code>                </code><code>prevYears.push(</code><code>"&lt;div class='swiper-slide' data-year='"</code><code>+i+</code><code>"'&gt;"</code><code>+i+</code><code>"年&lt;/div&gt;"</code><code>);</code>

<code>            </code><code>yearSwiper.prependSlide(prevYears);</code>

<code>            </code><code>yearSwiper.slideTo(17);</code>

<code>        </code><code>}</code><code>else</code> <code>if</code><code>(currentYear&gt;maxYear){</code>

<code>            </code><code>var</code> <code>nextSlides = [];</code>

<code>            </code><code>for</code><code>(</code><code>var</code> <code>i=maxYear+2;i&lt;=currentYear+20;i++){</code>

<code>                </code><code>nextSlides.push(</code><code>"&lt;div class='swiper-slide' data-year='"</code><code>+i+</code><code>"'&gt;"</code><code>+i+</code><code>"年&lt;/div&gt;"</code><code>);</code>

<code>            </code><code>yearSwiper.appendSlide(nextSlides);</code>

<code>            </code><code>yearSwiper.slideTo(currentYear-minYear+1);</code>

<code>        </code><code>}</code><code>else</code><code>{</code>

<code>            </code><code>yearSwiper.slideTo(currentYear-minYear);</code>

<code>        </code><code>monthSwiper.slideTo(currentMonth+9);</code>

<code>        </code><code>dateSwiper.slideTo(currentDayCount-3+currentDate);</code>

<code>        </code><code>container.removeClass(</code><code>"display-hide"</code><code>);</code>

<code>        </code><code>container.find(</code><code>".ys-datetime-selector-content"</code><code>).addClass(</code><code>"datetime-selector-animated"</code><code>).addClass(</code><code>"datetime-selector-slide-down-in"</code><code>);</code>

<code>    </code><code>var</code> <code>DateTimeWidget = {</code>

<code>        </code><code>show:</code><code>function</code><code>(options){</code>

<code>            </code><code>init();</code>

<code>            </code><code>showDateTime(options);</code>

<code>    </code><code>};</code>

<code>    </code><code>window.DateTimeWidget = DateTimeWidget;</code>

<code>})(jQuery);</code>

datetime.html

<code>&lt;!DOCTYPE html&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>meta</code> <code>charset</code><code>=</code><code>"utf-8"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"X-UA-Compatible"</code> <code>content</code><code>=</code><code>"IE=edge,chrome=1"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>title</code><code>&gt;&lt;/</code><code>title</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>meta</code> <code>name</code><code>=</code><code>"description"</code> <code>content</code><code>=</code><code>""</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>meta</code> <code>name</code><code>=</code><code>"viewport"</code> <code>content</code><code>=</code><code>"width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>meta</code> <code>name</code><code>=</code><code>"format-detection"</code> <code>content</code><code>=</code><code>"telephone=no"</code><code>&gt;</code>

<code>    </code><code>&lt;!-- 导入CSS --&gt;</code>

<code>    </code><code>&lt;</code><code>link</code> <code>href</code><code>=</code><code>"dist/css/swiper.min.css"</code> <code>rel</code><code>=</code><code>"stylesheet"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>link</code> <code>href</code><code>=</code><code>"css/common/ys_datetime_selector.css"</code> <code>rel</code><code>=</code><code>"stylesheet"</code><code>&gt;</code>

<code>    </code><code>&lt;!-- 导入JS --&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"dist/js/jquery-1.11.3.min.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"dist/js/swiper.jquery.min.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"js/common/ys_datetime_selector.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>script</code><code>&gt;</code>

<code>        </code><code>DateTimeWidget.show({</code>

<code>            </code><code>year:2018,</code>

<code>            </code><code>month:12,</code>

<code>            </code><code>date:31,</code>

<code>//            type:"year",</code>

<code>            </code><code>callback:function(year,month,date){</code>

<code>                </code><code>console.log(year+"年"+month+"月"+date+"日");</code>

<code>    </code><code>&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

<a href="http://s4.51cto.com/wyfs02/M01/89/5B/wKiom1gQbW7DLb4aAAhe3Avqtco611.jpg" target="_blank"></a>

 本文转自 antlove 51CTO博客，原文链接:http://blog.51cto.com/antlove/1865958