如何使用jqueryUi的datepicker日曆控件？

時間 2019-11-08

標籤如何使用 jqueryui datepicker 日曆控件欄目 JQuery 简体版

原文原文鏈接

參考： http://www.jb51.net/article/85007.htmjavascript

這裏的日曆控件是，基於jquery的jqureyui中的一個 widget。css

須要js 文件：外部的js文件， jquery.js, jqueryui.js
須要的css文件，外部的css文件，link只須要jqueryui.css
其餘的css文件，或style樣式，只是本身的網頁中須要進行設置的東西。。。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI - Datepicker</title>

<javascript src="./jquery.js"></script>     // 注意看這裏的兩行!!! 竟然有這種寫法和問題!!!  是script, 不是javascript.
<javascript src="./jquery-ui.js"></script>  // 注意看這裏的兩行!!!
<link href="jquery-ui.css" rel="stylesheet">
</head>


<body>
 
date:<br>
<div id="datepicker"></div>
 
<script type="text/javascript">
$(function(){
    $('#datepicker').datepicker({'inline':true});
});
</script>
</body>
</html>

解決jQuery插件衝突的問題: 參考http://www.baba.io/article/22443.htmlhtml

jQuery的寫法是 : 小寫的j, 大寫的Query, 即: jQuery.java

stateful: 有狀態的,
review: 複習, 回顧; 審覈, 審查; 評論, 評述跟comment不一樣, 後者表示註釋, 註解, 對前面的話, 觀點進行解釋說明引伸等jquery

有不少框架, 都提供了本身的icon, 因此, 不要只是盯在某一個框架上, 在一個項目中 , 可使用多個框架進行混合使用, 如jquery-ui框架, bootstarp框架等等.
可是, 隨便在哪一個框架中, 對圖標的使用都是同樣的方法: 即便用span加icon類的方法: span.ui-icon.ui-icon-battery-1的方式.git

使用 jquery-ui的心得體會:github

使用jquery或jquery.min.js均可以
這裏出現$: ErrorReference, $ is not defined . $ is undefined, 可是查看文件和路徑都正確, 爲何呢? 原來是html的標籤寫錯了: 導入腳本的標籤是script, 不是javascript, 那個是腳本的類型: text/javascript. 不是標籤的名稱. 因此寫script時,沒必要寫type什麼的.
注意上面的寫法錯誤了: 是script, 不是javascript! 因此, 它認爲沒有引入js文件, 因此就會提示 "找不到 $" 的錯誤
其實在可視化的編輯器中, 都有標籤的顏色變化顯示: 好比在plus'edit中, 甚至在vim中都有 :ｈｔｍｌ標籤的 "顏色高亮" 顯示, 因此在編輯代碼段時候, 要留心一點, 注意查看標籤的 "顏色""高亮" 顏色的顯示, 若是html標籤的顏色顯示有錯誤, 或不一樣, 那就是有錯誤了! 以下圖所示:

chance: adj. 偶然的, 機會的; n. 機會; 僥倖, 偶然. v. 碰巧, 冒...險.
let it to chance: 聽天由命; jump at the chance : 抓住機會; take the chance : 冒險; chance the duck : 不顧後果; a sporting chance : 不能肯定的結果; by sheer chance 純屬偶然, 碰狗屎運. on the chance of(that): 以指望..., on the off chance of... the ghost of chance ...一絲但願..vim

關於jquery日曆的使用, 你可使用接受/接收日曆的選擇結果, 也能夠不用接收選擇結果, 就是隻有一個日曆顯示器就行了. 寫一個div, id=foo, 而後在srcipt標籤中, 使用datepicker方法就能夠了, 若是你不想要其餘jquery-ui的插件, 你能夠只選擇你想要的插件, 在jquery-ui的官網上, 提供了 "自定義"下載, 如能夠只選擇下載這裏的datepicker plugin, 其餘插件就不會下載, 在最下面的theme中, 選擇base或blue等主題, 就會產生相應的 jquery-ui.css文件.

jquery-ui的中文顯示:

