2017-07-08 6 views
-1
I have one dropdown and two textbox on my page. Now i have to bind the value 
based on dropdown value. 

My question is when i am select This Week from dropdown that time it will 
display wrong date when first date of month on second textbox. 

Schauen Sie sich das folgende Beispiel an. Es funktioniert gut an anderen Datum des Monats, aber wenn wählen Sie '07/01/2017' dann ist es so '01/06/2017' statt '01/07/2017' auf zweiten Textkasten, wenn wir wählen Diese Woche.Datumsfilter funktioniert am ersten Tag des Monats

$(document).on("change","#selectDates",function() { 
 
      var dropValue = document.getElementById('selectDates').value; 
 
      //All 
 
      if (dropValue == "1") { 
 
       $('#txtDateFrom').val(''); 
 
       $('#txtDateTo').val(''); 
 
      } 
 
       //Today 
 
      else if (dropValue == "2") { 
 
       var back_GTM = new Date(); 
 
       $('#txtDateFrom').val(Back_date(back_GTM)); 
 
       $('#txtDateTo').val(Back_date(back_GTM)); 
 
       
 
      } 
 
       //This Week 
 
      else if (dropValue == "3") { 
 
       //var curr = new Date; // get current date 
 
       var curr = new Date('07/01/2017'); // 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 firstday = new Date(curr.setDate(first)); 
 
       var lastday = new Date(curr.setDate(last)); 
 

 
       $('#txtDateFrom').val(Back_date(firstday)); 
 
       $('#txtDateTo').val(Back_date(lastday)); 
 
       
 
      } 
 
      }); 
 
      
 
      function Back_date(back_GTM) { 
 
      var b_dd = back_GTM.getDate(); 
 
      var b_mm = back_GTM.getMonth() + 1; 
 
      var b_yyyy = back_GTM.getFullYear(); 
 
      if (b_dd < 10) { 
 
       b_dd = '0' + b_dd 
 
      } 
 
      if (b_mm < 10) { 
 
       b_mm = '0' + b_mm 
 
      } 
 
      return back_date = b_dd + '/' + b_mm + '/' + b_yyyy; 
 
     }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="select-style"> 
 
       <select id="selectDates"> 
 
        <option value="1" selected>All</option> 
 
        <option value="2">Today</option> 
 
        <option value="3">This Week</option> 
 
        </select> 
 
      </div> 
 
      <br />   <br /> 
 

 
      <div class="input-group input-large" data-date="13/07/2013" data-date-format="dd/mm/yyyy"> 
 
       <span class="input-group-addon">From</span> 
 
       <input type="text" id="txtDateFrom" class="form-control dpd1" name="from"> 
 
       <span class="input-group-addon">To</span> 
 
       <input type="text" id="txtDateTo" class="form-control dpd2" name="to"> 
 
      </div>

Antwort

1

Sie sollten zwei Datumsobjekte für die Fälle schaffen, in der eine Woche 2 Monate überlappt.

Da, wenn Sie das Datum auf -5 eingestellt haben, ab dem 1. Juli 2017 berechnet es das Datum bis Sonntag 25. Juni.
Aber jetzt hat sich der Monat geändert!

Wenn Sie das Datum auf den letzten Tag der Woche setzen, also 1, bleibt der Monat im Datumsobjekt.

Es ist also die Lösung, zwei verschiedene Datumsobjekte zu haben, um die Daten separat zu manipulieren.

$(document).on("change","#selectDates",function() { 
 
    var dropValue = document.getElementById('selectDates').value; 
 
    //All 
 
    if (dropValue == "1") { 
 
    $('#txtDateFrom').val(''); 
 
    $('#txtDateTo').val(''); 
 
    } 
 
    //Today 
 
    else if (dropValue == "2") { 
 
    var back_GTM = new Date(); 
 
    $('#txtDateFrom').val(Back_date(back_GTM)); 
 
    $('#txtDateTo').val(Back_date(back_GTM)); 
 

 
    } 
 
    //This Week 
 
    else if (dropValue == "3") { 
 
    //var curr = new Date; // get current date 
 
    var curr = new Date('07/01/2017'); // get current date 
 
    var curr2 = new Date('07/01/2017'); // get current date - Second date object. 
 
    
 
    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 firstday = new Date(curr.setDate(first)); 
 
    var lastday = new Date(curr2.setDate(last)); 
 

 
    $('#txtDateFrom').val(Back_date(firstday)); 
 
    $('#txtDateTo').val(Back_date(lastday)); 
 

 
    } 
 
}); 
 

 
function Back_date(back_GTM) { 
 
    var b_dd = back_GTM.getDate(); 
 
    var b_mm = back_GTM.getMonth() + 1; 
 
    var b_yyyy = back_GTM.getFullYear(); 
 
    if (b_dd < 10) { 
 
    b_dd = '0' + b_dd 
 
    } 
 
    if (b_mm < 10) { 
 
    b_mm = '0' + b_mm 
 
    } 
 
    return back_date = b_dd + '/' + b_mm + '/' + b_yyyy; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="select-style"> 
 
    <select id="selectDates"> 
 
    <option value="1" selected>All</option> 
 
    <option value="2">Today</option> 
 
    <option value="3">This Week</option> 
 
    </select> 
 
</div> 
 
<br />   <br /> 
 

 
<div class="input-group input-large" data-date="13/07/2013" data-date-format="dd/mm/yyyy"> 
 
    <span class="input-group-addon">From</span> 
 
    <input type="text" id="txtDateFrom" class="form-control dpd1" name="from"> 
 
    <span class="input-group-addon">To</span> 
 
    <input type="text" id="txtDateTo" class="form-control dpd2" name="to"> 
 
</div>

+0

Danke, es ist meine Zeit sparen .. –

+0

Ich rollte zurück zu meiner ersten Idee ... Um zwei Datumsobjekte zu verwenden. Wenn Sie den letzten Tag vor dem ersten Tag festlegen, wird das Problem am Ende des Monats nicht behoben. Wenn Sie "28.06.2017" einstellen ... Ergebnis ist vom 25/07/2017 bis 01/07/2017, was falsch ist. –

+0

Yup.it zeigt falsches Datum an. –

0

Für neues Datum der Erstellung sollten Sie Jahr, Monat Index und das Datum des Monats als prameters passieren. Beispiel wie folgt:

var curr = new Date(2017,6,1); 

muss Nach im Code festgelegt werden:

// Needs to fix this 
var curr = new Date('07/01/2017'); 
+0

Dank für die Wiedergabe ..! –

Verwandte Themen