Develop Reference

Display day name when date is selected from datepicker using jquery

I want to display the day name when date is selected from the datepicker dynamically. When the user selects the particular date from datepicker i want to display which day it is dynamically.How can I fetch the day from the datepicker. Here is the code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
var date = new Date();
var dayNo = date.getDay();
var mindate = (7-dayNo);
$( "#datepicker" ).datepicker({
dateFormat: 'yy-mm-dd', firstDay: 1,minDate: mindate
});
});
</script>
<input type="text" id="datepicker">

Use onSelect with custom define day [array] you want to display.
$(function() {
var date = new Date();
var dayNo = date.getDay();
var mindate = (7 - dayNo);
var d = ['sun', 'mon', 'tue', 'wed', 'th', 'fr', 'sat' ];
$("#datepicker").datepicker({
dateFormat: 'yy-mm-dd',
firstDay: 1,
minDate: mindate,
onSelect: function(dateText, inst) {
var today = new Date(dateText);
console.log(d[today.getDay()]);
$('#datepicker').val(dateText + ' ' +d[today.getDay()]);//If you only want day remove dateText concat part
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<input type="text" id="datepicker">

you can try this. I hope it will help you:
<input id="datepicker" type="text">
<p class="name"></p>
$( document ).ready(function() {
$("#datepicker").datepicker({
dateFormat: "dd-mm-yy",
onSelect: function(dateText, inst) {
var date = $.datepicker.parseDate(inst.settings.dateFormat || $.datepicker._defaults.dateFormat, dateText, inst.settings);
var dateText = $.datepicker.formatDate("DD", date, inst.settings);
$("p.name").html( "Day Name= " + dateText ); // Just the day of week
}
});
});

Displaying difference of only month year range duration using Jquery DatePicker IN n month n year format

Currently I am building some application and I need to take the difference of the month and year range selected by user, but its not working for me.
I'm just getting the date selected by user, but not the difference. The datepicker method is giving the current system date.
What I want is
from date: Aug-2016
To date: Sep-2017
Difference: 1 month 1 year
AND
from date: Aug-2017
To date: Oct-2017
Difference: 2 month
Any suggestions
$("#from, #to").datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
},
beforeShow : function(input, inst) {
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNames'));
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
}
var other = this.id == "from" ? "#to" : "#from";
var option = this.id == "from" ? "maxDate" : "minDate";
if ((selectedDate = $(other).val()).length > 0) {
year = selectedDate.substring(selectedDate.length-4, selectedDate.length);
month = jQuery.inArray(selectedDate.substring(0, selectedDate.length-5), $(this).datepicker('option', 'monthNames'));
$(this).datepicker( "option", option, new Date(year, month, 1));
}
}
});
//button click function
$("#btnShow").click(function(){
if ($("#from").val().length == 0 || $("#to").val().length == 0){
alert('All fields are required');
} else {
alert('Selected Month Range :'+ $("#from").val() + ' to ' + $("#to").val());
}
});
.ui-datepicker-calendar {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.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/jqueryui/1.12.1/jquery-ui.js"></script>
<div style="text-align:center;">
<label for="from">From</label>
<input type="text" id="from" name="from" readonly="readonly" />
<label for="to">to</label>
<input type="text" id="to" name="to" readonly="readonly" />
<input type="button" id="btnShow" value="Show" />
</div>

Please find below mentioned solution. Here you can find difference between range in months.
$(document).ready(function() {
$("#from").datepicker({
dateFormat: 'yy-mm',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
beforeShow: function(input, inst) {
if (!$(this).val()) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1)).trigger('change');
}
},
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
$("#to").datepicker("option", {minDate: new Date(inst.selectedYear, inst.selectedMonth, 1)})
}
});
$('#from').datepicker('setDate', new Date());
$('#to').datepicker({
dateFormat: 'yy-mm',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1)).trigger('change');
}
});
$("#btnShow").click(function() {
if ($("#from").val().length == 0 || $("#to").val().length == 0) {
alert('All fields are required');
} else {
var startDay = new Date($("#from").val());
var endDay = new Date($("#to").val());
var date2_UTC = new Date(Date.UTC(endDay.getUTCFullYear(), endDay.getUTCMonth()));
var date1_UTC = new Date(Date.UTC(startDay.getUTCFullYear(), startDay.getUTCMonth()));
var months = date2_UTC.getMonth() - date1_UTC.getMonth();
if (months < 0) {
date2_UTC.setFullYear(date2_UTC.getFullYear() - 1);
months += 12;
}
var years = date2_UTC.getFullYear() - date1_UTC.getFullYear();
if (years > 0) {
if(months > 0)
$('#result').html(years + " year " + " " + months + " month");
else
$('#result').html(years + " year ");
} else {
$('#result').html(months + " month");
}
}
});
});
.ui-datepicker-calendar {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<style>.ui-datepicker-calendar {display: none;}</style>
<div style="text-align:center;">
<label for="from">From</label>
<input type="text" id="from" name="from" readonly="readonly" />
<label for="to">to</label>
<input type="text" id="to" name="to" readonly="readonly" />
<input type="button" id="btnShow" value="Show" />
</div>
<div id="result"></div>

Use Jquery datepicker as month range picker

I want to use jquery UI datepicker as month select picker. What is the code for it? Here I tried but it wasn't success
$('#startDateTotal').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'yy-MM ',
maxDate: 0,
onClose: function (selectedDate) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
$("#endDateTotal").datepicker("option", "minDate", selectedDate);
}

