如何制作两个文本框数据接受jQuery datepicker插件?

时间:2012-11-02 10:07:09

标签: c# jquery asp.net-mvc datepicker

你能告诉我一些好的教程或一些我可以学习如何制作日期选择器文本框的书吗?

谢谢。

P.S。事实上,当您选择上述日期(从和到)时,我必须有两个文本框和一个按钮进行预订。

3 个答案:

答案 0 :(得分:3)

你可以得到一些很好的教程herejQuery UI DatePicker的简单实现:

<强>的Javascript

$(document).ready(function () {
   $('.txtStartDate, .txtEndDate').datepicker({
       showOn: "both",
       dateFormat: 'dd/mm/yy',
       showAnim: "slideDown",
       showOptions: {
         origin: ["top", "left"]
       },
       firstDay: 1, 
       changeFirstDay: false
   });
});

<强>标记

@model DateTime
@Html.TextBox("", Model.ToString("dd/MM/yyyy"), new { @class = "txtStartDate" })
@Html.TextBox("", Model.ToString("dd/MM/yyyy"), new { @class = "txtEndDate" })

答案 1 :(得分:2)

另一个选项(类似于chridam)是定义一个类,您可以将其用于需要日期选择器的所有文本框(假设它们的选项相同)。

剃刀:

@model DateTime
@Html.TextBox("", Model.ToString("dd/MM/yyyy"), new { @class = "date-picker" })
@Html.TextBox("", Model.ToString("dd/MM/yyyy"), new { @class = "date-picker" })

使用Javascript:

$(document).ready(function () {
   $('.date-picker').datepicker({
      //options...
   });
});

答案 2 :(得分:1)

<强> Asp.Net

<form id="form1" runat="server">
  <asp:TextBox ID="fromDate" runat="server" />
  <asp:TextBox ID="toDate" runat="server" />
 </form>

<强> Jquery的

var dates = $("#fromDate, #toDate").datepicker({
                maxDate: '0',
                changeMonth: true,
                numberOfMonths: 1,
                onSelect: function () { //write your code on selection}
            });