ootstrap-datepicker是一個開源、基于bootstrap的日期選擇器,內(nèi)置60+種語言,基于bootstrap也使得選擇器非常美觀適合現(xiàn)代網(wǎng)站,功能強大,通過內(nèi)置屬性、方法、事件組合配置可以滿足幾乎所有日期選擇需求,唯一遺憾的是不支持時間選擇,只能選擇年月日。
1、下載及初始化
https://github.com/uxsolutions/bootstrap-datepicker
下載完成后解壓,把dist文件夾中的所有文件放到項目中任意位置,引入下圖所示的文件即可。
然后在頁面body元素中創(chuàng)建一個容器,如下所示。
最后在id為sandbox-container的div元素中創(chuàng)建input元素,并運行以下代碼腳本,一個日期選擇器就創(chuàng)建好了。
2、特色展示
⑴組件選擇
⑵內(nèi)聯(lián)選擇
⑶范圍選擇
⑷格式化日期
⑸最大最小日期
⑹選擇器開始界面
0:天(默認)
1:月
2:年
3:十年
4:世紀
⑺最大最小選擇精度
minViewMode最小、maxViewMode最大
0:天(最小默認)
1:月
2:年
3:十年
4:世紀(最大默認)
⑻今日、清除按鈕
⑼選擇器方向
auto:自動(默認)
top auto:向上自動
bottom auto:向下自動
auto left:自動向左
top left:左上
bottom left:左下
auto right:自動向右
top right:右上
bottom right:右下
⑽星期禁用、高亮
⑾多選、分隔符
⑿顯示第幾周
⒀選擇后自動關(guān)閉
⒁今日高亮
⒂選擇器界面顯示之前的回調(diào)函數(shù)
有世紀、十年、年、月、日五種類型,如下所示是(日的例子)
⒃禁用日期
⒄選中取消
⒅默認初始化視圖
⒆鍵盤操作
⒇星期幾作為一周的開始
在線演示網(wǎng)站:
https://uxsolutions.github.io/bootstrap-datepicker/
API文檔:
https://bootstrap-datepicker.readthedocs.io/en/latest/index.html
bootstrap datepicker內(nèi)置8個事件(顯示、隱藏選擇器事件、清除日期選中事件和世紀、十年、年、月、日改變事件),內(nèi)置20個方法(如銷毀、顯示、隱藏、更新選擇器方法等),支持鍵盤操作選擇日期,支持日期校驗等,功能豐富,希望以后能夠加入時間選擇。
有哪里寫得不好的地方請大家提出來,請輕噴,謝謝。 同時有什么與編程相關(guān)的好東西可以推舉給我,再次感謝!
ccess快速開發(fā)平臺一個一直被忽略的功能,即通用日期選擇器可以對日期進行選擇設(shè)置日期,可以選擇時間、選擇時分功能,之前一直有人問日期控件能不能選擇時間、選擇分鐘?現(xiàn)在把這個時間選取器的設(shè)置方法分享給大家學(xué)習(xí)一下。
如果你還沒有下載Access快速開發(fā)平臺,則可以先下載一個空白版平臺打開測試一下該功能,Access開發(fā)平臺最新版下載地址:
http://www.accessgood.com
Access快速開發(fā)平臺時間選取器的設(shè)置步驟:
1.文本框控件,單擊里面寫 =DatePickerFor([Text0],False)
設(shè)為False 只選取日期
2.日期選擇的顯示效果如下圖:
3.文本框控件,單擊里面寫 =DatePickerFor([Text0],True)
設(shè)為True 帶調(diào)時分
4.日期時間、日期分鐘選擇的顯示效果如下圖:
5.查看最終效果:對需要選擇設(shè)置日期、選擇設(shè)置時間的朋友來說,這樣看起來就方便多了。
更多Access快速開發(fā)平臺自帶的函數(shù)\功能用法,請查閱幫助中心詳細了解!
《盟威軟件快速開發(fā)平臺》在線幫助中心 (http://www.accessgood.com/help/Main.html)
Access快速開發(fā)平臺--通用日期選擇器設(shè)置選擇日期、選擇時間、選擇時分、時間選取器的設(shè)置方法【Access軟件網(wǎng)】
頁編程之?dāng)?shù)字選擇器。
同學(xué)們好!這里是免費少兒編程知識分享,每天一行代碼誰都能學(xué)會!今天分享的知識是數(shù)字選擇器,用到的是input標簽,type屬性值為range。這個控件常被用來快速輸入不太精準的數(shù)字,比如說調(diào)節(jié)明暗色值高寬等數(shù)據(jù),以一個可以拖動的滾動條形態(tài)出現(xiàn)。
先來看看今天實例的運行效果,網(wǎng)頁上為了方便展示,我仍將其分為了上下兩段,上面的是一個數(shù)學(xué)加法公式,默認是0+0=0。
下面是兩個Range控件,中間一個加號,先拖動第一個range,發(fā)現(xiàn)加數(shù)值發(fā)生了變化,拖動第二個時被加數(shù)值發(fā)生了變化。而且不論是拖動哪一個range,控件最終都會自動得算出等式的值。這就是range控件的一個簡單使用場景,效果各位同學(xué)都已經(jīng)看到了。
《ipt t現(xiàn)在我們來看看實現(xiàn)的代碼吧。igut range控件仍然是由input,《ip標簽的type屬性來編寫而成的。它常用的屬性有Max控件能接受的最大數(shù)值范圍。<ipt tnpe Min控件能接受的最小數(shù)值范圍。tep每次拖動時值自動增加或者減少多少。
《ipuvalue設(shè)置控件在頁面加載之初的默認值。onMouserMove事件當(dāng)鼠標在控件移動時觸發(fā)。《ip這些屬性其實早就已經(jīng)給你們講過了,相信各位同學(xué)自己也能看明白。aipt控件就講完了。
《p各位同學(xué)你們有沒有發(fā)現(xiàn)司與定出稱力be?ipt 當(dāng)基礎(chǔ)知識累積到一定程度的時候,《input p編程也就沒有那么難了。《iput 就算是陌生的東西只要出現(xiàn)過,《inut pa你猜也能猜個八九不離十。
《ipt 還有時間來講解一下示例里的JS吧。onMousemove事件加上了自定義函數(shù)CSUM。《iptp" 只要鼠標在控件上移動,《ip就調(diào)用這個函數(shù)來完成計算等式的值。事件中的函數(shù)名和JS中的函數(shù)名必須完全一致。《ip在CSUM中我先定義了三個變量ABC,AB分別用來保存兩個 reng 的值。這里的A1、A2、A3就是上一章節(jié)才講過的label標簽,也是使用id來引用的。將AB的值分別顯示在label中。
·這一句是計算a加b的值,《ipt tne在A3這個label中顯示出來,i這里還用到了JS的內(nèi)置函數(shù)syslnt,可以將字符串轉(zhuǎn)化為數(shù)字,涉及到變量類型就先不講了。
·總之最后的結(jié)果就是示例的樣子,《ipet t》在這里還有一段注釋代碼,以后學(xué)習(xí)了JS之后再回過頭來看就會非常有意思。ipt tpr'就會非常有意思,這個控件的寫法和使用都很簡單。
今天的分享就到這里,希望各位同學(xué)下去照著寫三遍,做到不看視頻也能夠?qū)懗鰜恚械陌咐跋嚓P(guān)文檔均可以向我獲取,下期見。網(wǎng)頁編程服務(wù)端編程數(shù)據(jù)庫算法,點贊關(guān)注。
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。