Develop Reference

How to disable dates in second datetimepicker based on next days in the first one

I use the bootstrap date picker and I use two textboxes to search by date from-to, want to the second textbox give me the days after the days in the first textbox,
any help, please.
HTML :
<form action="{{url('search/ticket')}}" method="get">
<div class="col-md-6 col-sm-4">
<input type="text" class="timepickerfrom form-control" name="remember" placeholder="Search From" id="txtStartDate" required>
</div>
<div class="col-md-6 col-sm-4">
<input type="text" class="timepickerto form-control" name="remember" placeholder="Search To" id="txtEndDate" required>
<button type="submit" class="basic-button">Submit</button>
</div>
</form>
javascript :
<script type="text/javascript">
$(document).ready(function () {
$('.timepickerfrom').datetimepicker({
format: 'YYYY-MM-DD',
});
$('.timepickerto').datetimepicker({
format: 'YYYY-MM-DD',
});
});
</script>

You have to use the change event on the input itself if you want to respond to manual input, because the changeDate event is only for when the date is changed using the datepicker.
Try this code:
$(document).ready(function () {
$('.timepickerfrom').datepicker({
format: 'yyyy-mm-dd',
}).on('changeDate', function(selected){
var minDate = new Date(selected.date.valueOf());
$('.timepickerto').datepicker('setStartDate', minDate);
});
$('.timepickerto').datepicker({
format: 'yyyy-mm-dd',
});
});

I found the solution if anyone wants help.
It's called the linked datepicker
https://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers

How do I set minDate using Bootstrap 4 date/time picker based on previous date input?

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)

Clear the value in a datetimepicker field

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

Bootstrap timepicker selects only the first timepicker element

I have a form where a user can add dynamic bootstrap timepicker fields.
I'm using Bootstrap timepicker (https://github.com/eternicode/bootstrap-datepicker) for timepicker input fields that will be dynamically generated
The problem is, when clicking on any datepicker element (except the first one), all the changes happen to the first one only.
Here is the JSFIDDLE
The HTML part of my code is:
<div class="row multi-field-wrapper">
<div class="multi-fields">
<div class="multi-field">
<div class="form-group col-xs-12 col-sm-4">
<div class="input-group">
<input type="text" name="ticket-price" maxlength="5" class="form-control" placeholder="FREE" >
<span class="input-group-btn">
<button class="btn btn-default add-field" type="button">+</button>
</span>
<span class="input-group-btn">
<button class="btn btn-default remove-field" type="button">-</button>
</span>
</div>
</div>
<div class="row">
<div class="form-group col-xs-6 col-sm-3">
<label>Start Date</label>
<input type="text" name="tstart-date" class="form-control tstart-date-picker" placeholder="">
</div>
</div>
</div>
</div>
</div>

The problem is that you clone DOM elements with event handlers attached by jQuery. It causes troubles when you try to select date in new input, because events bound by datepicker somehow mixed up with original on from the first input.
The fix is pretty simple: clone without true argument, and also use delegated click event for adding new rows. The rest doesn't change:
$(this).on('click', '.add-field', function (e) {
$('.multi-field:first-child', $wrapper).clone().appendTo($wrapper);
$('.multi-field:last-child').find('input[name="tstart-date"]').val('');
$('.multi-field:last .tstart-date-picker').datepicker({
autoclose: true,
format: 'dd-M-yyyy',
todayHighlight: true,
});
});
Demo: http://jsfiddle.net/z2j6u8ro/2/

