jQuery: datepicker, alert the dayname of the selected

jQuery: datepicker, alert the dayname of the selected - javascript

How can i alert the selected days name? Example 'Monday'.
So when you pick 7th june 2011 it will alert "Tuesday"
<script>
$(function() {
$( "#date" ).datepicker({
dateFormat: 'dd/mm/yy',
onSelect: function(dateText, inst) {
// how can i grab the day name of the day, example "Monday" and alert it out?
// alert( ? );
}
});
});
</script>

The jQueryUI's Datepicker comes with a formatDate function that can do that for you. If you're using a localized version, it'll show the days in that language too.
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
alert($.datepicker.formatDate('DD', date));
}
For more information on localization of on Dapicker's utility functions, have a look at http://jqueryui.com/demos/datepicker/.

<script>
$(function() {
$( "#date" ).datepicker({
dateFormat: 'dd/mm/yy',
onSelect: function(dateText, inst) {
var weekday=new Array(7);
weekday[0]="Sunday";
weekday[1]="Monday";
weekday[2]="Tuesday";
weekday[3]="Wednesday";
weekday[4]="Thursday";
weekday[5]="Friday";
weekday[6]="Saturday";
alert(weekday[inst.getDate().getDay()];
}
});
});
</script>

this will work if you don't mind showing the name of the day in the input box
if you dont like it you can use second hidden input (http://jqueryui.com/demos/datepicker/#alt-field)
$(function() {
$( "#date" ).datepicker({
dateFormat: 'DD, d MM, yy',
onSelect: function(dateText, inst) {
var stop = dateText.indexOf(',');
alert( dateText.substring(0, stop));
}
});
});
example at http://jsfiddle.net/aa74R/

You can parse a date like this (mm/dd/yyyy):
new Date(Date.parse("06/07/2011"))
and use the .getDay function. You could do this:
// parse data
var regexp = /(\d{2})\/(\d{2})\/(\d{2})/.exec("07/06/11");
//form date
var date = new Date(Date.parse(regexp[2] + "/" + regexp[1] + "/20" + regexp[3]));
alert(date.getDay()); // 2 -> Tuesday (starts at 0 = Sunday)

Use inbuilt function
$("#datepicker" ).datepicker({ onSelect: function(dateText, inst) {
alert($.datepicker._defaults.dayNames[new Date(dateText).getDay()]);
}});

Related

jQuery datetimepicker set end date when start is given

How I can change the end date when the user selects the start time? I want to disable the days before the start time. It's homework, but I am new to jquery.
Thanks. Here is the code i managed to work, but i don't know what to change.
<script>
$(document).ready(function() {
$('#start').val(moment(start).format('YYYY-MM-DD'));
$('#end').val(moment().add(+1, 'days').format('YYYY-MM-DD'));
$("#checkAll").click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
$("#checkAllEdit").click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
$("#start, #end").datepicker('setDate', new Date());
$("#start, #end").datepicker({
dateFormat: 'yy-mm-dd'
});
});
</script>
THE WORKING VERSION:
$('body').on('focus', ".dpicker", function () {
$(this).datepicker();
});
$(function () {
$("#start").datepicker({
minDate: 1,
changeMonth: true,
dateFormat: 'yy-mm-dd',
onClose: function (selectedDate, instance) {
if (selectedDate != '') {
$("#end").datepicker("option", "minDate", selectedDate);
var date = $.datepicker.parseDate(instance.settings.dateFormat, selectedDate, instance.settings);
date.setMonth(date.getMonth() + 3);
var minDate2 = new Date(selectedDate);
minDate2.setDate(minDate2.getDate() + 1);
$("#end").datepicker("option", "minDate", minDate2);
$("#end").datepicker("option", "maxDate", date);
}
}
});
$("#end").datepicker({
minDate: 1,
changeMonth: true,
dateFormat: 'yy-mm-dd',
onClose: function (selectedDate) {
$("#star").datepicker("option", "maxDate", selectedDate);
}
});
});

you can try to add minDate: 0 to set min date today
$("#start, #end").datepicker({
dateFormat: 'yy-mm-dd',
minDate: 0 /* This will be today */
});
If you want to add minDate to some other day you can just use
new Date(2007, 1 - 1, 1) for example
$("#start, #end").datepicker({
dateFormat: 'yy-mm-dd',
minDate: new Date(2007, 1 - 1, 1)
});
EDIT to answer comment:
If you want to set end date, then you can use setDate
$("#start, #end").datepicker({
dateFormat: 'yy-mm-dd',
setDate: new Date(2016,10,03)
});
And it seems like you want end date to be 1 day after start date, then take start date value
var startDate = $('#start').datepicker('getDate') + 1; /* Get start date and add one day */
$('#end').datepicker({
dateFormat: 'yy-mm-dd',
setDate: startDate
});
For further reading: https://api.jqueryui.com/datepicker/#option-minDate

beforeShowDay disables minDate in jQuery datepicker

I'm using two jQuery datepickers, with disabled dates based on a generated array. When I put the $("#date") datepickers after the $('input') one, that works fine. However, I also need a mindate set to today, and a maxDate set to 1 year after that; it works when the order is the other way around. How can I manage to make them both work?
$(function() {
var array=[]; //disabled dates for the beforeShowDay go here
$('input').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [$.inArray(string, array) == -1];
}
});
$( "#date" ).datepicker({
dateFormat: 'yy-mm-dd',
minDate: new Date(),
maxDate: '+1y',
onSelect: function(date){
var selectedDate = new Date(date);
var msecsInADay = 86400000;
var endDate = new Date(selectedDate.getTime() + msecsInADay);
$("#date1").datepicker( "option", "minDate", endDate );
$("#date1").datepicker( "option", "maxDate", '+1y' );
}
});
$("#date1").datepicker({
dateFormat: 'yy-mm-dd',
});
});

