I am using the bootstrap4 gijgo datepicker and the below code works fine:
<div id="myDatePicker" class="form-group" style="display: none;">
<label asp-for="Test.Date" class="control-label">Date</label>
<input id="datepicker" width="276"/>
<span asp-validation-for="Test.Date" class="text-danger"></span>
</div>
The problem comes in when I add 'asp-for'. Googles default datepicker appears and breaks my datepicker.
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:MM/dd/yyyy}")]
public DateTime ExpiryDate { get; set; }
<div id="myDatePicker" class="form-group" style="display: none;">
<label asp-for="Test.Date" class="control-label">Date</label>
<input asp-for="Test.Date" id="datepicker" width="276"/>
<span asp-validation-for="Test.Date" class="text-danger"></span>
</div>
$('#datepicker').datepicker({
uiLibrary: 'bootstrap4',
format: 'dd/mm/yyyy',
minDate: Date.now(),
maxDate: function() {
var date = new Date();
date.setDate(date.getDate()+5);
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
}
});
This works fine in Firefox.
I fixed it by changing:
<input asp-for="Test.Date" id="datepicker" width="276"/>
to
<input type="text" asp-for="Test.Date" id="datepicker" width="276"/>
Related
I am trying to set a default value in my bootstrap datetimepicker, but it doe not set up with the default value.
var fromDate = "2022-08-24T11:24:00";
$('#inputFromDate').datetimepicker({
format: 'DD/MM/YYYY HH:mm',
useCurrent: false,
defaultDate: new Date(new Date(fromDate).setHours(23, 59))
});
And my input field looks like this
<div class="input-group" id="inputFromDate">
<input type='text' id="FromDate" name="FromDate" class="form-control valid" placeholder="From Date" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Can anyone help with this?
defaultDate: "24/08/2022 11:24";
or
defaultDate: (new Date()).toLocaleString();
I'm using Boostrap datetime picker to make reservations in fullcalendar.
I would like to pre-fill my datetime piker with the selected date and time when clicking the calendar.
With the following code I can pre-fill the time but not the date and I don't know why. I found that I should just change the format I want to display, but after doing that, the date is not being pre-filled.
select: function(inform) {
var date_from= new Date(inform.startStr);
var date_to= new Date(inform.endStr) ;
let currentDate = new Date();
if (date_from >= currentDate) {
$('#exampleModalToggle').modal('show');
console.log(' date clicked bigger than current date, you can do reservation')
$(".fc-highlight").css("background", "#ffc800", "important!");
$(function() {
$("#start_date_picker").datetimepicker({
format: 'yyyy-MM-dd',
locale: "fr",
useCurrent:false,
defaultDate: date_from,
});
$("#start_hour_picker").datetimepicker({
format: 'HH:mm',
useCurrent:false,
defaultDate: date_from,
});
$("#end_date_picker").datetimepicker({
format: 'yyyy-MM-dd',
useCurrent:false,
defaultDate: date_to,
});
$("#end_hour_picker").datetimepicker({
format: 'HH:mm',
useCurrent:false,
defaultDate: date_to,
})
});
}
},
<!--Start Date-->
<div id="start_date" class="add_reservation_subtitles pb-3" style="margin-left: 28px;">
<input id="start_date_input" data-provide="datepicker" name="start_date" type="date"
lang="fr" id="datepicker_second" class="datepicker1" style="margin-left: 28px;" required>
<input name="start_hour" type="time" lang="fr" class="timepicker modal_rigth_elements"
required>
</div>
<!--End Date-->
<div id="end_date" style="margin-left: 28px;" class="add_reservation_subtitles pb-3 ">
<input id="end_date_input" type="date" lang="fr" class="date-picker"
style="margin-left: 28px;" required>
<input name="end_hour" type="time" lang="fr" class="timepicker modal_rigth_elements"
required>
</div>
I have tried different formats, like yyyy-mm-dd, 'mm-dd-yyyy' , 'mm/dd/yyyy' and nothing is working. I don't even have error messages. So I don't know what is happening.
I'm using this datetimepicker :
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
Thansk a lot for all your help
I'm creating a web app in angularJS with ASP.NET, here is my JavaScript of a datepicker:
$('#sandbox-container input').datepicker({
autoclose: true
});
$('#sandbox-container input').on('show', function (e) {
console.debug('show', e.date, $(this).data('stickyDate'));
if (e.date) {
$(this).data('stickyDate', e.date);
} else {
$(this).data('stickyDate', null);
}
});
$('#sandbox-container input').on('hide', function (e) {
console.debug('hide', e.date, $(this).data('stickyDate'));
var stickyDate = $(this).data('stickyDate');
if (!e.date && stickyDate) {
console.debug('restore stickyDate', stickyDate);
$(this).datepicker('setDate', stickyDate);
$(this).data('stickyDate', null);
}
});
The code in ASPX is the following:
<div id="sandbox-container" class="row">
<div class="col-lg-offset-4 col-md-offset-4 col-sm-offset-4 col-xs-offset-2">
<div class="row">
<input type="text" ng-model="datefrm" date-format="dd-MM-yyyy" class="textboxandbutton" placeholder="From" date-only />
</div>
</div>
<div class="col-lg-offset-4 col-md-offset-4 col-sm-offset-4 col-xs-offset-2">
<div class="row">
<input type="text" ng-model="dateto" date-format="dd-MM-yyyy" class="textboxandbutton" placeholder="To" date-only>
</div>
</div>
</div>
The current format is MM/dd/yyyy. This is how the date is showing:
02/08/2017
I need to change the date format to:
dd-MM-yyyy
The data which I want to see is:
08-02-2017
All the help is appreciated!
Just add format option of datepicker:
format: 'dd-mm-yyyy'
Please find below snippet for more information
$('#sandbox-container input').datepicker({
autoclose: true,
format: 'dd-mm-yyyy'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css" rel="stylesheet"/>
<div id="sandbox-container">
<input type="text" type="text" class="form-control" />
</div>
The following code will work:
var date = "01/24/1977";
var datearray = date.split("/");
var newdate = datearray[0] + '-' + datearray[1] + '-' + datearray[2];
I implement bootstrap datepicker to my project on Symfony and user can save reservation dates in DB.
Does exist any possibility to disable date rages from database? For example, I have date range from 22.12.2016 to 26.12.2016 and form 31.12.2016 to 03.01.2017 and I want to disable these dates in datepicker.
Thanks.
Hope this will useful to you
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/2.1.30/css/bootstrap-datetimepicker.css" rel="stylesheet" media="screen" />
<style>
.datetimepicker table tr td.disabled, .datetimepicker table tr td.disabled:hover {
color: rgb(255, 0, 0);
cursor: not-allowed;
}
</style>
<div class="form-group required">
<label class="col-sm-2 control-label" for="datestart">Reservation Start date</label>
<div class="col-sm-4">
<div class="start-date">
<div class='input-group date' id="time-start">
<input type='text' class="clearfix form-control col-sm-5" name="datestart" id="datestart" placeholder="Reservation Start date" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<label class="col-sm-2 control-label" for="dateend">Reservation End date</label>
<div class="col-sm-4">
<div class="end-date">
<div class='input-group date' id="time-end">
<input type='text' class="clearfix form-control col-sm-5" name="dateend" id="dateend" placeholder="Reservation End date" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// use this date formate 'MM/dd/yyyy HH:mm'
// start time
var datestart = '<?php echo $reservation_start_date; ?>';
// end time
var dateend = '<?php echo $reservation_end_date; ?>';
jQuery('#datestart').val(datestart);
jQuery('#dateend').val(dateend);
var today = new Date();
jQuery('#time-start').datetimepicker({
format: 'mm/dd/yyyy hh:ii',
autoclose: true,
pickerPosition: datestart,
maxView: 3,
minuteStep: 15,
defaultDate: datestart,
startDate: new Date(today.getFullYear(), today.getMonth(), today.getDate(), today.getHours(), today.getMinutes())
}).on("changeDate", function (e) {
jQuery('#start-time-before').html(e.date);
var TimeZoned = new Date(e.date.setTime(e.date.getTime() + (e.date.getTimezoneOffset() * 60000)));
jQuery('#time-end').datetimepicker('setStartDate', TimeZoned);
jQuery('#time-start').datetimepicker('setDate', TimeZoned);
jQuery('#start-time-adjusted').html(TimeZoned);
});
jQuery('#time-end').datetimepicker({
format: 'mm/dd/yyyy hh:ii',
pickerPosition: dateend,
autoclose: true,
maxView: 3,
minuteStep: 15,
defaultDate: dateend,
startDate: new Date(today.getFullYear(), today.getMonth(), today.getDate(), today.getHours(), today.getMinutes())
}).on("changeDate", function (e) {
jQuery('#end-time-before').html(e.date);
var TimeZoned = new Date(e.date.setTime(e.date.getTime() + (e.date.getTimezoneOffset() * 60000)));
jQuery('#time-start').datetimepicker('setEndDate', TimeZoned);
jQuery('#time-end').datetimepicker('setDate', TimeZoned);
jQuery('#end-time-adjusted').html(e.date);
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/2.1.30/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
I have situation where I would like user to select start date and restrict the end date to either selected start date of the day next to selected start date.
How can I do this on boostrap datepickers for start and end date
Download bootstrap-datepicker.js from here
HTML Code
<div class="col-md-6 ">
<div class="form-group">
<label>Start Date</label>
<div class='input-group date'>
<input type='text' id='datecheckin1' class="form-control" placeholder="DD/MM/YYYY" data-date-format="dd/M/yyyy" readonly />
<span class="input-group-addon" ><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<div class="col-md-6 ">
<div class="form-group">
<label>End Date</label>
<div class='input-group date'>
<input type='text' id='datecheckout1' class="form-control" placeholder="DD/MM/YYYY" data-date-format="dd/M/yyyy" readonly />
<span class="input-group-addon" ><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
Java Script code
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin2 = $('#datecheckin1').datepicker({
onRender: function (date) {
//Here we restrict the date date of start datepicker
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function (ev) {
var newDate = new Date(ev.date);
newDate.setDate(newDate.getDate() + 1);
//Here we set the date of end datepicker
checkout2.setValue(newDate);
checkin2.hide();
$('#datecheckout1')[0].focus();
}).data('datepicker');
var checkout2 = $('#datecheckout1').datepicker({
onRender: function (date) {
//Here we restrict the date of enddatepicker
return date.valueOf() <= checkin2.date.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function () {
checkout2.hide();
}).data('datepicker');
Hope this will help you.
$('#dtpicker').datepicker({
endDate: '-1d'
}).on(....