Bootstrap datepicker resetting after reload - javascript

Bootstrap DatePicker is resetting to default date after page reload. If I don't reload the page I'm able to keep selected date
<div class="form-group">
<label>Action Date </label>
<div class='input-group date' id='dpServiceDate'>
<input type='text' class="form-control" id="actionDate" name="actionDate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
$(document).ready(function() {
$('#dpServiceDate').datetimepicker({
defaultDate: "#Model.ActionDate.Date.ToString("MM-dd-yyyy")",
format: 'MM-DD-YYYY',
maxDate: moment().subtract(1, 'days')
}).on('dp.change', function(e) {
location.href = "/XYZ/DashBoard/Index?Id=" + #Model.ClientId + "&ActionDate=" + $("#actionDate").val();
})
});

Add useCurrent: false
$(document).ready(function() {
$('#dpServiceDate').datetimepicker({
defaultDate: "#Model.ActionDate.Date.ToString("MM-dd-yyyy")",
format: 'MM-DD-YYYY',
useCurrent: false,
maxDate: moment().subtract(1, 'days')
}).on('dp.change', function(e) {
location.href = "/XYZ/DashBoard/Index?Id=" + #Model.ClientId + "&ActionDate=" + $("#actionDate").val();
})
});

Related

Default value is not set in datetime picker

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();

past dates are not hiding in date picker?

Hello Everyone I'm beginner in Jquery and javascript.In my project I have to use bootstrap.I have tried to execute datepicker to hide past datesDate picker is working even though past dates are not hiding..I have attached the below the code..
<!--html:-->
<div class="form-group">
<div class="col-sm-3 control-label">
<label for="FromDate" class="control-label">FromDate:</label>
</div>
<div class="col-sm-4">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" name="fromDate" id="fromDate" class="form-control pull-right" data-validation-engine="validate[required]" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-3 control-label">
<label for="ToDate">ToDate:</label>
</div>
<div class="col-sm-4">
<div class="input-group date">
<div class="input-group-addon"> <i class="fa fa-calendar"></i>
</div>
<input type="text" name="toDate" id="toDate" class="form-control pull-right" data-validation-engine="validate[required]"
onchange="report();" />
</div>
</div>
</div>
<!--script:-->
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
// Date picker
$('#fromDate').datepicker({
autoclose: true,
todayHighlight: true,
format: 'dd-M-yyyy'
});
$('#toDate').datepicker({
autoclose: true,
todayHighlight: true,
format: 'dd-M-yyyy'
});
$('#fromDate').datepicker({ minDate: new Date() });
$('#toDate').datepicker({ minDate: new Date() });
/*]]>*/
</script>
Thanks!!
var dateToday = new Date();
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
minDate: dateToday,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
Try the above piece of code
I replicated your code and it is working fine.
Can be more clear on the versions and packages you use.
For Datepicker which package you use. I used jquery ui
For bootstrap you have used v3 (which is not a consideration here), but the latest version is 4
http://jsfiddle.net/0oL2yh6r/1/
jQuery(document).ready(function(){
$( "#fromDate" ).datepicker({
minDate: new Date(),
autoclose : true,
todayHighlight : true,
format : 'dd-M-yyyy'
});
});

Can I disable few date ranges in Bootstrap datepicker?

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>

Set mindate in bootstrap datepicker

I have 2 date picker on change of 1st date picker i need to set selected date as mindate value of the 2nd date picker . Here is my coe for that
<input type="text" size="30" class="date_picker_from form-control valid" id="start" value="" name="start" aria-invalid="false">
<input type="text" size="30" class="date_picker_to form-control valid" id="end" value="" name="end" aria-invalid="false">
$('.date_picker_from').datepicker({
setDate: new Date(),
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose:true,
startDate: '-0m',
minDate:0,
});
$('.date_picker_to').datepicker({
//setDate: new Date(),
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose:true,
startDate: '+1d',
minDate:0,
});
$("#start").change( function() {
var secondDate = new Date($("#start").datepicker( "getDate" ));
var date2 = new Date(secondDate.getTime());
date2.setDate(date2.getDate() + 1);
$("#end").datepicker("setDate", date2);
$("#end").datepicker("minDate", date2);
$('#end').datepicker( "option", "minDate", date2 );
});
Here is the jsfiddle link
This is only thing you need to do for set mindate.This is the way to set mindate using datepicker.
$("#start").change( function() {
$( ".date_picker_hotel_to" ).datepicker("option", "minDate", $("#start").val());
});
Use the onSelect callback option
$('.date_picker_hotel_from').datepicker({
setDate: new Date(),
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose: true,
startDate: '-0m',
minDate: 0,
onSelect: function(text, dt) {
$('#end').datepicker('option', 'minDate', text);
}
});
$('.date_picker_hotel_to').datepicker({
//setDate: new Date(),
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose: true,
startDate: '+1d',
minDate: 0,
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<link href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet" />
<input type="text" size="30" class="date_picker_hotel_from form-control valid" id="start" value="" name="start" aria-invalid="false">
<input type="text" size="30" class="date_picker_hotel_to form-control valid" id="end" value="" name="end" aria-invalid="false">
$(function () {
$("#start").change(() => {
let secondDate = $("#start").datepicker("getDate");
secondDate.setDate(secondDate.getDate() + 1);
$("#end").datepicker("setStartDate", secondDate);
$("#end").datepicker('setDate', fromDate);
});
});
<html>
<input asp-for="StartDate" class="form-control datepicker" type="text" autocomplete="off" />
<input asp-for="EndDate" class="form-control datepicker" asp-format="{0:dd.MM.yyyy}" type="text" autocomplete="off" />
<script>
$('#StartDate').datepicker({
keyboardNavigation: false,
autoclose: true,
changeMonth: true,
changeYear: true,
format: "dd.mm.yyyy",
language: "tr",
startDate: new Date('2021,1,1'),
});
$('#EndDate').datepicker({
keyboardNavigation: false,
autoclose: true,
changeMonth: true,
changeYear: true,
format: "dd.mm.yyyy",
language: "tr",
});
$("#StartDate").on("change", function (e) {
var secondDate = $("#StartDate").datepicker("getDate");
secondDate.setDate(secondDate.getDate() + 1);
$("#EndDate").datepicker("setStartDate", secondDate);
});
</script>
</html>

How to disable future months from current months in bootstrap datepicker

In am using a calendar in bootsrtap datepicker, in that I have displaying only month and year (mm-yyy). I want to disable future months from current month. I have searched a lot but I didn't find an answer. Please help me, I have attached my code below
JS :
$(document).ready(function () {
var cou = $('#rolecount').val();
var c;
for (c = 0; c <=cou; c++){
$('#datepicker'+c).datepicker({
format: 'mm-yyyy',
endDate: '+0d',
viewMode: "months",
minViewMode: "months",
});
$('#datepicker'+c).datepicker().on('monthSelected', function(ev){
$(this).datepicker('hide');
});
}
});
HTML:
<div class="input-group date">
<input type="text" id="datepicker<?=$j?>" required name="joindate<?=$j?>" class="date_picker form-control" placeholder="show datepicker" maxlength="100" autocomplete="off"><span class="input-group-addon" id="basic-addon2"><i class="fa fa-calendar"></i></span>
<input type="hidden" name="roleid<?=$j?>" value="<?=$str[$j]?>" />
</div>
You need to redefine your endDate option value:
$('.input-daterange').datepicker({
format: 'mm-yyyy',
// You used '+0d' that is for days instead of '+0m' that is for months.
endDate: '+0m',
viewMode: "months",
minViewMode: "months"
})

Categories