The datepicker must be assigned to each element specifically. Try this:
$(".add-field", $(this)).click(function(e) {
(CODE TO ADD NEW FIELD HERE)
$(.tstart-date-picker).each(function(){
$(this).datepicker("destroy");
$(this).datepicker({
(DATEPICKER OPTIONS HERE)
});
});
}

datepicker: display value from DB but allow user change; multiple datepicker()s on page

I'm a noob wrt jquery and javascript. So, while I've looked at a lot of SO posts that deal with a piece of my problem, I've not been able to "assemble" the various solutions into something that works for me.
My context: the results of a query are displayed in a form. In each row, one of the fields is a date with an existing value. When first rendered, the data of all fields is text (non-editable). Via a button, I "enable" the fields for editing and I want to use jQuery datepicker for the date field. (I have this part working.)
One requirement: dates are stored in the database in ISO ('yyyy-mm-dd') format. The date displayed in the form (formatted via php) are 'M d y'.The datepicker should use the 'M d y' format for display as well (also seems to be working), but "post" the revised date in ISO format.
I've posted my code so far below and
here (jsfiddle)
<div class="container" id="myDiv">
<form method="post" action="">
<input type="hidden" id="projID" name="projID" value="fakeProjID">
<div class="row">
<!-- initially form is in "display-only mode" -->
<a class="btn btn-default btn-xs" id="make-editable" onClick = "toggle_edit(id,'fakeProjID');">Edit</a>
</div>
<!--rows dynamically generated via query
the id of the record is appended to the ids and inserted into the data-ids, data-dateval and values
these are fixed values for demo, but are dynamic values in reality -->
<div class="row">
<input type="text" name="date_pickr[]" id="date_pickr_511" class="input date_pickr disabled" data-id="511" data-dateval="2012-03-12" value="2012-03-12" disabled="true"/>
<input type="hidden" name="fmt_date[]" id="fmt_date_511" value="2012-03-12"/>
<input type="hidden" name="activityID[]" value="511"/>
//more info goes here//
</div>
<div class="row">
<input type="text" name="date_pickr[]" id="date_pickr_376" class="input date_pickr disabled" data-id="376" data-dateval="2013-05-19" value="2013-05-19" disabled="true"/>
<input type="hidden" name="fmt_date[]" id="fmt_date_376" value="2013-05-19"/>
<input type="hidden" name="activityID[]" value="376"/>
//more fields goes here//
</div>
<div class="row">
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
and the javascript:
//datepickers
$(function() {
$.datepicker.setDefaults({
dateFormat: 'M d y',
altFormat: 'yy-mm-dd'
});
$('.date_pickr').datepicker();
$('.date_pickr').datepicker( 'option','altField','#fmt_date');
});
function toggle_edit(ID,projID) {
var working_elemID = ID;
var ItemID = projID;
//name of modal div to enable/disable
var group_id = 'myDiv';
//if elem_ID = make_editable
if (working_elemID.search('un') == -1) {
//working code to make field editable
} else {
//working code to make field uneditable
}
}
The parts I need help with are:
a) getting the default dates to show in the field before they are edited/editable
b) getting datepicker to open to the default date shown for that field
c) getting datepicker to set the new value to a field that is included in the $_post data (currently trying to use the hidden input field).
Any assistance at all would be greatly appreciated!

After hours of iteration, I've solved my own question. Here's what I came up with:
The HTML (with PHP for the values)...
<div class="container">
<form method="post" action="">
<input type="hidden" id="projID" name="projID" value="<?php echo $projID; ?>">
<div class="row">
<!-- initially form is in "display-only mode" -->
<a class="btn btn-default btn-xs" id="make-editable" onClick = "toggle_edit(id,'fakeProjID');">Edit</a>
</div>
<!--rows dynamically generated via query
the id of the record is appended to the ids and inserted into the data-ids, data-dateval and values
these are fixed values for demo, but are dynamic values in reality -->
<?php
foreach($vals as $ky=>$v) {
$row = '
<div class="row">
<input type="text" name="date_pickr[]" class="input disabled" data-id="'.$vals[$ky].'" value="'.date('M d y',strtotime($dates[$ky])).'" disabled="true"/>
<input type="hidden" name="fmtd_date[]" id="fmtd_date_'.$vals[$ky].'" value="'.date('Y-m-d',strtotime($dates[$ky])).'">
<input type="hidden" name="activityID[]" value="'.$vals[$ky].'"/>
//more info goes here//
</div>';
echo $row;
}
?>
<div class="row">
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
And the javascript:
function toggle_edit(ID,projID) {
var working_elemID = ID;
var ItemID = projID;
//if elem_ID = make_editable
if (working_elemID.search('un') == -1) {
var selector = '#'+ group_id +' .disabled';
var fields = $(selector);
fields.removeClass('disabled');
fields.addClass('enabled');
fields.removeAttr('disabled','');
fields.addClass('date_pickr');
$('.date_pickr').datepicker({
dateFormat: 'M d y',
altFormat: 'yy-mm-dd',
firstDay: 1,
showOtherMonths: true,
selectOtherMonths: true,
showOn: 'focus',
onSelect: function() {
var id = $(this).data('id');
var currentDate = $(this).datepicker('getDate');
var altFormat=$(this).datepicker('option','altFormat');
var formatedDate = $.datepicker.formatDate(altFormat,currentDate);
$('#fmtd_date_'+id).val(formatedDate);
}
});
} else {
//if elem_ID == make_uneditable
var selector = '#'+ group_id +' .enabled';
var fields = $(selector);
fields.removeClass('enabled');
fields.addClass('disabled');
fields.disabled = 'true';
}
}
And here are the explanations for each of the three questions. The key breakthrough came when I stuck the datepicker functions inside the "toggle-edit" function.
(a) The default dates (i.e. the database values) are shown by
assigning the date value from the database (formatted by using the
php Date() function with the exact same format as the datepicker
dateFormat value...in this case 'M d y') into the value field of the
datepicker input control.
(b) When the control is enabled for editing,
the date_pickr class is added to the control. With the value of the
control set to the right value and format, the datepicker
automatically displays the correct calendar when the field receives
focus.
(c) the $_POST value (for writing back to the db) is set in a
hidden input control. At first the control receives the database
value. If the value is edited, then the 'onSelect:' option function
is fired and therein the id of the datepicker (which is the recordID
for the row, from the database) is appended to the ID of the hidden
field with the properly formatted date value.
NOTE: the php date formats are different than jQuery. To get yyyy-mm-dd in PHP, you need 'Y-m-d'. For jQuery, you need 'yy-mm-dd'.
Voila! Mission accomplished, but always open to suggestions/improvements.