I am trying to show additional disabled dates for the datepicker. For instance, I have min date as 2-1-2018 and max date as 3-1-2018. Is there anyway way to show 1-1-2018 and 4-1-2018 as disabled? Here is what I have right now. I don't need to dynamically set the dates. I need to display additional disabled dates so the user can see a larger range of disabled dates.
beforeShow : function () {
if (attrs.selecteddate) {
/*
2018-10-29T00:00:00.000+0000 before
2018-10-29 after
Only need the 00-00-0000 part of the date to avoid time zone issues. QoT always returns 00T for timezone anyways.
*/
var formattedDate = attrs.selecteddate.split("T");
attrs["formattedDate"] = formattedDate[0].substring(5) + "-" + formattedDate[0].substring(0, 4);
/*z
Set the date that the calander will display.
Append universal date time zone so correct date will be set in Firefox. It replaces T00:00:00.000+0000 with T12:00:00Z
*/
jQuery(this).datepicker('setDate', new Date(formattedDate[0] + 'T12:00:00Z'));
}
jQuery(this).datepicker('option', {
minDate : ( attrs.edittype === 'single' ) ? incrementDate(attrs.mindate) : attrs.mindate,
maxDate : ( attrs.edittype === 'single' ) ? convertToDateObj(attrs.maxdate) : attrs.maxdate
});
},
This below js code will help you to change min and max date dynamically.
$(function(){
$("#fdate").datepicker({
formatDate:"dd-mm-yy",
onselect:function(){
//do stuff here
},
onclose:function(){
//do stuff here
}
});
var date1 = "15-11-2017";
var date2 = "17-11-2017"; //you can pass dynamically date
$("#fdate").datepicker("option", "minDate", date1);
$("#fdate").datepicker("option", "maxDate", date2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input id="fdate" type="text" name="date" />
Related
I am facing an issue using Kendo Js Date Time Picker.
The situation is: "I have a date time picker which can only allow dates from current time onwards. Those pages have already been saved, when I am trying to show the date, the dates aren't showing though it became a back date.
My concern is: The input should show the date which has already been saved(Whether that is past or present), but it shouldn't allow user to select back date.
The code are below.
<input id="datetimepicker" />
let options = { //Setting options for the datepicker
value: new Date(),
dateInput: true,
disableDates: function (date) {
if (date <= new Date()) {
return true;
} else {
return false;
}
},
};
$("#datetimepicker").kendoDateTimePicker(options);
const priorValue = new Date("8/31/2022 2:18 PM"); // Let Already selected date
let selector = "#datetimepicker";
let datetimepicker = $(selector).data("kendoDateTimePicker");
datetimepicker.value(priorValue);
datetimepicker.trigger("change");
function roundToNearest30(date) { //Function to round minutes to nearest 30 minute.
date = new Date(date);
const minutes = 30;
const ms = 1000 * 60 * minutes;
return new Date(Math.round(date.getTime() / ms) * ms);
}
For your reference a sample dojo
I need to show the selected date which is disabled.
You can use the disableDates configuration to disable prior dates and the month.content configuration to define how the dates will be rendered and show/hide dates conditionally:
<script id="cell-template" type="text/x-kendo-template">
<span class="#= (data.date <= new Date() && !isInArray(data.date, data.dates)) ? 'hidden' : 'visible' #">#= data.value #</span>
</script>
Here is a sample dojo.
So I am using the calendar app on a page that has a set date. I have it so when you click on the calendar, whatever is in the input that has the date, gets changed to the date you clicked on.
When you load into the page I want whatever date that is in the input to be what the calendar is set to. Thanks.
LINK TO PLUGIN - https://www.jqueryscript.net/time-clock/Simple-jQuery-Calendar-Date-Picker-Plugin-DCalendar.html
var pageDate = "4/04/2018";
<input class="date">
$('.date').val(pageDate);
// Make above date the selected date
// Code below is for setting input to date you select. Currently works.
$('.box').dcalendarpicker({
format: 'mm-dd-yyyy'
}).on('datechanged', function(e) {
console.log('Date change');
var d = e.date;
selectedDate = moment(d, 'MM-DD-YYYY');
var theDate = selectedDate._i;
$('.date').val(theDate);
var weekdayLongform = selectedDate.format("dddd, MMMM");
var dateLongform = selectedDate.format(" D");
var yearLongform = selectedDate.format(" YYYY");
});
Just set the date as the value of the input (in the same format specified in the plugin initialization). That will do the trick.
<!-- value specifid as mm-dd-yyyy -->
<input class="date" value="03-11-2018">
I have this form that has a date input. What is the best way in Javascript that I can ensure the value selected is neither a future date or a past date. I have implemented jQuery date picker to select date see code below
<html>
<!--maina-->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="main.css" rel="stylesheet" type="text/css"/>
<script>
$(function() {
var date = $('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' }).val();
});
function ValidateForm(){
var date_of_circulation = document.forms["myForm"]["date_of_circulation"].value;
if (date_of_circulation == null || date_of_circulation ==""){
alert ("You have to select the date the manuscript was circulated");
return false;
}
}
</script>
<form enctype="multipart/form-data" name = "myForm" action = "" onsubmit="return ValidateForm()" method = "post">
Date of circulation:<input name="date_of_circulation" input type="text" id="datepicker"></p>
<input name = "add_manuscript" type="submit" value = "submit">
</form>
</html>
You can do it like this
var yourDate = new Date("12/5/2015"); //input value
var todayDate = new Date(); //Gets the today's date value
You have to use function setHours
if(yourDate.setHours(0,0,0,0) == todayDate.setHours(0,0,0,0));
{
//Do your stuff
}
NOTE: You can also do it using the jquery's datepicker
var currentDate = new Date();
$("#datepicker").datepicker("setDate", currentDate);
so that you can be sure that today's date is already selected.
EDIT: You can also look at datejs
datejs API Documentation
i found an effective and simple solution by introducing maxdate and mindate as explained here: date picker restrict date range. After rethinking the validation rules i decided that the logical validation for date_of_circulation value can be a date in the past but not exceeding current date and therefore changed var date in date picker to
var date = $("#datepicker").datepicker({ maxDate: new Date,dateFormat: 'yy-mm-dd', minDate: new Date (0) });
If date field must be set as current date, no future or past date than
set text field's default value to current date, you need not to use date picker as it's not user friendly to have a date picker without any other date option.
Also by doing this way, you need not to validate form on submit.
<input name="date_of_circulation" input type="text" id="datepicker" value="<?php echo date('Y-m-d'); ?>" readonly="readonly">
set input box as readonly so that user can not change the date.
I have problem to set or show date in datepicker textbox at firsttime
I have two textboxes, the one is for datepicker and the second is for alternate format.
<input type="text" id="birth_date_display" />
<input type="text" id="birth_date" />
and scripts like this
$( "#birth_date_display" ).datepicker({
dateFormat: "d M, yy",
altField: "#birth_date",
altFormat: "yy-mm-dd"
});
my question is, How if i have String like: var datebirth="2011-08-16"
then i want to set to the textbox.
i had try to make script like this:
document.getElementById("birth_date_display").value = datebirth; //it's NOT works
document.getElementById("birth_date").value = datebirth; //it's works
thanks :)
You want to use the setDate method on the DatePicker:
$( "#birth_date_display" ).datepicker("setDate", datebirth);
$( "#birth_date" ).datepicker("setDate", datebirth);
Edit: You could probably also do it this way, but I haven't tested it:
$( "#birth_date_display, #birth_date" ).datepicker("setDate", datebirth);
You just need to call the setDate DatePicker method. This will set the value of the DatePicker and update both text box elements with the appropriate value in the formats you specified for the dateFormat and altFormat.
var datebirth="2011-08-16";
$("#birth_date_display").datepicker("setDate",new Date(datebirth));
You may also try to format month names instead of integer
var Month = "Feb" //some month;
var Year = "2013" //some year;
var mydate = new Date('1 '+ Month + " " + Year);
$(".txtDate").datepicker('setDate', new Date(Year, mydate.getMonth(), 1));
I have a page where the user can select three different appointment days using the jQuery UI Datepicker. When the user selects a day in the first field, I would like that date blocked out from the other two fields. I currently am also disabling Sundays, but cannot get dynamic date disabling working.
Appointment Time 1<br />
<input id="appointment1_date" type="text" name="appointment1_date" value="Select..." />
Appointment Time 2<br />
<input id="appointment2_date" type="text" name="appointment2_date" value="Select..." />
Appointment Time 3<br />
<input id="appointment3_date" type="text" name="appointment3_date" value="Select..." />
<script type="text/javascript">
function noSunday(date){
var day = date.getDay();
return [(day > 0), ''];
};
</script>
<script type="text/javascript">
$(function() {
$("#appointment1_date").datepicker(
{
minDate: +2,
beforeShowDay: noSunday
});
});
$(function() {
$("#appointment2_date").datepicker(
{
minDate: +2,
beforeShowDay: noSunday
});
});
$(function() {
$("#appointment3_date").datepicker(
{
minDate: +2,
beforeShowDay: noSunday
});
});
</script>
You can use the beforeShowDay function to set disabled dates.
See here for a full explanation.
To block out dates from the other fields, you have to obtain the date and do the comparison in your handling function. Given the code you provided, the following should work as a replacement for noSunday:
function noSunday(date) {
var day = date.getDay();
return [
(day > 0 &&
date.valueOf() != $('#appointment1_date').datepicker('getDate').valueOf()
),
''
];
};
Basically, not only do you want to make sure that day > 0 so that it isn't a Sunday, but also make sure that the date is not equal to the date given by appointment1_date. Using .datepicker('getDate') and comparing its valueOf() with date is the key.
You might want to rename it something like noSundayOrSelected or something equally descriptive.