In my project I got bootstrap datetimepicker for start and end dates and switch buttons which set dates for today, for last week and for all time. This looks like the following:
For datetimepickers I got onChange event and when the user changes either start or end date, ajax request is fired and new data is obtained from the server. he code for this is like this:
$("#datetimepickerFrom").on("dp.change", function (e) {
start_date = e.date;
table.ajax.reload();
});
$("#datetimepickerTo").on("dp.change", function (e) {
end_date = e.date;
table.ajax.reload();
});
So the problem is as follows: when the user clicks a button for last week, it sets today date for endtime datetimepicker and 7 days before date for start datetimepicker. As 2 datetimepickers are changed simultaneously, ajax request is fired twice and this is undesired behaviour. Any ideas how that could be avoided and ajax call made once in case 2 datetimepickers change?
Moreover I need to preserve ajax call for any datetimepicker change because user can change any of the dates manually and new data should be requested.
Thank you.
I tried your code quickly a few minutes ago, and everything seemed working good. I've implemented a basic jquery ajax call. You can do your own as well.
<div class="container">
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker6'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker7'>
<input type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
Jquery part
let datePicker = {
'dateStart': null,
'dateEnd': null
}
$(function () {
$('#datetimepicker6').datetimepicker();
$('#datetimepicker7').datetimepicker({
useCurrent: false
});
$("#datetimepicker6").on("dp.change", function (e) {
$('#datetimepicker7').data("DateTimePicker").minDate(e.date);
datePicker['dateStart'] = new Date(e.date._d);
});
$("#datetimepicker7").on("dp.change", function (e) {
$('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
datePicker['dateEnd'] = new Date(e.date._d);
if(datePicker['dateEnd'] && datePicker['dateStart']){
$.post("your_url", datePicker, function(result){
console.log(result)
});
}
});
});
Related
I am setting up a website that adds event start and end dates/times to a database. I would like to dynamically set minDate (for the end date/time) based on the input from the previous event start.
I am using https://www.jqueryscript.net/time-clock/Date-Time-Picker-Bootstrap-4.html for my date/time picker and bootstrap 4.
<div class="form-group row">
<label for="eventStart" class="col-3 col-form-label">Event start date and time</label>
<div class="col-5">
<div class="input-group date" id="datetimepicker1">
<input id="eventStart" name="eventStart" type="text" required="required" class="form-control here">
<div class="input-group-addon append"><i class="fa fa-calendar"></i>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY HH:mm',
stepping: 15
});
});
</script>
</div>
<div class="form-group row">
<label for="eventEnd" class="col-3 col-form-label">Event end date and time</label>
<div class="col-5">
<div class="input-group date" id="datetimepicker2">
<input id="eventEnd" name="eventEnd" type="text" required="required" class="form-control here">
<div class="input-group-addon append"><i class="fa fa-calendar"></i></div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker2').datetimepicker({
format: 'DD/MM/YYYY HH:mm',
stepping: 15,
minDate: '2019/1/23 20:00'
});
});
</script>
</div>
I can set minDate manually (as above) but not sure how to take the value from the previous text input (datepicker1) with perhaps 'onblur'?
you can call the datetime api methods like this
$('#datetimepicker').data("DateTimePicker").minDate('2019/1/23')
and call the api dynamic
$('#datetimepicker1').on('change',function(){
var newdate=$(this).val();
if(newdate){
$('#datetimepicker2').data("DateTimePicker").minDate(newdate)
}
});
have a try
The answer to your question is clearly stated on the documentation https://www.jqueryscript.net/time-clock/Date-Time-Picker-Bootstrap-4.html
Basically, you can dynamically set minDate for the second datetimepicker by setting an event listener on the first datetimepicker that fires an event whenever user select the first datetime.
$('#datetimepicker1').datetimepicker(... your options ...).on( "dp.change", function(e) {
// Fired when the date is changed.
// Get the datetime value
console.log(e.target.value);
})
Then you can reset the minDate of second datetimepicker using this API function:
// Takes a minDate string, Date, moment, boolean:false parameter and disallows the user to select a moment that is before that moment. If a boolean:false value is passed the options.minDate parameter is cleared and there is no restriction to the miminum moment the user can select.
$('#datetimepicker2').data("DateTimePicker").minDate(minDate)
I want to fetch the value of the date and want to increase by 1 year and set the value for the next date .but if i am putting text i am getting alert if i am just choosing from datepicker i am not getting any alert.
<style>
.datepicker-days{display:none!important;}
.datepicker-months{display:block!important;}
.prev{visibility:hidden!important;}
.next{visibility:hidden!important;}
</style>
<script>
$(document).ready(function(){
$('.from').datepicker({
minDate:new Date(),
maxDate:'5yr',
format: 'mm/yyyy'
})
$('#gMonth2').on("change", function () {
alert();
//alert($(this).val());
});
});
</script>
<div class="container-fluid" id="content">
<div class="form-group">
<label>First check in:</label>
<input type="text" class="form-control form-control-1 datepicker input-sm from" id="gMonth2" placeholder="CheckIn" >
</div>
</div>
You can use the onSelect() event of datepicker
$('.from').datepicker({
minDate:new Date(),
maxDate:'5yr',
format: 'mm/yyyy',
onSelect: function(dateText) {
//Increase year by 1 & set to other field
}
});
I've tried to reproduce your code in here, I'm getting alert with the value fetched from the input when I change the date on the date picker, your code seems to be working fine.
.
I'm trying to bind a date field to a form, using dateTimePicker with no success.
In my .jsp I have a binding with timeoutDate which is a Date, so when trying to update the form i use (cleaned from some css stuff...)
<spring:bind path="timeoutDate">
<div class="form-group>
<div class="input-group col-sm-4" id='datetimepicker'>
<form:input path="timeoutDate" id="timeoutDate" type="text"/>
<span class="input-group-addon"> <span
class="glyphicon glyphicon-calendar"></span>
</span>
<script type="text/javascript">
$(function () {
$('#datetimepicker').datetimepicker(
{
defaultDate: "${timeoutDate}"
});
});
</script>
</div>
</div >
</spring: bind >
${timeoutdate} does not work as defaultDate
if I don't put a default date in the function, no binding is made, the filed is empty...
I am using Bootstrap 3 Datepicker for that I am trying following
<div class='input-group date datetimepicker1'>
<input type='text' name="actEndDate" placeholder="End Date" class="form-control" required/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
and calling it by following
$(".datetimepicker1").datetimepicker();
Its working fine
now i am changing date using JavaScript on clicking of other field i have date formate like 11/4/2015 and for that i am trying following
$('.datetimepicker1').datetimepicker({
defaultDate: "11/1/2013"
});
now how to preselect date ?
Note : its different from jquery datepicker
I see this way for your question:
<script type="text/javascript">
$(function () {
$('#datetimepicker5').datetimepicker({
defaultDate: "11/1/2013",
disabledDates: [
moment("10/2/2013"),
new Date(2013, 11 - 1, 21),
"11/22/2013 00:53"
]
});
});
</script>
you can see this page for other doubt.
Setting defaultDate parameter is the right method to resolve it.
I'm sure this is simple and it's my understanding of jquery/javascript that is holding me back - but I can't get this to work.
All I need to do - is - When a button on the screen is clicked, clear some of the input field on the form back to their original values.
This is working fine, for all fields except a datetimepicker field.
Here is the relevant bits of code, that defines the input field :
<div class='form-group' id='START_DATEFormGroup'>
<label for='START_DATE' class='col-sm-2 control-label' data-toggle='tooltip' data-placement='top' title=''>Start Date</label>
<div class='col-sm-8'>
<div class='input-group date form_date col-sm-3' data-date-format='dd M yyyy' data-link-field='START_DATE' data-link-format='yyyy-mm-dd'>
<input class='form-control' size='16' type='text' />
<input type='hidden' id='START_DATE' name='START_DATE' />
<span class='input-group-addon'>
<span class='glyphicon glyphicon-calendar'>
</span> // group-addon
</span> // calendar
</div> // form_date
</div> // col-sm-8
</div> // form-group
I am initializing datetimepicker as follows :
function enableDatepicker(){
$( document ).ready(function() {
$('.form_date').datetimepicker({
format: 'dd M yyyy',
minView: 2,
autoclose: 1,
})
});
}
To clear the input fields down I have :
function clearActionForm(){
// code here to clear the various input fields to null or their initial values.
// Need statements to clear the datetimepicker field to null.
}
So, can someone give me the line(s) of code I need to insert into clearActionForm() in order to clear the START_DATE field to null.
Thanks.
If you are using the eonasdan datetimepicker use the following:
// clears
$("#form_date").data("DateTimePicker").date(null);
// updates with date
$("#form_date").data("DateTimePicker").date(new Date());
// or update with string
var myCoolDate = "27 05 1975";
$("#form_date").data("DateTimePicker").date(myCoolDate);
// or update with a moment
var moment = moment().add(2, 'd');
$("#form_date").data("DateTimePicker").date(moment);
Below is a demo of using different types of changes.
$(function() {
$('#datetimepicker1').datetimepicker({
format: 'dd M YYYY',
});
});
$('#clear').click(function() {
$("#datetimepicker1").data("DateTimePicker").date(null);
})
$('#date').click(function() {
var sysdate = new Date();
$("#datetimepicker1").data("DateTimePicker").date(new Date());
})
$('#string').click(function() {
var myCoolDate = "27 05 1975";
$("#datetimepicker1").data("DateTimePicker").date(myCoolDate);
})
$('#moment').click(function() {
var now = moment().add(2, 'd');
$("#datetimepicker1").data("DateTimePicker").date(now);
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.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>
<input type='button' id='clear' Value='Clear Date'>
<input type='button' id='date' Value='Set with date'>
<input type='button' id='string' Value='Set with string'>
<input type='button' id='moment' Value='Set with moment'>
use this line $('.form_date').data("DateTimePicker").clear()
Demo
Easy way to rest the selected date as well as highlighted date by below concept
$('#txtWQApprovalDate').datepicker('setDate', null).datepicker('fill');
Assuming that you are using the datetimepicker plugin from xdsoft.net/jqplugins/datetimepicker, one quick way to clear the datetimepicker's current value would be the following:
$('.form_date').val('');
As an alternative (this sets the value of the datetimepicker to the current time):
$('.form_date').datetimepicker({
value: (new Date()).toLocaleString()
});
This value does not not match the format of the datetimepicker, but will be converted to the correct format automatically when the datetimepicker is used.
If you are using the eonasdan datetimepicker use the following:
// clears
$j(".form_date").data("DateTimePicker").setDate(null);
// updates to now
$j(".form_date").data("DateTimePicker").setDate(new Date());
// or update to a given date
var myCoolDate = "05/27/1975";
$j(".form_date").data("DateTimePicker").setDate(myCoolDate);