Add the following css to it:
.ui-datepicker-calendar {
display: none;
}
This hides the calendar and is a hacky way of doing it, but it is the only way out.

I hope the following code helps you,
Visit http://jsfiddle.net/tmnasim/JLydp/
html
<label for="myDate">Date :</label>
<input name="myDate" class="monthYearPicker" />
css
.ui-datepicker-calendar {
display: none; }
jquery
$(function() {
$('.monthYearPicker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy'
}).focus(function() {
var thisCalendar = $(this);
$('.ui-datepicker-calendar').detach();
$('.ui-datepicker-close').click(function() {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
thisCalendar.datepicker('setDate', new Date(year, month, 1));
});
});
});

Jquery datepicker in mindate and maxdate

I have this date time picker from jquery . here is my code. it's not working after adding some code for month and year only.
the problem is after selecting on the 2nd input. the first input disappears.. then also. make the validation of min and maxdate (e.g first input --- 5/2014 - 6/2014 the validation there is on the second input you can't select months before month of may.
$(function() {
$( "#dtp1" ).datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function( selectedDate, dateText, inst ) {
$( "#dtp2" ).datepicker( "option", "minDate", selectedDate );
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
$(function() {
$( "#dtp2" ).datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function( selectedDate, dateText, inst ) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
$( "#dtp1" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
here is the link http://jsfiddle.net/wind_chime18/RUmCg/2/

I have done your validation for 2nd date picker you can copy it for 1st datepicker.
Check link
js fiddle link
//Php code
<input type="text" id="dtp1">
<input type="text" id="dtp2">
<!--<input type="text" id="dtp2" disabled>-->
//Javascript COde
$(function () {
$("#dtp1").datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'mm/yy',
onClose: function (selectedDate, dateText, inst) {
//$( "#dtp2" ).datepicker( "option", "minDate", selectedDate );
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
//$("#dtp2").removeAttr('disabled');
}
});
});
$(function () {
$("#dtp2").datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'mm/yy',
onClose: function (selectedDate, dateText, inst) {
if($("#dtp1").val() == "") {
alert("Please select dpt1");
return false;
}
else {
var dtp1 = $("#dtp1").val();
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
var d1, d2;
d2 = (year *1 ) + ((month *1)/ 12);
d1 = (dtp1.split('/')[1] *1 ) + ((dtp1.split('/')[0] *1)/ 12);
if(d1 > d2) {
alert("dpt1 is greater then dpt2");
return false;
}
else {
$(this).datepicker('setDate', new Date(year, month, 1));
}
}
}
});
});

$(document).on('click','',function(){}) not working properly

hae, am working with $(document).on('click','',function(){}); but its not working as i want
below is my code:
<script type="text/javascript">
$(function () {
$(document).on('click', '.date-picker', function () {
$(this).datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function (dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
});
</script>
table_html = '<td style="min-width: 200px;"><input name="' + control_id + '" id="' + control_id + '" value="' + row_val + '" type="date" data-role="datebox" data-options=\'{"mode": "calbox", "useClearButton": true}\' ></td>';
$('#variables').append(table_html);
The above code creates a month year picker. It works fine.
But when I click for the 1st time, the month picker control does nothing. When I clicked outside it and click on it again, it worked.
Any idea or suggestions on how the click event will be detected on 1st time click will be highly appreciated

Try show()
$(function () {
$(document).on('click', '.date-picker', function () {
var datepicker = $(this).data('uidatepicker');
if(datepicker) return;
$(this).datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function (dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
}).datepicker('show');
});
});
Demo: Fiddle