y要引入一個漢化的js文件, zh-CN.js, 這個文件在github, 或在 jquery-ui的站點上均可如下載到. 或者在 jquery-ui-i18n.js(包含了所有的可用語言)中下載. 可是要注意, 須要有 return..., 最好仍是用從github上下載的單獨的 zh-CN.js文件. 或者直接將下面的保存爲zh-CN.js文件, 這個就是github上的js文件的內容windows

/* Chinese initialisation for the jQuery UI date picker plugin. */
/* Written by Cloudream (cloudream@gmail.com). */
( function( factory ) {
    if ( typeof define === "function" && define.amd ) {

        // AMD. Register as an anonymous module.
        define( [ "../widgets/datepicker" ], factory );
    } else {

        // Browser globals
        factory( jQuery.datepicker );
    }
}( function( datepicker ) {

datepicker.regional[ "zh-CN" ] = {
    closeText: "關閉",
    prevText: "&#x3C;上月",
    nextText: "下月&#x3E;",
    currentText: "今天",
    monthNames: [ "一月","二月","三月","四月","五月","六月",
    "七月","八月","九月","十月","十一月","十二月" ],
    monthNamesShort: [ "一月","二月","三月","四月","五月","六月",
    "七月","八月","九月","十月","十一月","十二月" ],
    dayNames: [ "星期日","星期一","星期二","星期三","星期四","星期五","星期六" ],
    dayNamesShort: [ "週日","週一","週二","週三","週四","週五","週六" ],
    dayNamesMin: [ "日","一","二","三","四","五","六" ],
    weekHeader: "周",
    dateFormat: "yy-mm-dd",
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: true,
    yearSuffix: "年" };
datepicker.setDefaults( datepicker.regional[ "zh-CN" ] );

return datepicker.regional[ "zh-CN" ];

} ) );

若是出現$ 沒有定義, 或者某些jqueryui 的函數沒有定義 , 請檢查jquery/ui 文件內容和文件名是否對應, 有時候, 會由於文件名稱修改錯誤形成的, 另外就是jquery的版本問題也要注意一下.框架

在windows的回收站中, 是不能使用 copy的, 只能使用 "還原".

在vim中要建立/打開新的文件時, 使用　:e 命令: 這裏的e就是 edit 編輯的意思.
:enew: 建立新的文件, :e FILE_NAME打開文件.

在使用jquery函數帶有{ key:value｝格式的時候, 因爲因爲有冒號的分隔, 因此, 前面的key能夠不用加引號"", 直接就是 :　ｋｅｙ:'key_value'就行了.

注意要點:

images 中有多個表示圖標排列順序的圖片, 其中圖片的數字555555, cc0000等表示的是圖標的顏色值. 如cc0000就是紅色的圖標, 因此 images文件夾不能刪 , 不然凡是須要圖標的地方, 都不會顯示圖標了.
jqueryui中的圖標, 表示的類, ui-icon-circle-triangle-e: 表示: 外面是一個circle圓, 裏面是一個triangle三角形, e表示向右:　ui－ｉcon-circle-triangle-e.

HGST: Hi'tachi[hi't2tsi] global storage: 日立環球存儲科技. 日本東部的一個港口城市.
硬盤的主動保護系統: aps: active protection system. 是在ibm和蘋果的系統中才有的: 包括: 重力加速度感應器, 震動預測管理軟件, 將比較大的震動/碰撞及時收集到, 並由震動管理軟件所接收, 而後讓 "讀寫磁頭從工做區移動到暫停區, 靜止區" 這樣就保護了硬盤的兩個重要的部件: 磁盤(不會被磁頭劃傷)形成硬盤有壞道或壞的柱面; 讀寫機械臂不會被掛斷. 好的硬盤在先後兩面和四周有緩衝保護層, 使用橡膠作保護層, 同時金屬的外殼比塑料的保護性更好

正是由於, 機械硬盤容易被損壞, 因此如今的筆記本使用起來有不少問題: 要麼開不起機, 要麼速度很是慢. 這些都是因爲硬盤有不少壞道, 有很多柱面被損壞. 都是因爲在使用中不注意, 使用中震動太大形成的