JSFiddle - React, Tailwind, and code Playground
HTML
<div class="form-group">
<label>Leave From</label>
<input name="from" id="from" type="text" class="form-control" value="" />
</div>
<div class="form-group" id="to_date">
<label>To</label>
<input name="to" id="to" type="text" class="form-control">
</div>
<input type="text" id="hasil" name="hasil" readonly />
JavaScript
var disabledDays = ["3-24-2015", "3-25-2015"];
function nationalDays(date) {
var m = date.getMonth(),
d = date.getDate(),
y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
if ($.inArray((m + 1) + '-' + d + '-' + y, disabledDays) != -1 || new Date() > date) {
return [false];
}
}
return [true];
}
function noWeekendsOrHolidays(date) {
var noWeekend = jQuery.datepicker.noWeekends(date);
return noWeekend[0] ? nationalDays(date) : noWeekend;
}
$(function () {
$("#from").datepicker({
minDate:0,
changeMonth: true,
constrainInput: true,
numberOfMonths: 1,
beforeShowDay: $.datepicker.noWeekends,
onSelect: calculateDays,
onClose: function (selectedDate) {
var day = $("#from").datepicker('getDate');
$("#to").datepicker("option", "minDate", selectedDate);
},
}).on("changeDate",function(ev){
var fromdate = new Date(ev.date);
fromdate.setMonth(fromdate.getMonth()+1);
var finaldate = fromdate.getFullYear()+"-"+fromdate.getMonth()+"-"+fromdate.getDate();
console.log(finaldate);
$("#fromdate").val(finaldate);
});
});
$(function () {
$("#to").datepicker({
minDate:0,
beforeShowDay: $.datepicker.noWeekends,
changeMonth: true,
constrainInput: true,
numberOfMonths: 1,
onSelect: calculateDays,
onClose: function (selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
},
}).on("changeDate",function(ev){
var todate = new Date(ev.date);
todate.setMonth(todate.getMonth()+1);
var finaldate = todate.getFullYear()+"-"+todate.getMonth()+"-"+todate.getDate();
console.log(finaldate);
$("#todate").val(finaldate);
});
});
...