My 2 Date Pickers bind with Angularjs directive. But i validate with java script.
after selecting date it return default date.
Script
<script>
if (datefield.type != "date") { //if browser doesn't support input type="date", initialize date picker widget:
jQuery(function ($) { //on document.ready
$('#start_date').datepicker({
dateFormat: 'yy-mm-dd',
minDate: 0,
onSelect: function (date) {
var date2 = $('#start_date').datepicker('getDate');
date2.setDate(date2.getDate() + 1);
$('#end_date').datepicker('setDate', date2);
//sets minDate to start_date date + 1
$('#end_date').datepicker('option', 'minDate', date2);
}
});
$('#end_date').datepicker({
dateFormat: 'yy-mm-dd',
onClose: function () {
var start_date = $('#start_date').datepicker('getDate');
console.log(start_date);
var end_date = $('#end_date').datepicker('getDate');
if (end_date <= start_date) {
var minDate = $('#end_date').datepicker('option', 'minDate');
$('#end_date').datepicker('setDate', minDate);
}
}
});
});
}
</script>
Html Code
<div class="col-md-5">
<div class="form-group">
<label name="lblOccup1"> Check in</label>
<input type="date" id="start_date" class="form-control" placeholder="Check in" data-ng-model="departuredate"/>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label name="lblOccup1"> Check out</label>
<input type="date" id="end_date" class="form-control" placeholder="Check Out" data-ng-model="returndate"/>
</div>
</div>
<div class="col-md-2">
<a class="link_button2" ng-href="#Url.Action("Booking", "home")?Rooms={{rooms}}&Destination={{des}}&DepartureDate={{departuredate}}&ReturnDate={{returndate}}"> Search </a>
</div>
After press search button i get null value to mvc controller.
Search Form
Controller
What is wrong with this code?
Related
I have two textboxes: txtETCdatefrom and txtETCdateto having classes datetimepicker1 and datetimepicker2 respectively:
<asp:TextBox ID="txtETCdatefrom" runat="server" CssClass="form-control datetimepicker1 col-md-6"></asp:TextBox>
<asp:TextBox ID="txtETCdateto" runat="server" CssClass="col-md-6 datetimepicker2 form-control"></asp:TextBox>
I am using datetimepicker with date only format on both classes(It is working fine if i set minDate to any specific date or moment()).
I want to set minimum date of datetimepicker2 to selected value of datetimepicker1 or value of txtETCdatefrom.
My datetimepicker code is:
$('.datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY',
minDate: moment(),
});
$('.datetimepicker2').datetimepicker({
format: 'DD/MM/YYYY',
//minDate: moment(),
});
I searched about this and found answer for datepicker(using onSelect() function):
$('.datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY',
minDate: moment(),
onSelect: function (date) {
var date1 = $('.datetimepicker1').datetimepicker('getDate');
var date = new Date(Date.parse(date1));
date.setDate(date.getDate() + 1);
var newDate = date.toDateString();
newDate = new Date(Date.parse(newDate));
$('.datetimepicker2').datetimepicker("option", "minDate", newDate);
}
});
$('.datetimepicker2').datetimepicker({
format: 'DD/MM/YYYY',
//minDate: moment(),
});
but it is not working for datetimepicker.
I also tried beforeShow() function like:
$('.datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY',
minDate: moment(),
});
$('.datetimepicker2').datetimepicker({
format: 'DD/MM/YYYY',
//minDate: moment(),
beforeShow: function () {
$(".datetimepicker2").datetimepicker("option", {
minDate: $(".datetimepicker1").datetimepicker('getDate')
});
}
});
but all vain. Also tried onSelectDate() and onShow() functions as suggested in
Set max and min datetime in jquery datetimepicker
don't know what m doing wrong.
After including these functions in code the datetimepicker doesn't show up.
All help will be appreciated. Thank you.
I follow the docs in datepicker official website.
$(function () {
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY',
minDate: moment(),
});
$('#datetimepicker2').datetimepicker({
format: 'DD/MM/YYYY',
});
$("#datetimepicker1").on("dp.change", function (e) {
var oldDate = new Date(e.date);
var newDate = new Date();
newDate.setDate(oldDate.getDate() + 1);
$('#datetimepicker2').data("DateTimePicker").minDate(newDate);
});
});
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.bootcss.com/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
How to get Start Date and End Date using jquery.
For an example:
I need to get output:
Start date - 22/08/2016(should not be greater than today date and should not be auto-selected)
If a person select start date like today date ,end date should be filled automatically after one year date.
End date: 22/08/2017(by default in non-editable text box)
This my HTML code
<div class="form-group">
<label class="control-label">Start Date</label>
<div id="fromdatetimepicker" class="input-group">
<input type="text" class="form-control col-sm-5" placeholder="Select a Start Date" />
<a id="calIcon" class="input-group-addon btn btn-danger">
<span class="glyphicon glyphicon-calendar"></span>
</a>
</div>
</div>
<div class="form-group">
<label for="travelInputName">End Date</label>
<input readonly type="text" class="form-control" id="todatetimepicker">
</div>
This my js code
jQuery("#fromdatetimepicker").datetimepicker({
widgetPositioning: {
horizontal: 'left',
vertical: 'bottom'
},
allowInputToggle : true,
format: 'DD/MM/YYYY',
"minDate": moment()
});
jQuery("#todatetimepicker").datetimepicker({
widgetPositioning: {
horizontal: 'left',
vertical: 'bottom'
},
allowInputToggle : true,
format: 'DD/MM/YYYY',
});
Please, help me! How to do this and thanks in advance.
Try this
jQuery("#fromdatetimepicker").on("dp.change", function (e) {
var start_date = e.date
var end_date = start_date.setFullYear(date.getFullYear() + 1);
var todatetimepicker = jQuery('#todatetimepicker').data("DateTimePicker");
todatetimepicker.date(end_date)
});
Please modify "jQuery("#fromdatetimepicker").datetimepicker" event listener with below code and remove "jQuery("#todatetimepicker").datetimepicker" event listener as such it is redundant.
Please check below snppet.
$( function() {
$( "#fromdatetimepicker" ).datepicker({
dateFormat : 'dd/mm/yy',
onSelect: function(dateText) {
var dateText = dateText.split('/');
var to_date = dateText[0]+'/'+dateText[1]+'/'+(parseInt(dateText[2])+1);
jQuery("#todatetimepicker").val(to_date);
}
});
} );
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div class="form-group">
<label class="control-label">Start Date</label>
<div class="input-group">
<input id="fromdatetimepicker" type="text" class="form-control col-sm-5" placeholder="Select a Start Date" />
<a id="calIcon" class="input-group-addon btn btn-danger">
<span class="glyphicon glyphicon-calendar"></span>
</a>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="travelInputName">End Date</label>
<input readonly type="text" class="form-control" id="todatetimepicker">
</div>
can u try this
$('#dob').datepicker({
onSelect: function(value, ui) {
console.log(ui.selectedYear)
// var op = New date calculation Here
$('#datehidden').val(op);
},
maxDate: '+0d',
yearRange: '1920:2010',
changeMonth: true,
changeYear: true,
});
I am trying to put a range of .datepicker() selection and Bootstrap Datepicker
I would like to disable some days, however not working,
Lets say, Today is Wednesday (04/05/2016) and I would like to restrict the days before first Friday (06/05/2016). For this, I get day of week info from users. Such as; user selected Saturday. So the calendar should start with the first Saturday even today is Wednesday, user will not be able to select previous days.
Here is my .datepicker() view:
<div class="col-sm-2 col-xs-4">
<div class="form-group">
<div id="date-from" class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-2 col-xs-4">
<div class="form-group">
<div id="date-to" class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" class="form-control">
</div>
</div>
</div>
And here is the js code:
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#date-from').datepicker({
//format: 'dd/mm/yy',
datesDisabled: ['05/06/2016', '05/21/2016'], // not working
startDate: '+0d',
weekStart: 1,
beforeShowDay: function(date) {
return date.valueOf() >= now.valueOf();
},
autoclose: true
}).on('changeDate', function(ev) {
if (ev.date) {
if (ev.date.valueOf() > checkout.datepicker("getDate").valueOf() || !checkout.datepicker("getDate").valueOf()) {
var newDate = new Date(ev.date);
newDate.setDate(newDate.getDate());
checkout.datepicker("update", newDate);
}
} else {
checkout.datepicker("update", "");
}
$('#date-to')[0].focus();
});
var checkout = $('#date-to').datepicker({
format: 'dd/mm/yy',
weekStart: 1,
//endDate: '+2d',
beforeShowDay: function(date) {
if (!checkin.datepicker("getDate").valueOf()) {
return date.valueOf() >= new Date().valueOf();
} else {
return date.valueOf() > checkin.datepicker("getDate").valueOf();
}
},
autoclose: true
}).on('changeDate', function(ev) {});
I am working on AngularJS. I am trying to dynamically generate rows when user clicks on "Add New Row" button. Here is my $scope array variable,
$scope.avails = [{"Name":"","startdate":"","enddate":""}];
$scope.addNewRow=function() {
$scope.avails.push({"Name":"","startdate":"","enddate":""});
}
and here is my markup
<div class="row" ng-repeat="ff in avails">
<label>Name</label>
<input type="text" ng-model="ff.Name"/>
<label>Start Date</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" class="form-control" b-datepicker name="startdate" id="startdate{{$index}}" ng-model="ff.startdate" value="{{ff.startdate}}" placeholder="Start Date" >
</div>
<label>End Date</label>
<div class="input-group">
<span class="input-group-addon"> <i class="fa fa-calendar"></i></span>
<input type="text" class="form-control" b-datepicker name="startdate" id="startdate{{$index}}" ng-model="ff.startdate" value="{{ff.startdate}}" placeholder="Start Date" >
</div>
<div>
and I write a directive for date picker like:
.directive('bDatepicker', function() {
return {
restrict: 'A',
require: '?ngModel',
link: function(scope, el, attr,ngModel) {
ngModel.$render = function() {
el.datepicker('update', ngModel.$viewValue || '');
};
el.datepicker({
autoclose:true,
format:'mm/dd/yyyy'
}).on('changeDate', function(value) {
var dateStrToSend = (value.date.getMonth() + 1) +'/'+value.date.getDate()+'/'+value.date.getFullYear();
scope.$apply(function () {
ngModel.$setViewValue(dateStrToSend);
});
$(".datepicker").hide();
});
}
};
})
Now I am able to create a new row when user clicks on Add New Button, Each row contains start and end date pickers, when user select a date under start date picker, I need to set that date as startdate of corresponding end date picker.
Since I am applying directive to element as a attribute, how to change value of another element from this directive?
This is what I used to solve the problem.
Basically you set the "min" value on the end date input to the selected value of the start date.
Start Date
<input type="text" id="start-date" class="form-control" placeholder="Start Date"
datepicker-options="UI.datepickerOptions"
datepicker-popup="yyyy-MM-dd"
ng-model="MODEL.date_start"
ng-required="true">
End Date
<input type="text" id="end-date" class="form-control" placeholder="End Date"datepicker-options="UI.datepickerOptions"
datepicker-popup="yyyy-MM-dd"
ng-model="MODEL.date_end"
min="MODEL.date_start"
ng-required="true">
And the controller where we watch for changes on the first datepicker:
// update the end date based on the start date
$scope.$watch('MODEL.date_start', function (newVal, oldVal) {
if(!newVal) return;
// if the new start date is bigger than the current end date .. update the end date
if($scope.MODEL.date_end){
if( +$scope.MODEL.date_end < +$scope.MODEL.date_start ){
$scope.MODEL.date_end = newVal;
}
} else {
// just set the end date
$scope.MODEL.date_end = newVal;
}
});
Edit: I'm using the Angular UI Bootstrap datepicker http://angular-ui.github.io/bootstrap/#/datepicker
Modify the directive to optionally take the minDate into account. E.g.:
.directive('bDatepicker', function($parse){ // ADD DEPENDENCY ON $parse
//...other code the same...
link: function(scope, el, attr,ngModel) {
//...other code the same...
if( attr.minDate != null && attr.minDate != "" ) {
scope.$watch($parse(attr.minDate), function(newval) {
el.datepicker("option", "minDate", newval);
});
}
}
Use it as:
<input type="text" class="form-control" b-datepicker min-date="ff.startDate"
name="endDate" id="endDate{{$index}}" ng-model="ff.endDate"
placeholder="End Date" />
The same principle can be used for the max date as well.
By the way, specifying value with ng-model is redundant.
Try This One
$('#SDate').datepicker({
minDate: 0,
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
onClose: function (selectedDate) {
$("#EDate").datepicker("option", "minDate", selectedDate);
}
});
$('#EDate').datepicker({
minDate: 0,
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
onClose: function (selectedDate) {
$("#SDate").datepicker("option", "maxDate", selectedDate);
}
});
What I want to achieve is to block out dates in the Jquery Datepicker that have already been booked. So far I have managed to build a working form with a functioning Datepicker that uses $_POST to send data to my database. I know that I should be using the BeforeShowDay Jquery function but I can't quite figure out how to implement it. Let me walk you through my code.
<?php require_once('inc/header.php');
Connect to the database using PDO and use prepare to input the data. All working fine.
require('database.php');
$stmt = $db->prepare("INSERT INTO besucher (name, surname, email, guests, fromDate, toDate, questions) VALUES (?, ?, ?, ?, ?, ?, ?)");
$stmt->bindParam('1', $_POST['Name']);
$stmt->bindParam('2', $_POST['LastName']);
$stmt->bindParam('3', $_POST['Email']);
$stmt->bindParam('4', $_POST['Guests']);
$stmt->bindParam('5', $_POST['From']);
$stmt->bindParam('6', $_POST['To']);
$stmt->bindParam('7', $_POST['Questions']);
$stmt->execute();
This is where I retrieve the info from the database.
try {
$results = query("SELECT fromDate, toDate FROM besucher");
} catch (Exception $e) {
echo "Data could not be retrieved from the database.";
exit;
}
?>
The form itself.
<!-- Begin page content -->
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="page-header">
<h1>Make a booking enquiry</h1>
</div>
</div>
</div><!--endrow-->
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form role="form action="form.php" method="post">
<div class="form-group">
<label for="Name">First Name</label>
<input type="text" class="form-control" id="Name" name="Name" placeholder="Enter First Name" required>
</div>
<div class="form-group">
<label for="LastName">Surname</label>
<input type="text" class="form-control" id="LastName" name="LastName" placeholder="Enter Surname" required>
</div>
<div class="form-group">
<label for="Email">Email</label>
<input type="email" class="form-control" id="Email" name="Email" placeholder="Enter Email" required>
</div>
<div class="form-group">
<label for="Guests">Number of Guests</label>
<input type="number" id="Guests" class="form-control" name="Guests" placeholder="z.b. 4" required>
</div>
<div class="form-group">
<label for="From">From <span class="glyphicon glyphicon-calendar"></span></label>
<input type="text" id="From" name="From" class="form-control" required>
</div>
<div class="form-group">
<label for="To">To <span class="glyphicon glyphicon-calendar"></span></label>
<input type="text" id="To" name="To" class="form-control" required>
</div>
<div class="form-group">
<label for="textarea">Questions?</label>
<textarea class="form-control" id="textarea" name="Questions" rows="3"></textarea>
</div>
<div class="form-group">
<label for="checkbox" class="sr-only">Checkbox</label>
<input id="checkbox" type="checkbox"> I would like to recieve emails from Muscheltraum
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div><!--endrow-->
</div><!--container-->
</div><!--wrap-->
<?php require_once('inc/footer.php'); ?>
This is the datepicker.js file code where I want to put the BeforeShowDay function. Unfortunately, I don't know how to get the fromDate and toDate from my SELECT query into my date-picker and how that would fit into the below code. It's really frustrating because I know exactly what I want to do and how the pieces should fit together but I just can't work how to implement it.
From the Jquery UI API
beforeShowDayType: Function( Date date )
Default: null
A function that takes a date as a parameter and must return an array with:
[0]: true/false indicating whether or not this date is selectable
[1]: a CSS class name to add to the date's cell or "" for the default presentation
[2]: an optional popup tooltip for this date
The function is called for each day in the datepicker before it is displayed.
$.datepicker.setDefaults( $.datepicker.regional[ "de" ] );
$(function() {
$( "#From" ).datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
numberOfMonths: 1,
gotoCurrent: true,
minDate:0,
maxDate: "+1y",
onClose: function( selectedDate ) {
$( "#To" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#To" ).datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
numberOfMonths: 1,
gotoCurrent: true,
maxDate: "+1y",
onClose: function( selectedDate ) {
$( "#From" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
Basic idea, didn't test but it should work.
PHP
Let's assume you have your dates to disable in an array in PHP
$disablethese = array("2014-01-03","2014-01-13","2014-01-23");
Print your From Date field with disabled dates in data attribute using json_encode
<input type="text" id="From" name="From" class="form-control" required data-disablethese="<?=json_encode($disablethese)?>">
JQuery
var disablethese = $("#From").data("disablethese"); //this will auto-decode JSON to Array
Now you can use disablethese variable in your beforeShowDate
var disablethese = ["2014-01-03","2014-01-13","2014-01-23"];
$('input').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ disablethese.indexOf(string) == -1 ]
}
});
JSFiddle Example
<?php
include'db.php';
$Pro_id = 4;
$dateslistselect1[]='';
$queryres = mysqli_query($conn, "SELECT start_date,end_date FROM table_name WHERE id='".$Pro_id."' AND YEAR(start_date) = YEAR(CURDATE()) OR YEAR(start_date) = YEAR(CURDATE()) + 1") or die(mysqli_error($conn));
while($row = mysqli_fetch_array($queryres))
{
$start = strtotime($row['start_date']);
$end = strtotime($row['end_date']);
for ($i1=$start; $i1<=$end; $i1+=86400) {
$dateslistselect1[]= '"'.date('d-m-Y',$i1).'"';
}
}
$dateslistselect1=array_filter($dateslistselect1);
$totaldayslist1 =implode(", ", $dateslistselect1);
?>
<script>
var disableddates = [<?php echo $totaldayslist1; ?>];
function DisableSpecificDates(date) {
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [disableddates.indexOf(string) == -1];
}
</script>
<script type="text/javascript">
(function( $ ) {
var disableddates = [];
$("#in").datepicker({
minDate: new Date(),
dateFormat: "mm-dd-yy",
beforeShowDay: DisableSpecificDates,
numberOfMonths: 1,
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() + 1);
$("#out").datepicker("option", "minDate", dt);
}
});
$("#out").datepicker({
minDate: new Date(),
dateFormat: "mm-dd-yy",
beforeShowDay: DisableSpecificDates,
numberOfMonths: 1,
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate());
$("#out").datepicker("option", "maxDate", dt);
}
});
/* $( ".datepicker" ).datepicker( "option", "maxDate", dt );*/
})( jQuery );
</script>