2016-04-18 5 views
1

Я использую следующий код я не знаю, как выделить выбранные даты, и как добавить CSS для выбранных датвыберите STARTDATE EndDate Диапазон дат ВЫСВЕТИТЬ JQuery Ui Datepicker

Вот мой код.

<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> 

    $(function() { 
    $("#from").datepicker({    
     dateFormat: 'dd/mm/yy', 
     numberOfMonths: 2, 
     autoclose: true, 
     minDate:0, 

     onClose: function(selectedDate) { 
     $("#to").datepicker("option", "minDate", selectedDate); 
     $("#to").datepicker("show"); 
     } 
    }); 
    $("#to").datepicker({    
     dateFormat: 'dd/mm/yy', 
     numberOfMonths: 2, 
     minDate:0, 
     autoclose: true, 


    }); 

    }); 
</script> 


</head> 
<body> 

    <label for="from">From</label> 
    <input type="text" id="from" name="from" value="19/04/2016"> 
    <label for="to">to</label> 
    <input type="text" id="to" name="to" value="29/04/2016"> 

Мне нужно выделить, как на изображении ниже

enter image description here

Пожалуйста, помогите мне, как выделить. Спасибо

+0

Если я правильно прочитал, когда выбраны дата '# from' и дата' # to', вы хотите выделить что-то. Что именно вы хотите выделить? – Twisty

+0

Я хочу выделить (addClass -> цвет фона.) Дату между startdate и enddate. Пожалуйста, проверьте мой прикрепленный вид экрана. благодаря –

ответ

0

Да, я исправил проблему, теперь ее работа.

beforeShowDay: function(date){ 
var startDate = $('#reportFrom').val(); 
var endDate = $('#reportTo').val(); 
startDate = startDate.split('/'); 
endDate = endDate.split('/'); 
startDate = new Date(startDate[2], (startDate[1]-1), startDate[0]); 
endDate = new Date(endDate[2], (endDate[1]-1), endDate[0]); 

if ($.trim(startDate) != '' && $.trim(endDate) !='') { 
    if(($.trim(startDate) == $.trim(date)) && ($.trim(endDate) == $.trim(date))) { 
    return [true, 'dp-highlight dp-end-highlight dp-start-highlight']; 
    } 
    if($.trim(startDate) == $.trim(date)) { 
    return [true, 'dp-highlight dp-start-highlight']; 
    } 
    if(date < endDate && date > startDate) { 
    return [true, 'dp-highlight']; 
    } 
    if($.trim(endDate) == $.trim(date)) { 
    return [true, 'dp-highlight dp-end-highlight']; 
    } 

    return [true, '']; 
} 
} 

 Смежные вопросы

  • Нет связанных вопросов^_^