如何通过单击next和prev按钮更改文本框上的星期日期

时间:2014-04-01 13:17:58

标签: jquery datepicker

我有两个按钮,如

         <input type="button" value="Prev" id="btnPrev"/> //for Previous week date
         <input type="button" value="Prev" id="btnNext"/> // for Next week date

和Textbox一样:

 @Html.TextBoxFor(m => m.START_DATE, new { @id = "txtStartDate", @style = "height:22px;width:100px;border:none;background-color: transparent;text-align:right", @readonly = "readonly" }) -
 @Html.TextBoxFor(m => m.END_DATE, new { @id = "txtEndDate", @style = "height:22px;width:100px;border:none;background-color: transparent;", @readonly = "readonly" })

开始日期文本框用于显示当前周的开始日期,而结束日期文本框用于显示当前周的结束日期。

我有脚本喜欢显示当前周的开始日期和结束日期

    $(document).ready(function () {
        var curr = new Date; // get current date
        var first = curr.getDate() - curr.getDay(); // First day is the day of the month - the day of the week
        var last = first + 6; // last day is the first day + 6
        var startDate = new Date(curr.setDate(first));
        startDate = "0" + (startDate.getMonth() + 1) + "/" + startDate.getDate() + "/" + startDate.getFullYear();
        var endDate = new Date(curr.setDate(last));
        endDate = "0" + (endDate.getMonth() + 1) + "/" + endDate.getDate() + "/" + endDate.getFullYear();
        var A = new Date().getWeek();
        $('#txtStartDate').val(startDate);
        $('#txtEndDate').val(endDate);
        });

但我没有想到如何通过点击下周按钮以及应显示下周结束和上周结束的上一个按钮来改变周日期。请帮助我。

2 个答案:

答案 0 :(得分:1)

我希望这会有所帮助。

JSFIDDLE

$('#picker').datepicker();
$('.next-day').on("click", function () {
var date = $('#picker').datepicker('getDate');
date.setTime(date.getTime() + (1000*60*60*24))
$('#picker').datepicker("setDate", date);
});

$('.prev-day').on("click", function () {
var date = $('#picker').datepicker('getDate');
date.setTime(date.getTime() - (1000*60*60*24))
$('#picker').datepicker("setDate", date);            
});

答案 1 :(得分:0)

得到它。

        $(document).ready(function () {
        var curr = new Date; // get current date
        var first = curr.getDate() - curr.getDay(); // First day is the day of the month - the day of the week
        var last = first + 6; // last day is the first day + 6
        var startDate = new Date(curr.setDate(first));
        startDate = "0" + (startDate.getMonth() + 1) + "/" + startDate.getDate() + "/" + startDate.getFullYear();
        var endDate = new Date(curr.setDate(last));
        endDate = "0" + (endDate.getMonth() + 2) + "/" + endDate.getDate() + "/" + endDate.getFullYear();
        var A = new Date().getWeek();
        $('#txtStartDate').val(startDate);
        $('#txtEndDate').val(endDate);
        $("#btnNext").click(function () {
            var startdt=new Date($('#txtStartDate').val());
            startdt.setDate(startdt.getDate() + 7);// Adding 7 Days
            $('#txtStartDate').val(getDateFormat(startdt));

            var enddt =new Date( $('#txtEndDate').val());
            enddt.setDate(enddt.getDate() + 7); 
            $('#txtEndDate').val(getDateFormat(enddt));
            return false;
        });
        function getDateFormat(d) {
            var month = d.getMonth() + 1;
            return "0" + +month + "/" + d.getDate() + "/" + d.getFullYear();

        }

        $("#btnPrev").click(function () {
            var startdt = new Date($('#txtStartDate').val());
            startdt.setDate(startdt.getDate() - 7); // subtracting 7 before
            $('#txtStartDate').val(getDateFormat(startdt));
            var enddt = new Date($('#txtEndDate').val());
            enddt.setDate(enddt.getDate() - 7); 
            $('#txtEndDate').val(getDateFormat(enddt));
            return false;
        });
       });