I would not try to apply two selectors ('input' and '#date') on the same DOM element because the second can override what the first configured. If you would like that both datepickers share the same beforeShowDay function you can declare it once and assign it to each datepicker.
It is not totally clear to me what you want to achieve. But maybe the following approach with a common beforeShowDay function could help. In any case the example below will show you how to insert a JSFiddle including datepicker into your question to clarify what you want.
$(function() {
var array=['2016-12-08']; //disabled dates for the beforeShowDay go here
var beforeShowDay = function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [$.inArray(string, array) == -1];
};
$( "#date" ).datepicker({
beforeShowDay: beforeShowDay,
dateFormat: 'yy-mm-dd',
minDate: new Date(),
maxDate: '+1y',
onSelect: function(date){
var selectedDate = new Date(date);
var msecsInADay = 86400000;
var endDate = new Date(selectedDate.getTime() + msecsInADay);
$("#date1").datepicker( "option", "minDate", endDate );
$("#date1").datepicker( "option", "maxDate", '+1y' );
}
});
$("#date1").datepicker({
beforeShowDay: beforeShowDay,
dateFormat: 'yy-mm-dd'
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="date">
<input id="date1">

Restricting second date in jQuery UI Datepicker [duplicate]

I have two text boxes with a datepicker hooked up to them. The text boxes are for start date and end date. The first datepicker is setup so that the user cannot choose a date before today, but can choose any date in the future.
How can I setup the second datepicker so that it cannot choose a date before the date chosen in the first date picker? For example: If today is 12/11/10 and I choose 12/15/10 in the first datepicker, then the second date picker shouldn't be able to choose anything before 12/15/10.
Heres what I have so far:
$("#txtStartDate").datepicker({ minDate: 0 });
$("#txtEndDate").datepicker({});

For example, in this sample code, startDatePicker is selected as 2010-12-12, change event of startDatePicker sets the minDate of endDatePicker 2010-12-13. It locks the cells before this date. This is a sample for what #Victor mentioned..I hope it helps...Regards...Ozlem.
$("#startDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
minDate: new Date(),
maxDate: '+2y',
onSelect: function(date){
var selectedDate = new Date(date);
var msecsInADay = 86400000;
var endDate = new Date(selectedDate.getTime() + msecsInADay);
//Set Minimum Date of EndDatePicker After Selected Date of StartDatePicker
$("#endDatePicker").datepicker( "option", "minDate", endDate );
$("#endDatePicker").datepicker( "option", "maxDate", '+2y' );
}
});
$("#endDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true
});

Update:
The approach above set the minDate only on creation time.
I used the onSelect event to change the minDate option of the second datepicker like this:
$("#txtStartDate").datepicker({
showOn: "both",
onSelect: function(dateText, inst){
$("#txtEndDate").datepicker("option","minDate",
$("#txtStartDate").datepicker("getDate"));
}
});

the Tin Man's solution worked for me after adding $("#txtEndDate").datepicker() at the bottom
$("#txtStartDate").datepicker({
showOn: "both",
onSelect: function(dateText, inst){
$("#txtEndDate").datepicker("option","minDate",
$("#txtStartDate").datepicker("getDate"));
}
});
$("#txtEndDate").datepicker(); //it is not working with out this line

try this man:
$("#dateTo").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
minDate: new Date()
}).datepicker("setDate", new Date());
$("#dateFrom").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
onSelect: function(){
$('#dateTo').datepicker('option', 'minDate', $("#dateFrom").datepicker("getDate"));
}
}).datepicker("setDate", new Date());

