We Keep Coding

I have tried to disabled past dates , now i want my "date_to" field dates greater than "date_from" field date

I want my departure date not greater than arrival date, like if i have selected 4 Aug on arrival, disable departure date less than that.
$(function(){
//arrival date
date_from.min = new Date().toISOString().split("T")[0];
//departure date
date_to.min = new Date().toISOString().split("T")[0];
})
<input type="date" class="tour-search-input" name="arrival" id="date_from" placeholder="DD/MM/YY">
<input type="date" class="tour-search-input" name="departure" id="date_to" placeholder="DD/MM/YY">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Bootstrap datetimepicker with hh:mm:ss format

I am working on an application, and I'm a little stuck on the datetimepicker. The datepicker should be able to show a data format of yyyy-mm-dd hh:mm:ss (year, month and date with current hour, minutes and seconds...). It's working fine, but after when i select the date the datepicker has to autoclose or hide. But it's not going off. I tried a lot with different scripts, still not able to work. Following is the HTML:
<span>Select time with Date</span>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" id='datetimepicker2' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
Following is the JS:
<script type="text/javascript">
$(function() {
$('#datetimepicker2').datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss',
autoclose: true
});
});
</script>
I guess the script is not supporting autoclose call. Any idea how I can fix this?

You can just listen to the datetimepicker dp.change event and force closing the datetimepicker when the date is changed like:
$(function() {
$('#datetimepicker2').datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss'
});
// Hide datetimepicker on date change
$("#datetimepicker2").on("dp.change", function() {
$(this).data("DateTimePicker").hide();
});
// Show datetimepicker on input text click
$('#datetimepicker2 > input').on('click', function() {
$(this).closest('.date').data('DateTimePicker').show();
});
});

How to manually set date format in matDatepicker (angular 4)

<mat-form-field>
<input matInput name=""
[matDatepicker]="myDatepicker"
[max]="maxDate"
placeholder="Select Date Of Birth"
id="dateOfBirth"
[value]="value"
onkeydown="return false" />
<mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
<mat-datepicker #myDatepicker mat-open-on-focus></mat-datepicker>
</mat-form-field>
This is my snippet which is implemented for two-way binding.
Value return JS date object output as follow
Current output:
"Mon Jan 01 1900 00:00:00 GMT+0530 (India Standard Time)"
Required Output:
01/01/1990 (MM/DD/YYYY).
I have refer following links, but did not get expected output -
Angular 2 Material 2 datepicker date format

Bootstrap 3 Datepicker v4 - Can't set date to values between 0 and 14400000

I'm using working with a javascript UI that includes Bootstrap 3 Datepicker v4. The data uses '0' as a special flag which gets assigned to the UI. I'm finding that trying to set the value of the field to 0 is not working, and on further investigation, it stretches to the point where it works at 14400000 but not at 13999999. What am I doing wrong, or what can I do differently to set the value to 0?
HTML:
<h1>Demo</h1>
<form class="form-group" onsubmit="return false;">
<div class="form-group">
<label for="enddate">End Date</label>
<div class='input-group date' id='enddate'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<button id="zeroButton">Set Zero</button>
<button id="grossButton">Set Gross</button>
<button id="grosslessButton">Set Grossless</button>
<button id="todayButton">Set Today</button>
</button>
</button>
</form>
JS:
$(document).ready( function() {
$("#enddate").datetimepicker();
$("#zeroButton").click(function() {
// set to Jan 1, 1970
$("#enddate").data("DateTimePicker").date(new Date(0));
});
$("#grossButton").click(function() {
// set to Jan 1, 1970
$("#enddate").data("DateTimePicker").date(new Date(14400000));
});
$("#grosslessButton").click(function() {
// set to Jan 1, 1970
$("#enddate").data("DateTimePicker").date(new Date(14399999));
});
$("#todayButton").click(function() {
// set to Jan 1, 1970
$("#enddate").data("DateTimePicker").date(new Date());
});
});
Check out the working version on the jsfiddle.

The Bootstrap 3 datetimepicker uses the moment library. Pass in a moment object instead of a date object:
$("#zeroButton").click(function() {
// set to Jan 1, 1970
$("#enddate").data("DateTimePicker").date(moment(0));
});

How do I format the date with bootstrap datepicker?

I have a select drop down that activates two datepicker input field depending on what is selected. When one field is selected, I would like to fill in the value of today's date plus one year. However, when I select that, I get this: Tue Aug 11 2015 00:00:00 GMT-0400 (Eastern Daylight Time). I would like to have the date as: mm/dd/yyyy.
I have setup a fiddle. http://jsfiddle.net/mwoods98/aku8ytju/
Updated fiddle
Here is a look at the code:
$(document).ready(function() {
$('#getHoldStatus').change(function()
{
var selected_item = $(this).val()
if(selected_item == "3"){
$('#datepicker').val("").removeClass('invisible');
$('#datepicker2').val("").removeClass('invisible');
var date = new Date("8/11/2014");
var date3 = new Date("8/11/2015");
$('#datepicker2').val(date3);
var newDate = new Date(date3.getFullYear(), date3.getMonth(), date3.getDate()+1);
$('#datepicker2').datepicker({ dateFormat: "mm/dd/yyyy" });
}
else if(selected_item == "2") {
$('#datepicker').val("").removeClass('invisible');
$('#datepicker2').val(selected_item).addClass('invisible');
$("#datepicker2").val('0');
}
else
{
$('#datepicker').val(selected_item).addClass('invisible');
$('#datepicker2').val(selected_item).addClass('invisible');
$("#datepicker").val('');
$("#datepicker2").val('');
}
}
);
// put all your jQuery goodness in here.
});
I am manually setting the date here for now but I can't seem to get it formatted properly.
<label class="control-label" for="getHoldStatus">
Hold Status
</label>
<div class="controls">
<select id="getHoldStatus" name="getHoldStatus">
<option value=""></option>
<option value="1" >None</option>
<option value="3" >On Hold until Candidate Available</option>
<option value="2" >On Hold until Position Available</option>
</select>
</div>
<label class="control-label" for="input08">
Hold Start Date
</label>
<div class="controls">
<script>
$(function() {
$( "#datepicker" ).datepicker({autoclose: true, todayHighlight: true, orientation: "bottom right"});
});
</script>
<div><input type="text" id="datepicker" value="" name="fdfHoldStartDate" class="invisible" /></div>
</div>
<label class="control-label" for="input09">
Hold End Date
</label>
<div class="controls">
<script>
$(function() {
$( "#datepicker2" ).datepicker({format: "mm/dd/yyyy", autoclose: true, todayHighlight: true});
});
</script>
<div><input type="text" id="datepicker2" value="" name="fdfHoldEndDate" class="invisible" /></div>
</div>
UPDATE: For some reason, the fiddle did not update. I have confirmed it and now the source appears relevant to the question I was asking. You can see how the date is being formatted when a selection is made.

Look at this: Bootstrap 3 datepicker - code generator
<input type="text" type="text" id="date1">
$('#date1').datepicker({
format: "mm-dd-yyyy"
});

Use the format instead of formatDate:
$('#datepicker2').datepicker({ format: "mm/dd/yyyy" });
The check in/check out example should be useful: Datepicker for Bootstrap