We Keep Coding

Select Day or Month or Year in Single Calendar or DatePicker (Flexible Selection Mode)

I have a unified textbox control where I need to flexibly accept a DatePicker selection which can be one of the following 3: Day (MM/DD/YYYY), Month (MM/YYYY), OR Year (YYYY).
I'm using Bootstrap DatePicker which has startView and minViewMode but the only thing I was able to do is separate them into 3 separate controls which isn't what I want. My goal is a combined control.
Here's the script I'm starting out with. Maybe I can create some invisible DatePickers and toggle them with a custom extra button, such as "Select This Level"? Or maybe I can hack the DatePicker panel to add a row of radiobuttons, "Day" / "Month" / "Year" which will switch the viewMode dynamically?
$('#day').datepicker({
format: "dd/mm/yyyy",
autoclose: true,
startView: "days",
minViewMode: "days"
}).on('change', function (ev) {
$(this).datepicker('hide');
});
$('#month').datepicker({
format: "mm/yyyy",
autoclose: true,
startView: "months",
minViewMode: "months"
}).on('change', function (ev) {
$(this).datepicker('hide');
});
$('#year').datepicker({
format: "yyyy",
autoclose: true,
startView: "years",
minViewMode: "years"
}).on('change', function (ev) {
$(this).datepicker('hide');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
Day Picker: <input id="day"> <br/>
Month Picker: <input id="month"> <br/>
Year Picker: <input id="year"> <br/>
COMBINED Day OR Month OR Year Picker Picker: <input id="combined" placeholder="Can get MM/DD/YYYY, MM/YYYY, or YYYY" style="width:250px"> <br/>

You can add a popover with three buttons(or whatever style you want) and show the datepicker depending on the one that is clicked. Took the popover code from here.
$('#Pops').datepicker({
format: "dd/mm/yyyy",
autoclose: true,
startView: "days",
minViewMode: "days"
})
.on('change', function(ev) {
$(this).datepicker('hide');
});
function showDatePicker(type) {
let picker = {
day: {
format: "dd/mm/yyyy",
autoclose: true,
startView: "days",
minViewMode: "days"
},
month: {
format: "mm/yyyy",
autoclose: true,
startView: "months",
minViewMode: "months"
},
year: {
format: "yyyy",
autoclose: true,
startView: "years",
minViewMode: "years"
}
};
console.log('boo', type, picker[type])
$('#Pops').datepicker("destroy")
$('#Pops').datepicker(picker[type])
$('#Pops').datepicker('show')
}
$(document).on("click", ".day", function() {
showDatePicker('day')
});
$(document).on("click", ".month", function() {
showDatePicker('month')
});
$(document).on("click", ".year", function() {
showDatePicker('year')
});
$("#Pops").popover({
html: true,
content: function() {
return $('#popover-content').html();
},
trigger: 'manual'
})
.on('mouseenter', function() {
var _this = this;
$(this).popover('show');
$('.popover').on('mouseleave', function() {
$(_this).popover('hide');
});
}).on('mouseleave', function() {
var _this = this;
setTimeout(function() {
if (!$('.popover:hover').length) {
$(_this).popover('hide');
}
}, 300);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
COMBINED Day OR Month OR Year Picker Picker: <input id="Pops" placeholder="Can get MM/DD/YYYY, MM/YYYY, or YYYY" style="width:250px" data-toggle="popover" data-trigger="focus" data-placement="bottom"> <br/>
<div id="popover-content" class="hide">
<button class="day">day</button>
<button class="month">month</button>
<button class="year">year</button>
</div>

Based on Riddhesh's answer I also created a cleaner, simpler radiobutton-controlled mode switch, without a popover.
But just as in his answer, the key idea is (1) destroy the DatePicker, (2) re-initialize with new Options on the fly.
function setDatePicker(type, datePickerID) {
var dayModeOptions = {
format: "mm/dd/yyyy",
autoclose: true,
orientation: 'bottom',
startView: "days",
minViewMode: "days"
};
var monthModeOptions = {
format: "mm/yyyy",
autoclose: true,
orientation: 'bottom',
startView: "months",
minViewMode: "months"
};
var yearModeOptions = {
format: "yyyy",
autoclose: true,
orientation: 'bottom',
startView: "years",
minViewMode: "years"
};
// Destroy & re-initalize with specified Mode Options for ID-specified control
$(datePickerID).datepicker("destroy");
if (type == 'day') // Day Mode initialization
$(datePickerID).datepicker(dayModeOptions);
else if (type == 'month') // Month Mode initialization
$(datePickerID).datepicker(monthModeOptions);
else // Year Mode initialization
$(datePickerID).datepicker(yearModeOptions);
}
$(document).ready(function() {
// Initialize with initial Mode Options
$('#combined').datepicker({
format: "mm/dd/yyyy",
autoclose: true,
orientation: 'bottom',
startView: "days",
minViewMode: "days"
}).on('change', function (ev) {
$(this).datepicker('hide');
});
// Handle radio buttons
$('input[name=mode]').change(function(){
// Hide any current DatePicker and erase text box value
$('#combined').datepicker('hide');
$('#combined').val('');
var value = $( 'input[name=mode]:checked' ).val();
if (value == 'day') {
setDatePicker('day', '#combined');
} else if (value == 'month') {
setDatePicker('month', '#combined');
} else {
setDatePicker('year', '#combined');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<div class="">
<input type="radio" id="dayMode" name="mode" value="day" checked> <label for="dayMode">Day</label>
<input type="radio" id="monthMode" name="mode" value="month"> <label for="monthMode">Month</label>
<input type="radio" id="yearMode" name="mode" value="year"> <label for="yearMode">Year</label>
</div>
COMBINED Picker: <input id="combined" placeholder="Depends on radiobutton" style="width:250px"> <br/>

how to change format datapicker to YYYY-MM-DD

how to make the datapicker format be like 2020-01-08
$(".datepicker").datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
todayHighlight: true,
});
$("#tgl_mulai").on('changeDate', function(selected) {
var startDate = new Date(selected.date.valueOf());
$("#tgl_akhir").datepicker({
dateFormat: 'yy-mm-dd'
}, 'setStartDate', startDate);
if ($("#tgl_mulai").val() > $("#tgl_akhir").val()) {
$("#tgl_akhir").val($("#tgl_mulai").val());
}
});

You can use { dateFormat: 'yy-mm-dd' } to format your datepicker.
Try:
$(".datepicker").datepicker({
dateFormat: 'yy-mm-dd',
autoclose: true,
todayHighlight: true,
});
$(function(){
$(".datepicker").datepicker({
dateFormat: 'yy-mm-dd',
autoclose: true,
todayHighlight: true,
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<input type="text" class="datepicker" />
You can find the demo at http://jsfiddle.net/gaby/WArtA/

How to show date depends on from date

I have two datepickers. I want to show to date depends on from date. To date should be future date from from date plus 1. From and To dates are not same. To date always starts on the next day of from date.
Example:
If I select `from` 07/18/2018 `to` date do not like from 07/18/2018.
So I want to show after date of from date.
If I select `from` 07/18/2018 `to` date will start like from 07/19/2018.
If you see my JSFiddle you can understand: http://jsfiddle.net/FdfPY/771/
JavaScript:
var disabledDates = []
$(".from_date").datepicker({
minDate: 'D',
dateFormat: "dd/mm/yy",
defaultDate: "+1w",
numberOfMonths: 1,
beforeShowDay: function(d) {
if (d.getDate() == 2 || d.getDate() == 16) {
return [true, "" ];
} else {
return [false, "" ];
}
},
onClose: function(selectedDate) {
disabledDates=[selectedDate];
$(".to_date").datepicker("option", "minDate", selectedDate);
}
});
$(".to_date").datepicker({
minDate: 0,
dateFormat: "dd/mm/yy",
defaultDate: "+1w",
numberOfMonths: 1,
beforeShowDay: function(d) {
if (d.getDate() == 2 || d.getDate() == 16) {
return [true, "" ];
} else {
return [false, "" ];
}
}
});
HTML:
<div id="nested-fields row">
<div class="span2">
<div class="control-group">
<label>From</label>
<div class="controls">
<input type="text" class="from_date" />
</div>
</div>
</div>
<div class="span2">
<div class="control-group">
<label>To</label>
<div class="controls">
<input type="text" class="to_date" />
</div>
</div>
</div>
<div style="clear:left"></div>
</div>

Try below code
var disabledDates = []
$(".from_date").datepicker({
minDate: 'D',
dateFormat: "dd/mm/yy",
defaultDate: "+1w",
numberOfMonths: 1,
onClose: function(selectedDate) {
disabledDates=[selectedDate];
$(".to_date").datepicker("option", "minDate", selectedDate);
}
});
$(".to_date").datepicker({
minDate: 0,
dateFormat: "dd/mm/yy",
defaultDate: "+1w",
numberOfMonths: 1,
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
return [ disabledDates.indexOf(string) == -1 ]
}
});

How to set 3 months date range from current date in date picker?

I want to enable only 3 months from current date in bootstrap datepicker.
function addThreeMonthsToStartDate(today) {
var lastDate = new Date(today.getFullYear(), today.getMonth()+3, getDate());
return lastDate;
}
$("#startdate").datepicker({
isDisabled: function(date) {
return date.valueOf() < Date.now() ? false : true;
},
autoClose: true,
viewStart: 0,
weekStart: 1,
maxDate: lastDate,
dateFormat: "dd/mm/yyyy"
});
Any ideas?

Solution to your problem it allows only 3 months from current date.
$('#startdate').datepicker({
maxDate: "+90d",
minDate:0
});

Try this
function addThreeMonthsToStartDate(today) {
// var today = new Date();
var lastDate = new Date(today.getFullYear(), today.getMonth()+3,
today.getDate());
}
$("#startdate").datepicker({
isDisabled: function(date) {
return date.valueOf() < Date.now() ? false : true;
},
minDate: "dateToday", // If you need to disable past dates
autoClose: true,
viewStart: 0,
weekStart: 1,
maxDate: lastDate,
dateFormat: "dd/mm/yyyy"
});

Thanks a lot for your suggestions. I got the solution as below:
$("#startdate").datepicker({
isDisabled: function(date) {
var d = new Date();
return date.valueOf() < d.setMonth(d.getMonth()+3) ? false : true;
},
autoClose: true,
viewStart: 0,
weekStart: 1,
maxDate: 0,
dateFormat: "dd/mm/yyyy"
});

you most use startDate and endDate in bootstrap datepicker
function addThreeMonthsToStartDate(today) {
// var today = new Date();
var lastDate = new Date(today.getFullYear(), today.getMonth()+3,
today.getDate());
}
$("#startdate").datepicker({
isDisabled: function(date) {
return date.valueOf() < Date.now() ? false : true;
},
startDate: "dateToday", // If you need to disable past dates
autoClose: true,
viewStart: 0,
weekStart: 1,
endDate: lastDate,
dateFormat: "dd/mm/yyyy"
});

How to change date format (MM/DD/YY) to (YYYY-MM-DD) in date picker

I have following datepicker script:
<script>
$(function(){
$("#to").datepicker();
$("#from").datepicker().bind("change",function(){
var minValue = $(this).val();
minValue = $.datepicker.parseDate("mm/dd/yy", minValue);
minValue.setDate(minValue.getDate()+1);
$("#to").datepicker( "option", "minDate", minValue );
})
});
</script>
Now dateformat is MM/DD/YY .how to change the date format to YYYY-MM-DD?

Use the dateFormat option
$(function(){
$("#to").datepicker({ dateFormat: 'yy-mm-dd' });
$("#from").datepicker({ dateFormat: 'yy-mm-dd' }).bind("change",function(){
var minValue = $(this).val();
minValue = $.datepicker.parseDate("yy-mm-dd", minValue);
minValue.setDate(minValue.getDate()+1);
$("#to").datepicker( "option", "minDate", minValue );
})
});
Demo at http://jsfiddle.net/gaby/WArtA/

Try the following:
$('#to').datepicker({
dateFormat: 'yy-mm-dd'
});
You'd think it would be yyyy-mm-dd but oh well :P

I had the same issue and I have tried many answers but nothing worked.
I tried the following and it worked successfully :
<input type=text data-date-format='yy-mm-dd' >

$( ".selector" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
See:
http://jqueryui.com/demos/datepicker/
and
http://docs.jquery.com/UI/Datepicker/formatDate#utility-formatDate

If in jquery the dateformat option is not working then we can handle this situation in html page in input field of your date:
<input type="text" data-date-format='yyyy-mm-dd' id="selectdateadmin" class="form-control" required>
And in javascript below this page add your date picker code:
$('#selectdateadmin').focusin( function()
{
$("#selectdateadmin").datepicker();
});

You need something like this during the initialization of your datepicker:
$("#your_elements_id").datepicker({ dateFormat: 'yyyy-mm-dd' });

this also worked for me. Go to the bootstrap-datepicker.js.
replace this code :
var defaults = $.fn.datepicker.defaults = {
autoclose: false,
beforeShowDay: $.noop,
calendarWeeks: false,
clearBtn: false,
daysOfWeekDisabled: [],
endDate: Infinity,
forceParse: true,
format: 'mm/dd/yyyy',
keyboardNavigation: true,
language: 'en',
minViewMode: 0,
multidate: false,
multidateSeparator: ',',
orientation: "auto",
rtl: false,
startDate: -Infinity,
startView: 0,
todayBtn: false,
todayHighlight: false,
weekStart: 0
};
with :
var defaults = $.fn.datepicker.defaults = {
autoclose: false,
beforeShowDay: $.noop,
calendarWeeks: false,
clearBtn: false,
daysOfWeekDisabled: [],
endDate: Infinity,
forceParse: true,
format: 'yyyy-mm-dd',
keyboardNavigation: true,
language: 'en',
minViewMode: 0,
multidate: false,
multidateSeparator: ',',
orientation: "auto",
rtl: false,
startDate: -Infinity,
startView: 0,
todayBtn: false,
todayHighlight: false,
weekStart: 0
};

I used this approach to perform the same operation in my app.
var varDate = $("#dateStart").val();
var DateinISO = $.datepicker.parseDate('mm/dd/yy', varDate);
var DateNewFormat = $.datepicker.formatDate( "yy-mm-dd", new Date( DateinISO ) );
$("#dateStartNewFormat").val(DateNewFormat);

Try this:
$.datepicker.parseDate("yy-mm-dd", minValue);

Use .formatDate( format, date, settings )
http://docs.jquery.com/UI/Datepicker/formatDate

just add dateFormat:'yy-mm-dd' to your .datepicker({}) settings, your .datepicker({}) can look something like this
$( "#datepicker" ).datepicker({
showButtonPanel: true,
changeMonth: true,
dateFormat: 'yy-mm-dd'
});
});
</script>

Just need to define yy-mm-dd here. dateFormat
Default is mm-dd-yy
Change mm-dd-yy to yy-mm-dd. Look example below
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true
});
} );
Date: <input type="text" id="datepicker">

Thanks for all. I got my expected output
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script>
$(function(){
$("#to").datepicker({ dateFormat: 'yy-mm-dd' });
$("#from").datepicker({ dateFormat: 'yy-mm-dd' }).bind("change",function(){
var minValue = $(this).val();
minValue = $.datepicker.parseDate("yy-mm-dd", minValue);
minValue.setDate(minValue.getDate()+1);
$("#to").datepicker( "option", "minDate", minValue );
})
});
</script>
<div class="">
<p>From Date: <input type="text" id="from"></p>
<p>To Date: <input type="text" id="to"></p>
</div>

this worked for me.
$('#thedate').datepicker({
dateFormat: 'dd-mm-yy',
altField: '#thealtdate',
altFormat: 'yy-mm-dd'
});

This work for me:
$('#data_compra').daterangepicker({
singleDatePicker: true,
locale: {
format: 'DD/MM/YYYY'
},
calender_style: "picker_4", },
function(start, end, label) {
console.log(start.toISOString(), end.toISOString(), label);
});

This is what worked for me in every datePicker version, firstly converting date into internal datePicker date format, and then converting it back to desired one
var date = "2017-11-07";
date = $.datepicker.formatDate("dd.mm.yy", $.datepicker.parseDate('yy-mm-dd', date));
// 07.11.2017

For me in datetimepicker jquery plugin format:'d/m/Y' option is worked
$("#dobDate").datetimepicker({
lang:'en',
timepicker:false,
autoclose: true,
format:'d/m/Y',
onChangeDateTime:function( ct ){
$(".xdsoft_datetimepicker").hide();
}
});

$('#selectdateadmin').focusin( function()
{
$("#selectdateadmin").datepicker();
});