在Actual Time僅輸入時間後, 能在DB中存入完整日期
【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() //取得使用者輸入的時間