[JavaScript]可顯示英文大寫月份, 僅輸入時間可存完整datetime

在Actual Time僅輸入時間後, 能在DB中存入完整日期

Day	Date	No.	Actual Time	Comments
1	Dec/31/2015	1
2	Jan/1/2016	2
5	Jan/4/2016	3

【Read】(使用者要求要顯示MMM/dd/yyyy)
Actual Time：<asp:Label ID="D1Label" runat="server" Text='<%# Bind("D1","{0:HH:mm}") %>' />
Dosing Date：<asp:Label ID="CaptionD1" runat="server" Text="D1:"></asp:Label>
●後台
從後台撈資料出來後放入Json，再丟到前台進行格式化處理
由於涉及安全性，程式碼不完全公開
        DataTable dt = ds.Tables.Count > 0 ? ds.Tables[0] : new DataTable(); //將查詢結果放到DataTable
        string str_json = JsonConvert.SerializeObject(dt, Formatting.Indented); //將DataTable的內容轉換成JSON格式
        PdD.Text = str_json; //將JSON格式(文字)傳遞到前台

●前台
將抓到的月份轉換成使用者想看的
            calDate(); //呈現計算後的Dosing Date
         
            function calDate() { //日期計算
                var month = new Array(12);
                month[0] = "Jan";
                month[1] = "Feb";
                month[2] = "Mar";
                month[3] = "Apr";
                month[4] = "May";
                month[5] = "Jun";
                month[6] = "Jul";
                month[7] = "Aug";
                month[8] = "Sep";
                month[9] = "Oct";
                month[10] = "Nov";
                month[11] = "Dec";

                    var d = new Date(eval("jsonP[0].Period" + $("#lbPeriod").text() + "_dose"));
                    d.setDate(d.getDate() + Number($("#FormView1_CaptionD1).text()) - 1); //Dosing Date = Period + (Day-1)
                    var strD;
                    if (d.getFullYear() >= 2000)
                        strD = month[d.getMonth()] + "/" + +d.getDate() + "/" + d.getFullYear();
                    else
                        strD = "Undefined";
                    $("#FormView1_DateLabel").text(strD); //顯示使用者想看的格式
                }

藍字的：這時還是顯示數字，作用是依照Peroid與計算的天數差，顯示預計的日期
橘子的：將數字表示的日期，置換月份(js不自帶日期加減，需各自get再串接)，>=2000的作用是避免使用者未設定日期(未設定日期的年份為19xx)

foreach的變化型就賣個關子啦


【Write】

1. 設定輸入欄位的屬性(多一個隱藏欄位)
Actual Time： <asp:TextBox class="HHmm" ID="D1TextBox" runat="server" Text='<%# Eval("D1","{0:HHmm}") %>' /></asp:TextBox>
Actual Time(隱藏的)： <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("D1") %>'></asp:TextBox>

2. 隱藏欄位
將「 $(".HHmm").next().hide();」放在「  $(document).ready(function () { ... })」中

3. 利用「jquery.maskedinput.js」的功能來產生遮罩與限制輸入
            function setMasked() {
                $(".HHmm").mask("99:99", {
                    placeholder: "hh:mm", completed: function () {}
             });

4. 在「completed: function () { ... }」中放入輸入完成時要執行的動作，也就是當輸入完成時，將使用者輸入的稍加處理，放入實際上要回存DB的欄位
            $(this).next().val( //改變輸入框的值

            　　$(this).parent().prev().prev().children().text()  //抓取Dosing Date的日期

            　　+ " " //在日期與時間之間加個空白

            　　+ $(this).val() //取得使用者輸入的時間

            );

參考資料：JavaScript Date() 日期與時間