locked
datepicker eternicode: changes set dates on open RRS feed

  • Question

  • User379720387 posted

    I have a grid of datepickers allowing a user to set begin and end dates for a holiday schedule.

    Below is a copy of the source:

    each datepicker has a unique name

    values are retrieved from db and are set correctly

    When I click on the datepicker to change the date, it does not display the date from the value attribute, but instead shows:

    @startdate for all date values prior to Dec 31, 2015

    @enddate -1 for all date values Jan 1, 2016 and later

    The very last startHdate and endHdate work correctly.

                                    <div class="col-sm-7 col-md-7 col-lg-4" style="padding-bottom:22px;">
                                    <input class="form-control" type="text" name="hschedname1" id="hschedname" disabled="disabled" value="Holiday: Labor Day" />
                                        </div>
                                    <div class="col-sm-7 col-md-7 col-lg-4 input-group" style="padding-bottom:24px;">
                                        <input class="datepickerZ form-control" type="text" name="startHdate1" id="startdate" value="August 18 2015" />
                                        
                                    </div>
                                    <div class="col-sm-7 col-md-7 col-lg-4 input-group" style="padding-bottom:24px;">
                                        <input class="datepickerZ form-control" type="text" name="endHdate1" id="enddate" value="August 18 2015" />
                                        
                                    </div>
                                    <input type="hidden" name="isHstandard1" value="True" />
                                    <input type="hidden" name="Hscheditemid1" value="3" />
                                    <br /><br/><br/>
                                        <div class="col-sm-7 col-md-7 col-lg-4" style="padding-bottom:22px;">
                                            <input class="form-control" type="text" name="hschedname2" id="hschedname" disabled="disabled" value="Holiday: Thanksgiving" />
                                        </div>
                                    <div class="col-sm-7 col-md-7 col-lg-4 input-group" style="padding-bottom:24px;">
                                        <input class="datepickerZ form-control" type="text" name="startHdate2" id="startdate" value="November 26 2015" />
                                        
                                    </div>
                                    <div class="col-sm-7 col-md-7 col-lg-4 input-group" style="padding-bottom:24px;">
                                        <input class="datepickerZ form-control" type="text" name="endHdate2" id="enddate" value="November 26 2015" />
                                        
                                    </div>
                                    <input type="hidden" name="isHstandard2" value="True" />
                                    <input type="hidden" name="Hscheditemid2" value="4" />
                                    <br /><br/><br/>
                                        <div class="col-sm-7 col-md-7 col-lg-4" style="padding-bottom:22px;">
                                            <input class="form-control" type="text" name="hschedname3" id="hschedname" disabled="disabled" value="Holiday: Winter Break" />
                                        </div>
                                    <div class="col-sm-7 col-md-7 col-lg-4 input-group" style="padding-bottom:24px;">
                                        <input class="datepickerZ form-control" type="text" name="startHdate3" id="startdate" value="November 27 2015" />
                                        
                                    </div>
                                    <div class="col-sm-7 col-md-7 col-lg-4 input-group" style="padding-bottom:24px;">
                                        <input class="datepickerZ form-control" type="text" name="endHdate3" id="enddate" value="November 30 2015" />
                                        
                                    </div>
    

    <script>
        $(document).ready(function () {
            $('.datepickerZ').datepicker({
                format: 'mm/d/yyyy',
                assumeNearbyYear: true,
                autoclose: 'true',
                startView: '',
                todayHighlight: true,
                calendarWeeks: true,
                daysOfWeekHighlighted: "1,2,3,4,5",
                startDate: '@datepickerstartW',
                endDate: '@datepickerendW'
            });
    </script>

    Monday, June 6, 2016 3:20 PM

All replies

  • User61956409 posted

    Hi wavemaster,

    You could try to loop through date inputs to dynamically specify startDate and endDate options of jQuery datepicker plugin based on values of “startHdate*” and “endHdate*” inputs. The following sample using jQuery datepicker plugin works fine on my side, you could refer to it.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    
        <script>
            $(document).ready(function () {
    
                $("input[name*='startHdate']").each(function (index, val) {
                    var sdate = $(this).val();
    
                    var etxt = "input[name*='endHdate" + (parseInt(index) + 1) + "']";
    
                    var edate = $(etxt).val();
    
                    $(this).datepicker({
                        maxDate: new Date(edate),
                        minDate: new Date(sdate)
                    });
    
                    $(etxt).datepicker({
                        maxDate: new Date(edate),
                        minDate: new Date(sdate)
                    });
                })
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div class="col-sm-7 col-md-7 col-lg-4" style="padding-bottom: 22px;">
                    <input class="form-control" type="text" name="hschedname1" id="hschedname" disabled="disabled" value="Holiday: Labor Day" />
                </div>
                <div class="col-sm-7 col-md-7 col-lg-4 input-group" style="padding-bottom: 24px;">
                    <input class="datepickerZ form-control" type="text" name="startHdate1" id="startdate" value="August 18 2015" />
    
                </div>
                <div class="col-sm-7 col-md-7 col-lg-4 input-group" style="padding-bottom: 24px;">
                    <input class="datepickerZ form-control" type="text" name="endHdate1" id="enddate" value="August 18 2015" />
    
                </div>
                <input type="hidden" name="isHstandard1" value="True" />
                <input type="hidden" name="Hscheditemid1" value="3" />
                <br />
                <br />
                <br />
                <div class="col-sm-7 col-md-7 col-lg-4" style="padding-bottom: 22px;">
                    <input class="form-control" type="text" name="hschedname2" id="hschedname" disabled="disabled" value="Holiday: Thanksgiving" />
                </div>
                <div class="col-sm-7 col-md-7 col-lg-4 input-group" style="padding-bottom: 24px;">
                    <input class="datepickerZ form-control" type="text" name="startHdate2" id="startdate" value="November 26 2015" />
    
                </div>
                <div class="col-sm-7 col-md-7 col-lg-4 input-group" style="padding-bottom: 24px;">
                    <input class="datepickerZ form-control" type="text" name="endHdate2" id="enddate" value="November 26 2015" />
    
                </div>
                <input type="hidden" name="isHstandard2" value="True" />
                <input type="hidden" name="Hscheditemid2" value="4" />
                <br />
                <br />
                <br />
                <div class="col-sm-7 col-md-7 col-lg-4" style="padding-bottom: 22px;">
                    <input class="form-control" type="text" name="hschedname3" id="hschedname" disabled="disabled" value="Holiday: Winter Break" />
                </div>
                <div class="col-sm-7 col-md-7 col-lg-4 input-group" style="padding-bottom: 24px;">
                    <input class="datepickerZ form-control" type="text" name="startHdate3" id="startdate" value="November 27 2015" />
    
                </div>
                <div class="col-sm-7 col-md-7 col-lg-4 input-group" style="padding-bottom: 24px;">
                    <input class="datepickerZ form-control" type="text" name="endHdate3" id="enddate" value="November 30 2015" />
    
                </div>
            </div>
        </form>
    </body>
    </html>
    

    Best Regards,

    Fei Han

    Tuesday, June 7, 2016 8:03 AM
  • User379720387 posted

    The start and end dates are the same for all date pickers.  That is not the problem.

    The problem is the dates being shown when the page first loads, are being replaced by something else the moment I click on the text box of the datepicker and and the datepicker opens

    Tuesday, June 7, 2016 11:43 AM
  • User61956409 posted

    Hi wavemaster,

    The problem is the dates being shown when the page first loads, are being replaced by something else the moment I click on the text box of the datepicker and and the datepicker opens

    Do you mean the text (date)of textbox is changed when interactive calendar overlay is showing? You had better to share us a sample that includes jQuery references and html markup, then we will reproduce the issue based on your sample code.

    Best Regards,

    Fei Han

    Friday, June 10, 2016 8:17 AM