Please help me. and Let me know . I required:
I have one drop down in which the value are Monthly, Quarterly, Halfyearly, Yearly. this will be implemented according to financial year means April to next year march.
I want when I select Monthly all months are appended in input type. when i select quarter suppose if i select Q1, only April. May, June month are appended. if i select h1 halfyearly , first 6 month are append on input.
I am using html input type month in my app.
If There are some more option, please help me.
You can check this fiddle it may help.
var arr=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
function selectchange(){
var x = document.getElementById("sel").value;
alert(x);
if(x=="h1"){
for(i=0;i<6;i++){
document.getElementById("input").innerHTML+= arr[i]+",";
}
}
if(x=="m1"){
for(i=0;i<12;i++){
document.getElementById("input").innerHTML+= arr[i]+",";
}
}
if(x=="q1"){
for(i=3;i<6;i++){
document.getElementById("input").innerHTML+= arr[i]+",";
}
}
}
JSFiddle
Related
I have two problems with input date I have a two input type months. one of them is start date another is the end date. First I want to choose start date then automatically the end date change to start date time. because it makes easy for our client to choose from the start point.
Let me say an example. In start date, after for example I choose February 2020, in the second input date change to February 2020. It doesn't mean the second input date definitely will be February 2020! Maybe our client wants to choose December 2020 But it really makes easy for them to choose it.
The second thing is that the second input should just at least 12 month enable after February 2020. Before February 2020, and after 12 month in this example January 2021 should be disabled. I really don't know how to write it :(
<input type="month" id="start1" name="start1" min="2010-00" max="2040-00" value="2022-09" onclick="myFunction()" >
<input type="month" id="end1" name="end1" min="2010-00" max="2040-00" value="2022-09" >
Plunker- http://plnkr.co/edit/RVKzD9kXNNxinShK7nLU?p=preview
I have a plunker which has the date displayed and a small icon where we can select any date we want and it will update it in the input field.
My problem is - i need to display the previous day when user opens the page. Currently here it displays presnt working day.
Also, while selecting previous day, i need not include weekends. i.e. saturday and sunday should be ignored. For e.g. today is 11th April. For previous date selection, i want 8th April to directly show up. 9th and 10th being saturday and sunday should be ignored.
Can someone please have a look.
Please ignore the below html code as it didnt allow me to post the question until i write some code. The plunker has the code which i am using.
<!doctype html>
</html>
You can do this by checking the date.getDay() and decrementing accordingly.
$scope.today = function () {
var lastWorking=new Date();
lastWorking.setDate(lastWorking.getDate()-1)
// 0 for Sunday and 6 for Saturday
while(lastWorking.getDay()==0 || lastWorking.getDay()==6){
lastWorking.setDate(lastWorking.getDate()-1);
}
$scope.tradeDate = lastWorking;
};
Updated Plunk
I have disabled the past dates using the below script. But I'm unable to disable the past dates in inner-spin arrows.
Many search results show to hide the inner-spin arrows only; I don't want to hide the inner-spin arrows. Is it possible to disable the past dates in inner-spin arrows?
//disable past dates
var today = new Date().toISOString().split('T')[0];
document.getElementsByName("dateField")[0].setAttribute('min', today);
//hide inner-spin arrows
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none; margin:0;
}
I think one of the issues is here is "What is the best behavior" which becomes an opinion based ideal. SO, if you set the date to NEXT year prior to today, then change the YEAR to this year, what should the OTHER parts do? THAT is the opinion based part and the "behavior pattern" that you wish to manipulate. It appears that then you would need to manually manipulate the date once focus is lost.
Example of steps to replicate the above:
Set a date min/max: <input id="when" type="date" min="2016-04-06" max="2099-12-31" />
Change the year to 2017
Change the month and day both to 01 (January 1, 2017)
Change the year to 2016 using the spinner
Date shows as 01/01/2016
You now, according to your settings have set an invalid date. Upon loosing focus you will need to detect this then manage that date validity issue appropriately - would you set it back to the first (minimum) date? To the next YEAR that has that as a valid date? To the next MONTH where that day would be valid? You see the challenge here is that any of these may be YOUR desired behavior but that might not be MY desired behavior (we both have differing opinions).
EDIT: set to YOUR minimum on input event trigger:
var inputMyDate = document.querySelector('input#when');
inputMyDate.addEventListener('input', function() {
var current = this.value;
var min = input.getAttribute("min");
if (new Date(current) < new Date(min)) {
var setmin = new Date(min).toISOString().split('T')[0];
this.value = setmin;
}
});
This code can help you :
<form action="demo_form.asp">
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2016-12-25"><br>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5"><br>
<input type="submit">
</form>
I've got datepicker with option multidate and I want to define maximum days which user can select, for example 5 days, other days should be disabled. It should happen dynamically - user can select arbitrary 5 days and then other days should be blocked. How can I do that ?
Based on the documentation for the bootstrap-datepicker plugin you are using, it looks like if you just do multidate: 5 "the picker will limit how many dates can be selected to that number, dropping the oldest dates from the list when the number is exceeded."
$('#datepicker').datepicker({
multidate: 5
});
As for disabling the days once 5 are selected, rather than dropping the oldest...I am not sure if that is possible. You might be able to do something like this (but not sure, as you would have to pass in a big array of dates):
$('#datepicker').datepicker({
multidate: 5
}).on('changeDate', function(e){
//some function here to disable dates once 5 are selected
});
Hope this helps.
I need to customize each month in ui datepicker. This means that for each month will show a different background image. I think to do the next:
<div class="calendar-container CURRENT-MONTS-CLASS"><div id="datepicker"></div></div>
How can I get current month name and add it as a class to datepicker's container?
Greatly appreciate any help!
You can use the month number, e.g. .month1 - .month12 or .monthJanuary - .monthDecember (or some other format) for this...personally I'd stick with numbers for other cultures, but you can adapt this answer for both ways. Use the onChangeMonthYear event of the datepicker like this:
$('#datepicker').datepicker({
onChangeMonthYear: function(year, month, inst) {
//Month number (1-12) is month
//Month name you can get by $("#datepicker .ui-datepicker-month").text()
$(this).closest("div.calendar-container")
.removeClass().addClass("calendar-container month" + month);
}
});
And set it initially when the page loads (after creating the datepicker), since I'm using the month number in the above, it would look like this:
$("div.calendar-container").addClass("month" + ($('#datepicker').datepicker("getDate").getMonth()+1));
If you were using names instead, use:
$("div.calendar-container").addClass("month" + $("#datepicker .ui-datepicker-month").text());
Whichever option you go with, just create the 12 classes with the background images/styling you want. You can test it out here. If you wanted the background to actually be on the datepicker itself, not that .calendar-container <div> you'd just add that to the CSS selector to make it more specific, for example:
.month1 .ui-datepicker-inline { background: url(January.jpg); }
You can test out that version here.