Updating jQuery Datepicker restricted dates when a button is clicked - javascript

Is there a simple way to update a jQuery Datepicker when a button is clicked? The datepicker is displayed inline, and I would like it to always be visible.
The logic flow behind this is that the user would check off certain dates and click the 'Done' button, which would update the datepicker to restrick the dates they selected.
The code below just creates the datepicker when the program opens. Should I just create a new datepicker with the restricted dates every time the user clicks the 'Done' button?
$( "#calenderDiv" ).datepicker({
minDate: 0,
onSelect: function(dateText, obj){
$('#A12').val(dateText);
},
beforeShowDay: function(date) {
var day = date.getDay();
return [(day == 0)];
}
});

The jQueryUI documentation states that
By default, the datepicker calendar opens in a small overlay when the associated text field gains focus. For an inline calendar, simply attach the datepicker to a div or span.
Is your #calenderDiv indeed a div or a span?
Edit
Save the selected date in a variable, and inside beforeShowDay you check if the date in the calender that is currently being added has the same weekday as the selected day.
You would then end up with the following code:
var curDate;
$("#calenderDiv").datepicker({
minDate:0,
onSelect:function(dateText, obj) {
$("#A12").val(dateText);
curDate = new Date($(this).val());
$(this).datepicker("refresh");
},
beforeShowDay:function(date){
return [(typeof curDate === 'undefined' || day != curDate.getDay())];
}
});
Alternatively, if you want to have multiple days crossed out, use an array instead, push the selected weekdays onto it and later check inside beforeShowDay if the date is in the array.

Related

Bootstrap Datetime picker dynamic default date not working

I am trying to update the default date on each link clicked. But it only updates for the first time. After I click another link it still shows old date. But when I debug the defaultD is updating.
I am using bootstrap-datetimepicker
updateSessionDate: function(datetime){
$("#updateUTCDate").modal("show");
var defaultD = moment(datetime, "MMM Do YYYY, h:mm a").format("MM-DD-YYYY HH:mm:ss");
$('#current_session_date').datetimepicker({
defaultDate: defaultD,
});
},
Click any date it will show only the first one I have click.
How do I update date and time on each click?
$('#current_session_date').datetimepicker({
defaultDate: defaultD,
});
This creates the datetimepicker with an initial value, so doesn't work if the datetimepicker already exists.
You either need to call date([newDate]) to update it in place (you'll need to initialise it elsewhere) or destroy() it when the modal is closed, allowing you to remake it with a new initial value.

Tempus Dominus - setting date with javascript

I am using Tempus Dominus Bootstrap-4 datetime picker in a modal window that is shown when user double clicks on a specific row of a table:
$('#btn_modal').on('click', function() {
//
// .... some irrelevenat code, like geting data of a specific row,
// .... filling other fields
//
$('#modal_datetimepicker').datetimepicker({
defaultDate: moment(row['date_rkw'], "YYYY-MM-DD"),
viewMode: 'days',
format: 'YYYY-MM-DD',
extraformats: [ 'YYYY-MM-DD' ]
});
$('#modal').modal();
});
The date is properly set first time the modal is shown, but next time the modal is shown (selecting other row to edit), it keeps the previous value,
completely ignoring the above call with new value to defaultDate.
What is the proper way to set datetimepicker to a specific date?
I tried calling destroy with
$('#modal_datetimepicker').datetimepicker('destroy')
or even
$('#modal_datetimepicker').val(row['date_rkw'])
but with no luck.
You can try destroying datepicker when modal is hidden
$('#modal').modal('show')
.on('hidden.bs.modal',function(){
$('#modal_datetimepicker').datetimepicker('destroy')
});
Have a look at this reference - https://getbootstrap.com/docs/4.0/components/modal/

Update bootstrap datetimepicker after every step/click

I'm using this extension of Bootstrap's datepicker. It works well enough, but I've come upon a usability issue - when selecting a date/time, the text field the datepicker is attached to does not update unless all the steps (year/month/day/hour/minute) are selected to the end. Clicking away from the datepicker before clicking all the steps yields no change to the date in the text field.
How do I make it so that when the user clicks away mid-selection (maybe because they just want to change the date, but find the already-present hour and minute to be acceptable), the text field is updated appropriately?
For example:
Initial date in field: 2015/10/10 10:00
Click on 2015/10/15 -> click away -> date in field: 2015/10/15 10:00
Is that even possible?
Check this updated fiddle - https://jsfiddle.net/4cqLcxcm/8/
Added on changeDay event on datepicker, which will trigger on change of date and set that value into input box.
Below is the code I have changed.
$(document).ready(function() {
var now = new Date();
$('#send-time').datetimepicker({
format: 'yyyy/mm/dd hh:ii',
startDate: now
})
.on('changeDay', function(ev){
$('#send-time').datetimepicker('update',ev.date);
});
console.log('test');
});

Time changes automatic in the input box while I open datetime picker

I am using jquery date-time picker in input box.
initialized with below code
minDate: 0/new Date(); (tried both)
Input box has some old date-time when I click for edit it open date-time picker, it disable old date and old time but it also change time in input box to current time if input box time is earlier than current time.
You can see here live example
http://jsfiddle.net/bhupendra21589/perd7pc6/
use
var d = new Date()
$( '#duedate' ).datetimepicker({
minDate: '0',
minTime:d.getHours()+":"+d.getMinutes(),
formatTime:'H:i'
});
I hope this solves the issue
jsfiddle link : http://jsfiddle.net/adityashankert/perd7pc6/17/

jQuery: retrieve datepicker date, check if inside date range, display/hide fields

I have an online form and I want to hide/display specific fields based on the date the user selects in a datepicker field. However, the date they select must fall within a specific date range in order for the additional fields to be shown/hidden.
Right now, this is the only code I have (I am not jQuery writer)
jQuery(document).ready(function ($) {
$("#dpick").datepicker("getDate");
var monthsWithExams;
monthsWithExams = $("#dpick").datepicker("getDate");
if monthsWithExams - THIS IS WHAT I NEED HELP FIGURING OUT
});
#dpick is the id of my datepicker field. Once they select a date, I want the code to check whether the selected date is inside a specific date range - for example, if they pick any day in December, then I want the form field with id tours to be hidden. I think I can write the if...else part, I just don't know how to check if date is inside date range.
I am not a jQuery expert so please try to explain it to me so that I can understand! Thanks for any help! :)
You can set the range by giving the minDate(starting date) and maxDate(Ending date)
//This will only allow 30 days from now range
$(function() {
$("#txtFiled").datepicker({
minDate: 'today',
maxDate: "+30D"
});
});
The datepicker has an "onClose" which can take the chosen date and check it against other dates.
$( "#dpick" ).datepicker({
onClose: function ( selectedDate ) {
var date = selectedDate ;
// if date is between x and y hide element A
}
});

Categories