BootStrap 相關以及 date相關

日曆 calendar

jQuery 和 Bootstrap 4

相關引用文件

<link rel="stylesheet" href="bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery.bootstrap.year.calendar.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="js/jquery.bootstrap.year.calendar.js"></script>

html結構

<div class="container">
<div class="calendar"></div>
</div>

初始化之後即可使用

$(function(){

  $('.calendar').calendar();
});

其他配置參數以及事件請參考

 http://www.htmleaf.com/jQuery/Calendar-Date-Time-picker/201803075007.html

datepicker

相關引用文件

<script src="../Scp/bootstrap-datepicker.js" type="text/javascript"></script>

<link href="../Styles/datepicker.css" rel="stylesheet" type="text/css" />

html結構

<asp:TextBox ID="txb_voudateStart" Class="datepicker" runat="server" Width="47%" AutoComplete="off"></asp:TextBox>

或者

<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012">
<span class="add-on"><i class="icon-th"></i></span>
</div>

初始化之後可以使用

$(function(){

  $(".datepicker").datepicker();

});

其他配置參數以及事件請參考

https://vitalets.github.io/bootstrap-datepicker/

https://medium.com/@changpeiwen/bootstrap-datapicker2019%E4%B8%AD%E6%96%87%E5%8C%96%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-f8f1bf162c40

datetimepicker

相關引用文件

<script type="text/javascript" src="/scripts/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/moment.min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href="/Content/bootstrap-datetimepicker.css" />

html結構

<div class="form-group">
  <div class="input-group date" id="datetimepicker1">
    <input type="text" class="form-control" />
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>

初始化之後可以使用

$(function(){

  $('#datetimepicker1').datetimepicker();
});

datetimepicker大致上跟datepicker差不多

這裡補充語言包

https://github.com/moment/moment/tree/master/locale

參考:

https://ithelp.ithome.com.tw/articles/10188890

https://kknews.cc/zh-tw/code/e3zgmar.html

html內建date

<input type="date" class="form-control" id="date" name="date">

BootStrap相關

主要是介紹字體檔案

以及各個檔案可能代表的意思

BootStrap的環境建置至少需要三個檔案

bootstrap.min.css、jquery.min.js、bootstrap.min.js

順序為 css js js 不然可能會因為css尚未載入導致js先完成載入


參考 https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/239462/














留言

張貼留言

這個網誌中的熱門文章

無法載入檔案或組件 'System.IO.Compression' 或其相依性的其中之一。

圖片
曾經在拿取檔案的時候發生過這個問題 我不清楚究竟是版本的問題還是(應該不是版本的問題，因為我從我的夥伴手中拿它可以跑的程式，修改Config後仍然有問題) 主要的問題可能是因為package的問題，時常因為package跟參考以及nuget和WebConfig有不同而出現版本問題 遇到上述問題的話可能都要檢查以上三個檔案 建議是直接複製查詢 然後把「你認為不該存在的」參考給移除。 我自己本人是只留下參考中的檔案，是會把package和WebConfig的依賴給註解後再使用nuget重新安裝。 題外話抱怨 package.Config貌似就是參考的引入，但是不知道為啥連那邊都會跟參考互相衝突，微軟真的不打算修一下逆? 補充說明: 比如說遇到這個錯誤 上面有寫明說 Newtonsoft.Json culture = neutral publicKeyToken = 30ad4fe6b2a6aeed version = 6.0.0.0 就可以在web.config中寫這段加入  <dependentAssembly>    <assemblyIdentity name="Newtonsoft.Json" culture="neutral" publicKeyToken="30ad4fe6b2a6aeed"/>    <bindingRedirect oldVersion="0.0.0.0-6.0.0.0" newVersion="6.0.0.0"/>  </dependentAssembly> oldVersion - 那些版號要對應 - 可以用 - 來包含版號區間。 注意，newVersion不代表一定比oldVersion高。換句話說也有可能高版本全部要用低版本的dll（不過這種情景比較少 ，因為一般都是高版本會向下兼容） 不過這種方法不太建議，一律建議使用最上面的方法 參考 http://shaurong.blogspot.com/2020/02/systemiocompression.html
閱讀完整內容

MongoDB 入門

圖片
 MongoDB是一個NoSQL(非關聯性資料庫) 主要的儲存方式是 一個DB => 底下為一個Collection (類似Table) => 接著是文檔(docume) 存的資料型態為 BSON 是一種JSON的變體 如這樣 ID 自動生成 如SN 為唯一值 name sort之類的數值都是自己產生的 常用語法 通常都是以 db.CollectionName 開頭 find() 類似where 不輸入為全搜尋 insertOne({colname : data , colname2 :"data2"}) insert 用逗號分隔 insertMany([{colname : data} , {colname2 :"data2"}]) 如上 只是有中括號用來代表陣列 find().limit(N) 只回傳N筆 類似select() find().skip(N) 略過N筆後 類似skip() find().sort({colname : 1 , colname2 : -1}) 1是升冪 -1降冪 find()進階 => find({colname : 3} , {colname : 1 , colname2 : 0}) 這段的意思是 依照前面大括內的where 搜尋後 依照後面的select 條件選出 1是要輸出 0是不要輸出 假如只有0 則是 除了這些以外都要輸出  通常 1 跟 0 同時出現的時候是 _id這個字樣 因為這個是會自動返回的字樣 find(colname : {$gt : 3})  gt 大於 lt 小於 gte 大於等於 lte 小於等於 eq 等於 in => {$in :[ 1 , 3]} 一或三 nin => {$nin :[ 1 , 3]} 不等於1 或 3 都出 colname : { $exists : 1 } 代表這個colname存在的話則顯示 (nosql 因此型態可能不同) 0則是沒有的顯示 colname : {$regex :{/data/}} 正則表達式 找所有data  countDocuments() 總數 ex 找大於等於3小於等於5的 db.CollName.find(colname : {$gte : 3 , $let : 5}) 參考 : h...
閱讀完整內容

javascript 更改屬性及創建標籤

雖然應該是一些很基本的東西 但是我的前端其實蠻破的，所以筆記一下關於這個東西 //-----------------------------------1 如果要呈現某種屬性的話 就用 document.querySelector('id').setAttribute('readonly', true); 如果要刪除(隱藏)某種屬性的話就用 document.querySelector('id').removeAttribute('readonly'); //-----------------------------------2 $(document).ready(function () {         //取目標Tag為img者          //getElementsByTagName 不能使用forEach走訪 只好使用for走訪         var varTaglist = document.getElementsByTagName('img');         for (let i = 0; i < varTaglist.length; i++) {             //走訪建立id用於區分點選的目標             varTaglist[i].setAttribute('id', 'imgID' + i)             //走訪建立onclick屬性             varTaglist[i].setAttribute('onclick', 'imgclick(id)');         }     });     //設定屬性值 part2     var imgclick = function ...
閱讀完整內容