$('#start_date').datepicker({
endDate: new Date(),
autoclose: true,
}).on("changeDate", function (e) {
$('#end_date').datepicker('setStartDate', e.date);
});
$('#end_date').datepicker({
autoclose: true,
});

From a pure UI standpoint, you shouldn't. If the user picks the wrong month on both datepickers, and tries to select the correct month, he has a 50% change of being hindered by the UI. Ideally, you would allow the incorrect selection and display a helpful error message saying the end date should be after the end date.
If you wish to implement your idea : give each datepicker a "change" event that changes the options on the other datepicker appropriately.

Use the "getDate" method of the first datepicker UI and pass it into minDate option of the second datepicker:
$("#txtEndDate").datepicker({
showOn: "both",
minDate: $("#txtStartDate").datepicker("getDate")
});

Use This Code:
<script type="text/javascript">
$(function () {
$("#txtStartDate").datepicker({
dateFormat: 'dd/mm/yy',
inline: true,
minDate: 'dateToday'
});
$("#txtEndDate").datepicker({
dateFormat: 'dd/mm/yy',
inline: true,
minDate: $("#txtStartDate").datepicker("getDate") });
});
</script>

Hi everyone going to show what works with me in this case:
2 Datepickers ( DateFrom and DateTo)
HTML:
<!-- Datapicker dateFrom -->
<label for="dateFrom"> Date from: </label>
<div>
<input type="text" id="dateFrom" class="form-control" autocomplete="off"
th:placeholder="Enter a date From.."/>
</div>
<!-- Datapicker dateTo-->
<label for="dateTo"> Date to: </label>
<div>
<input type="text" id="dateTo" class="form-control" autocomplete="off"
th:placeholder="Enter a date to..."/>
</div>
Next you build your datapickers in JavaScript:
Datapicker activation (With YOUR datapicker build requirements)
$("#dateFrom").datepicker({
dateFormat: 'yy-mm-dd',
showButtonPanel: true
});
$('#dateTo').datepicker({
dateFormat: 'yy-mm-dd',
showButtonPanel: true
});
-And finally on the OnChange Event, for every time a Date is picked in any of the datepickers the selectable range avaliable in the other Datapicker changes.
$("body").on("change", "#dateFrom", function() {
$('#dateTo').datepicker('option', 'minDate', $("#dateFrom").datepicker("getDate"));
});
$("body").on("change", "#dateTo", function() {
$('#dateFrom').datepicker('option', 'maxDate', $("#dateTo").datepicker("getDate"));
});
This make the DateTo DataPicker limit on change the date of the DateFrom Datapicker and viceversa.

$startDateCtrl.change(function () {
setMinEndDateValue($startDateCtrl, $endDateCtrl);
});
$endDateCtrl.datepicker();
I have two Date picker start and end.
End Date min and max date we are setting based on the selection from start.
Min start date for End date picker is start date from start picker selection.
Max end date for end date picker is selected start date from start date picker + 7 days.
function setMinEndDateValue($startDateCtrl, $endDateCtrl) {
var $maxSchedulingDate = new Date(#MaxDate.Year, #MaxDate.Month -1, #MaxDate.Day );
var $startDate = $startDateCtrl.val();
var $selectedStartDate = new Date($startDate);
$selectedStartDate.setDate($selectedStartDate.getDate() + 7); // increasing the start date by 7 days (End Date max)
var $maxEndDate = new Date();
if ($selectedStartDate > $maxSchedulingDate) {
$maxEndDate = $maxSchedulingDate;
}
else {
$maxEndDate = $selectedStartDate;
}
$endDateCtrl.datepicker("option", "minDate", $startDate);
$endDateCtrl.datepicker("option", "maxDate", $maxEndDate);
}

Building on the previous answers in this thread, I felt a solution that worked with defaults and reapplied both min and max dates would be useful:
// Defaults
var defaultFromDate = new Date();
var defaultToDate = new Date();
defaultToDate.setMonth(defaultToDate.getMonth() + 1);
// To
$("#datepickerTo").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true,
});
$("#datepickerTo").datepicker("setDate", defaultToDate);
function limitToDateSpan(currentFromDate) {
$("#datepickerTo").datepicker("option", "minDate", currentFromDate);
var maxDate = new Date(currentFromDate.getTime());
maxDate.setFullYear(maxDate.getFullYear() + 1);
$("#datepickerTo").datepicker("option", "maxDate", maxDate);
}
limitToDateSpan(defaultFromDate);
// From
$("#datepickerFrom").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true,
minDate: "2013-01-01",
maxDate: "+1Y",
onSelect: function (dateText) {
limitToDateSpan(new Date(dateText));
}
});
$("#datepickerFrom").datepicker("setDate", defaultFromDate);

