如何在月內選擇自舉日期選取器中的整行

讓我解釋一下我的任務。

例如：8月2017年週二開始，我想在文本框中顯示週二到週六的日期。

如果用戶選擇2017年8月28日意味着我想在文本框中僅顯示週日到週四的日期。同樣我想每個月都得到結果。

在這裏，我已經創建了小提琴 Click here to see the fiddle

var firstDate = moment(value, "DD-MM-YYYY").day(0).format("DD-MM-YYYY"); 
     var lastDate = moment(value, "DD-MM-YYYY").day(6).format("DD-MM-YYYY");

我不知道如何做到這一點。誰能告訴我是否有可能實現這一目標，並提供一些技巧來實現這一點。

感謝

vinoth

來源

2017-08-07 Vinoth

試試這個代碼

比較first date of row與month first date & & last date of row與month last date。

$('#weeklyDatePicker').on('dp.change', function (e) { 
     var _year=e.date.year(), 
     _month=e.date.month(), 
     _date=e.date.date(), 
     _day=e.date.day(), 
     monthFirstDate = new Date(_year, _month, 1), 
     monthLastDate = new Date(_year, _month + 1, 0), 
     firstDate = new Date(_year, _month, _date - _day), 
     lastDate = new Date(_year, _month, _date - _day + 6), 
     fromDate=(firstDate<=monthFirstDate)?monthFirstDate:firstDate, 
     toDate=(lastDate>=monthLastDate)?monthLastDate:lastDate, 
     fromDateFormated=moment(fromDate).format("DD-MM-YYYY"), 
     toDateFormated=moment(toDate).format("DD-MM-YYYY"); 
     $("#weeklyDatePicker").val(fromDateFormated); 
     $("#weeklyDatePickerend").val(toDateFormated); 
    });


 
$(document).ready(function(){ 
 

 

 
    $("#weeklyDatePicker").datetimepicker({ 
 
     format: 'DD-MM-YYYY', 
 
    }); 
 
    $('#weeklyDatePicker').on('dp.change', function (e) { 
 
     var _year=e.date.year(), 
 
     _month=e.date.month(), 
 
     _date=e.date.date(), 
 
     _day=e.date.day(), 
 
     monthFirstDate = new Date(_year, _month, 1), 
 
     monthLastDate = new Date(_year, _month + 1, 0), 
 
     firstDate = new Date(_year, _month, _date - _day), 
 
     lastDate = new Date(_year, _month, _date - _day + 6), 
 
     fromDate=(firstDate<=monthFirstDate)?monthFirstDate:firstDate, 
 
     toDate=(lastDate>=monthLastDate)?monthLastDate:lastDate, 
 
     fromDateFormated=moment(fromDate).format("DD-MM-YYYY"), 
 
     toDateFormated=moment(toDate).format("DD-MM-YYYY"); 
 
     $("#weeklyDatePicker").val(fromDateFormated); 
 
     $("#weeklyDatePickerend").val(toDateFormated); 
 
    }); 
 
});

.bootstrap-datetimepicker-widget tr:hover { 
 
    background-color: #0d75b3; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/bootstrap.datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<div class="container">  
 
    <div class="row"> 
 
     <div class="col-sm-6 form-group"> 
 
      <div class="input-group" id="DateDemo"> 
 
       From Date:<input type='text' id='weeklyDatePicker' placeholder="Select Week" /> 
 
       <br> 
 
        To Date:<input type='text' id='weeklyDatePickerend' placeholder="Select Week" /> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-08-08 04:44:36 Amal

如何在月內選擇自舉日期選取器中的整行

回答

相關問題