2014-12-29 83 views
1

好,的JQuery的DatePicker在ASP.net

我試着去把日期選取器ASP.net形式..

我看到這個代碼可以做到這一點..

<script> 
$(function() { 
    $("#<%= txtDate.ClientID %>").datepicker(); 
}); 
</script> 

<form id="form1" runat="server"> 
    <div> 
    <asp:TextBox ID="txtDate" runat="server" /> 
    </div> 
</form> 

林只是想知道如何應用驗證和如何顯示錯誤信息..?

驗證,如格式,如果我把2日,1日2次< ..和日期>今天等。

很新的JQuery的,任何幫助,將不勝感激!

+0

驗證爲在哪?必需\格式? –

+0

對不起,不清楚,我編輯了這個問題... – Rifshan

+0

也許你想要jQuery驗證。在這裏檢查http://jqueryvalidation.org/ –

回答

1

腳本改成這樣

<script> 
$(function() { 
$("input[id$=txtDate]").datepicker(); 
}); 
</script> 

這將讓與txtDate的確切ID輸入元素。

$("input[id$=txtDate]").datepicker(); 

這裏是你可以檢查什麼驗證

var txtValue=$("input[id$=txtDate]").val(); 
if(txtValue) 
{ 
//it means textbox has some value proceed further. 
} 
+0

如果你能解釋這裏發生了什麼,這將是偉大的... 以及如何使用此代碼應用驗證和錯誤消息? – Rifshan

+0

現在檢查更新的答案是否清楚或需要更多解釋。 – Mairaj

+0

這使得它更清楚..謝謝..如果我要在問題結束時提及驗證,該怎麼辦? – Rifshan

2

試試這個,如果你的尋找驗證。

<script> 
$(function() { 
    $("#<%= txtDate.ClientID %>").datepicker({ 
       minDate:0, 
       dateFormat: 'dd-mm-yy', 
       showOtherMonths: true, 
       onSelect: function(selectedDate) { 
        console.log(selectedDate); 
        // Here you can do all the validation you want. 
       } 
    }); 
}); 
</script> 
2

我拿出了我的代碼。如果您瞭解jQuery/Javascript,該代碼是自我解釋的。

var dateToday = new Date(); 
var fromDate = (dateToday.getMonth() + 1) + "/" + dateToday.getDate() + "/" + dateToday.getFullYear() 
var toDate = (dateToday.getMonth() + 1) + "/" + dateToday.getDate() + "/" + dateToday.getFullYear() 

//初始化沒有fromdate

$('#datepicker1').datepicker({ 
    todayBtn: "linked", 
    multidate: false, 
    autoclose: true, 
    todayHighlight: true 
}); 

//處理沒有fromdate點擊

$('#datepicker1').datepicker('setDate', fromDate); 

$('#datepicker1').datepicker().on('changeDate', function (e) { 
    fromDate = $('#datepicker1').val().toString(); 
    if (fromDate > toDate) { 
     toDate = fromDate; 
     $('#datepicker2').datepicker('setDate', toDate); 
    } 
}); 

//初始化TODATE

$('#datepicker2').datepicker({ 
    todayBtn: "linked", 
    multidate: false, 
    autoclose: true, 
    todayHighlight: true 
}); 

//處理TODATE點擊

$('#datepicker2').datepicker('setDate', toDate); 

$('#datepicker2').datepicker().on('changeDate', function (e) { 
    toDate = $('#datepicker2').val().toString(); 
    if (toDate < fromDate) { 
     fromDate = (new Date(toDate).getMonth() + 1) + "/01/" + new Date(toDate).getFullYear(); 
     $('#datepicker1').datepicker('setDate', fromDate); 
    } 
}); 

我忘了提,我使用這個https://github.com/eternicode/bootstrap-datepicker/blob/release/docs/index.rst