$("#<%=txtFromDate.ClientID%>").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-M-yy',
showOn: "button",
buttonImage: "../Images/Calendar.png",
buttonImageOnly: true,
yearRange: '-20:+20',
buttonText: "Date with abbreviated month name",
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() + 1);
$("#<%=txtToDate.ClientID%>").datepicker("option", "minDate", dt);
}
});
$("#<%=txtToDate.ClientID%>").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-M-yy',
showOn: "button",
buttonImage: "../Images/Calendar.png",
buttonImageOnly: true,
yearRange: '-20:+20',
buttonText: "Date with abbreviated month name",
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() - 1);
$("#<%=txtFromDate.ClientID%>").datepicker("option", "maxDate", dt);
}
});

DatePicker Start Date and Finish Date Validation without plugin

Using Asp.Net MVC 4 with JqueryUI.
I have 2 textboxes which provide me datepickers. I need validation for; start date can be equal to finish date and finish date can not be less from start date.
Datepicker script code;
<script>
$(function () {
$(".date").datepicker({
changeMonth: true,
changeYear: true
});
});
</script>
My textboxes:
<td>#Html.TextBoxFor(model => model.StartDate, "{0:dd.MM.yyyy}", new { #class = "date", #id="dt1" }) </td>
<td>#Html.TextBoxFor(model => model.FinishDate, "{0:dd.MM.yyyy}", new { #class = "date", #id="dt2" }) </td>
I found this code from this subject. But i can't get validation. I cant figure out what's the problem. All helps will be appreciated.
$(document).ready(function () {
$("#dt1").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
onSelect: function (date) {
var dt2 = $('#dt2');
var startDate = $(this).datepicker('getDate');
var minDate = $(this).datepicker('getDate');
dt2.datepicker('setDate', minDate);
startDate.setDate(startDate.getDate() + 30);
//sets dt2 maxDate to the last day of 30 days window
dt2.datepicker('option', 'maxDate', startDate);
dt2.datepicker('option', 'minDate', minDate);
$(this).datepicker('option', 'minDate', minDate);
}
});
$('#dt2').datepicker({
dateFormat: "dd-M-yy"
});
});
JQuery - end date less than start date

I think this may helps you, when you changes one of the datepickers will show an error if both are different. and also se the isValid variable to false too stop it from being able to submit
<script>
var isValid=true;
$(function () {
$(".date").datepicker({
changeMonth: true,
changeYear: true,
onSelect: function() {
var date1 = $("#dt1").datepicker('getDate');
var date2 = $("#dt2").datepicker('getDate');
if (date1.getDate() === date2.getDate() &&
date1.getMonth() === date2.getMonth() &&
date1.getFullYear() === date2.getFullYear())
{
isValid=false;
//ALERT error
}
}
});
});
</script>

How do i disable public holidays in a jQuery UI date picker?

I'm making a holiday booking application and obviously you don't need to book off holidays that are already given to you, so I need to know how I can disable, Christmas, for example from the date picker every year without me having to change the code every year.
This is my jQuery UI date picker code so far:
<script>
$(function() {
$("#from").datepicker({
beforeShowDay: $.datepicker.noWeekends,
defaultDate: "today",
changeMonth: true,
numberOfMonths: 1,
minDate: "today",
dateFormat: "dd/mm/yy",
onClose: function(selectedDate) {
$( "#to" ).datepicker("option", "minDate", selectedDate);
}
});
$("#to").datepicker({
beforeShowDay: $.datepicker.noWeekends,
defaultDate: "today",
changeMonth: true,
numberOfMonths: 1,
minDate: "today",
dateFormat: "dd/mm/yy",
onClose: function(selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
}
});
});
</script>

you can exclude the dates like
var holidays = ["2014-02-27","2014-02-01"];
$( "#from" ).datepicker({
beforeShowDay: function(date){
var datestring = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ holidays.indexOf(datestring) == -1 ]
}
});
you can provide more dates to the holidays array

You have to use beforeShowDay attribute of DatePicker like below:
$("#textboxid").datepicker({
beforeShowDay: function(date) {
var day = date.getDay();
return [day != 0,''];
}
});
Above script will disable all Sundays.

We Keep Coding

JavaScript is the programming language of the Web.

jQuery: datepicker, alert the dayname of the selected - javascript

Use inbuilt function $("#datepicker" ).datepicker({ onSelect: function(dateText, inst) { alert($.datepicker._defaults.dayNames[new Date(dateText).getDay()]); }});

Related

jQuery datetimepicker set end date when start is given

beforeShowDay disables minDate in jQuery datepicker

Restricting second date in jQuery UI Datepicker [duplicate]

DatePicker Start Date and Finish Date Validation without plugin

How do i disable public holidays in a jQuery UI date picker?

Categories

Resources