Hi guys am iterating the database records in jsp using iterator. Here per each iteration text,startdatetime picker and end datetime picker. i have used date time picker with id creates a problem. I dont know how many rows i gonna iterate how can i solve this?
In fiddle you may suggest me like this run one for loop with 5 iteration with in the first column some simple text second column start datetime picker and third column end datetime picker
<s:iterator value="%{#session.subjectlist}" status="resultstatus">
<td><s:property value="#resultstatus.count" /></td>(this is serial number like 1,2,3 etc used as id in datetime picker)
<td><s:property /></td>(this is a simple text)
<td>
<div class='input-group date' id="<s:property value="#resultstatus.count"/>">
<input type='text' name="examDate1" class="form-control" readonly="readonly" onClick="activateDatePicker()" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar">/span></span>
</div>
</td>
<script type="text/javascript">
$(document).ready(function() {
$(function() {
$('#datetimepicker7').datetimepicker({
format : 'yyyy-mm-dd hh:ii',
startDate : new Date(),
autoclose : 1
}).on('changeDate',function(selected) {
var minDate = new Date(selected.date.valueOf());
$('#datetimepicker8').datetimepicker('setStartDate',minDate);
$('#adminTimeTableForm').bootstrapValidator(
'revalidateField', 'examDate1');
});
$('#datetimepicker8').datetimepicker({
format : 'yyyy-mm-dd hh:ii',
startDate : new Date(),
autoclose : 1
}).on('changeDate',function(selected) {
var minDate = new Date(selected.date.valueOf());
$('#datetimepicker7').datetimepicker('setEndDate', minDate);
$('#adminTimeTableForm').bootstrapValidator('revalidateField', 'examDate2');
});
});
});
</script>
Related
In my VueJS application I have a component with a form.
In that form I have a field to pick the date.
My requirement is to show an error message if the selected date is older than the current date.
Basically the selected date need to be either today's date or future date.
I'm using Moment JS.
I have following custom rule in my Validator.vue
const dateIsToday = (value) => {
var todayDate = moment(new Date()).format("DD-MM-YYYY");
var selectedDate = value;
return selectedDate>=todayDate;
};
But this works only if I selected an old date from the current month... Assume if the user has picked an older date from this month like 10-04-2022, then it'll show the error message.
But if the user selected an old date from last month or a past month like 10-01-2022, this won't show me the error message....
In my form.vue I have
<div class="w-1/2 mr-2">
<p class="text-certstyle-titles font-bold text-sm mb-1">Start date</p>
<div class="h-12">
<cs-date-picker
id="startDate"
v-model="project.start_date"
:default-selection="true"
:name="`${identifier}-start_at`">
</cs-date-picker>
<validator
:identifier="`${identifier}-validate-project`"
:rules="validations.startDate"
:name="`${identifier}-start_at`"
/>
</div>
</div>
And under my validations I have,
startDate: {
required: {
message: 'Project Start date is required.'
},
dateIsToday: {
message: 'Date has to be today's date or a future date.'
},
},
It seems that you are comparing strings. Instead you should make real use of moment and compare moment dates:
const dateIsToday = (value) => {
let todayDate = moment();
let selectedDate = moment(value, "DD-MM-YYYY");
return selectedDate.isSameOrAfter(todayDate);
};
Using bootstrap datepicker to pick a date. Everything works fine as expected. But, because of server restriction we need to send data on submit like "022021" instead of "Feb 2021" now.
Not sure how to send data after formatting from original? Can help to provide any documentation or hints?
Thanks
$.fn.datepicker.defaults.format = 'M yyyy';
$('[data-key="from_date"]').datepicker({
format: 'M yyyy',
viewMode: 'months',
minViewMode: 'months',
autoclose: true,
todayHighlight: true,
endDate: new Date()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="from_date" data-key='from_date' />
<input type="submit" class="submit-date">
I test it in Fiddle.
Bootstrap v4.5.2
Datepicker for Bootstrap v1.9.0
This code should work.
<input type="text" class="form-control" id="date">
And this is the simple Javascript
$('#date').datepicker({
format: 'mmyyyy',
});
The result is
022021
Here you can set 2 formats 1 for display and 1 for getting data from backend.
$('.datepicker').datepicker({
format: {
toDisplay: function (date, format, language) {
var d = new Date(date);
d.setDate(d.getDate() - 7);
return d.toISOString();
},
toValue: function (date, format, language) {
var d = new Date(date);
d.setDate(d.getDate() + 7);
return new Date(d);
}
},
autoclose: true
});
there. I just updated my daterangepicker on my website.It's working really fine on fields for posting ( starts on / ends on ), but...In my profile, I had my date picker with value="{{$user->dob}}" which gaves me the date of birth of my profile. Now, I updated my datepicker from DOB with this line :
<input type="text" name="dob" id="dob" value="{{ $user->dob }}">
but I'm getting NaN at value and when it's open up it looks like that :
.
Here is my script
$(function() {
$('input[name="dob"]').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
minYear: 1901,
maxYear: 2099,
}, function(start, end, label) {
});
});
I'm using Daterangepicker : http://www.daterangepicker.com/
You should use the locale in your settings as described here:
http://www.daterangepicker.com/#example2
Because you need to specify in which format your date is passed to the component
I'd like to preface this saying I know very little JavaScript.
I have a Bootstrap datepicker using a date range, picked up from eternicode.
My goal is to select a day in startDate and then have the days available to endDate only be on or after startDate and within startDate's financial year.
Examples:
If I chose Oct 1st 2016, the endDate should cap out at Sep 30th 2017
If I chose Jan 12th 2017, the endDate should cap out at Sep 30th 2017
If I chose Sep 30th 2017, the endDate should also be Sep 30th 2017
Pretty much, if the startDate month is in [Oct, Nov, Dec] then
endDate caps out at Sep 30th (startDate year + 1) else endDate caps
out at Sep 30th (startDate year)
In my reportWebpage.cshtml file I have:
<div class="col-md-2">
Date Range:
</div>
<div class="col-md-5" id="dateRangeContainer">
<div class="input-daterange input-group" id="datepicker">
#Html.TextBox("startDate", "", new { #class = "input-sm form-control", name= "startDate" })
<span class="input-group-addon">to</span>
#Html.TextBox("endDate", "", new { #class = "input-sm form-control", name = "endDate" })
</div>
</div>
In my related.js I have a very basic datepicker setup:
$(function () {
$('#dateRangeContainer .input-daterange').datepicker({
autoclose: true,
todayBtn: "linked",
clearBtn: true
});
});
I know there is a datesDisable property I can set, and while it's functionality is what I want it seems to be based off an array of dates which seems like the wrong idea here.
As a test, I replaced the datapicker js code above with what is shown below.
Like in this SO Answer I've tried adding an onSelect property to just the #startDate datepicker, but I'm not getting a response from the alert embedded, nor is Google Chrome's Dev Tools hitting the debug point placed on it:
$('#startDate').datepicker({
onSelect: function() {
var date = $(this).datepicker('getDate'),
day = date.getDate(),
month = date.getMonth() + 1, // Offset the zero index to match normal month indexes
year = date.getFullYear();
alert(day + '-' + month + '-' + year);
}
});
I was hoping that by doing that I could at least start building some if else loops or something.
I'm struggling to figure out how to even start with this problem, so any help or suggestions will be very much appreciated!
Edit 1:
I figured out that trying to disable a huge range of dates was the wrong way to view this problem, and that I should instead focus on utilizing the setStartDate and setEndDate properties.
Using some combined tips from these SO answers:
Bootstrap datepicker change minDate/startDate from another datepicker
Print Var in JsFiddle (This was mostly just a helper, giving credit where credit is due)
I mashed together this JSFiddle: http://jsfiddle.net/wsodjsyv/203/
Where it currently is, it does it's job of restricting to the proper financial year. I just need to tweak it so that when I clear End Date I'm able to move Start Date past that point again. Right now it'll require a refresh if I determine I want to move Start Date past Sept. 30 (whatever year got chosen)
Here is my new related.js file pertaining to the date picker; with this code I am able to restrict the date range to Start Date's fiscal year:
$(function () {
// Ranged datepickers
$('#dateRangeContainer .input-daterange').datepicker({
autoclose: true,
todayBtn: "linked",
clearBtn: true
});
$('#startDate').datepicker().on('changeDate', function(selected) {
var endDate_Bottom = null;
var endDate_Cap = null;
if (selected.date != null) {
endDate_Bottom = new Date(selected.date.valueOf());
endDate_Cap = new Date(selected.date.valueOf());
if (endDate_Bottom.getMonth() >= 9 && endDate_Bottom.getMonth() <= 11) {
endDate_Cap = new Date(endDate_Bottom.getFullYear() + 1, 8, 30);
} else {
endDate_Cap = new Date(endDate_Bottom.getFullYear(), 8, 30);
}
}
$('#endDate').datepicker('setStartDate', endDate_Bottom);
$('#endDate').datepicker('setEndDate', endDate_Cap);
});
$("#endDate").datepicker().on('changeDate', function(selected) {
var startDate_Cap = null;
if (selected.date != null) {
startDate_Cap = new Date(selected.date.valueOf());
}
$('#startDate').datepicker('setEndDate', startDate_Cap);
}).on('clearDate', function(selected) {
var startDate_Cap = null;
$('#startDate').datepicker('setEndDate', startDate_Cap);
});
});
I've added some checks for when the date is null to avoid the console log being filled with errors when .valueOf() is called on an empty date.
I also brought back the dateRangeContainer block to handle the repeated options and to allow for the styling that highlights the date range selected in the calendar.
I have a page that includes a jQuery datepicker and I include the bootstrap CSS files, which helps the display look better. However, the months and years are not showing like in this question: here
I don't want to remove the bootstrap files to fix the problem. Is there any way to fix it while still including them?
<td>DOB - Age:</td>
<td>
<table>
<tr>
<td>
#Html.TextBoxFor(x=>x.Dob, new { id = "txtdob", style = "width:100px"}) <br />
#Html.ValidationMessageFor(x=>x.Dob)
</td>
<td>
#Html.TextBoxFor(x => x.Age, new { id = "txtAge", style = "width:30px"})<br />
#Html.ValidationMessageFor(x => x.Age)
</td>
</tr>
</table>
</td>
//birth date - no future dates and go back 100 years, set age
$("#txtdob").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-100:+0",
maxDate: '+0d',
onSelect: function (date) {
var dob = new Date(date);
var today = new Date();
var age = today.getFullYear() - dob.getFullYear();
$("#txtAge").val(age);
}
});