My problem is that Jquery UI allows selecting a year or month from dropdown menu only.
How can I modify the default date picker to allow selecting year and month as additional calendar tables for default date picker?
Default view:
How I want to select months -> clicking on a month to show extra calendar:
Desired month functionality:
clickable month label
no dropdowns
when clicking on month label - it should open now calendar where days are replaced with month selection
(screen 2 shows what happens when you click on target area on screen 1)
How I want to select years -> clicking on year to show extra calendar:
Desired year functionality:
clickable year label
no dropdowns
when clicking on year label - it should open now calendar where days are replaced with year selection
(screen 2 shows what happens when you click on target area on screen 1)
As I understand, I need to create a new calendars onclick of "month" or "year" label but I don't have any idea how to make that + how to show months or years in calendar instead of a dropdown.
Due to the dynamic nature of Datepicker, it rebuilds each calendar, there is not a good way to do this "out of the box".
How can I modify the default date picker to allow selecting year and month as additional calendar tables for default date picker?
Here is a basic example of how you could start to set this up. The issue comes in when you then make a selection. The datepicker redraws all the various elements and will remove all the customization.
Example: https://jsfiddle.net/Twisty/v6c9r8pa/56/
JavaScript
$(function() {
var dp = $("#datepicker-1").datepicker({
changeMonth: true,
changeYear: true
});
$("#datepicker-2").datepicker();
$(".ui-datepicker-month", dp).hide();
$("<span>", {
class: "ui-datepicker-month-btn btn"
}).html($(".ui-datepicker-month option:selected", dp).text()).insertAfter($(".ui-datepicker-month", dp));
$(".ui-datepicker-year", dp).hide();
$("<span>", {
class: "ui-datepicker-year-btn btn"
}).html($(".ui-datepicker-year option:selected", dp).text()).insertAfter($(".ui-datepicker-year", dp));
function selectMonth(ev) {
var mObj = $(ev.target);
$(".ui-datepicker-month", dp).val(mObj.data("value")).trigger("change");
$(".ui-datepicker-month-btn", dp).html(mObj.text().trim());
mObj.closest(".ui-datepicker").find(".ui-datepicker-calendar").show();
mObj.closest(".ui-datepicker-month-calendar").remove();
}
function showMonths(trg) {
$(".ui-datepicker-calendar", trg).hide();
var mCal = $("<table>", {
class: "ui-datepicker-month-calendar"
}).insertAfter($(".ui-datepicker-calendar", trg));
var row, cell;
$(".ui-datepicker-month option").each(function(i, o) {
if (i % 4 == 0) {
row = $("<tr>").appendTo(mCal);
}
cell = $("<td>").appendTo(row);
$("<span>", {
class: "ui-widget-header circle btn"
})
.data("value", $(o).val())
.html($(o).text().trim())
.click(selectMonth)
.appendTo(cell);
if ($(o).is(":selected")) {
$("span", cell).addClass("selected");
}
});
}
$(".ui-datepicker-month-btn").click(function() {
console.log("Show Months");
showMonths(dp);
})
});
If you want to get in "under the hood", then take some time to review the following, Widget Factory.
The jQuery UI Widget Factory is an extensible base on which all of jQuery UI's widgets are built. Using the widget factory to build a plugin provides conveniences for state management, as well as conventions for common tasks like exposing plugin methods and changing options after instantiation.
So you could rebuild some of the elements in your own making from inside, so that when you do make a selection, it redraws all the elements as you desire.
I have inherited some code that appears to use jqueryui 1.10.3 to incorporate a datepicker.
When I click the textbox to bring the datepicker up and choose a date, the format looks like
21.03.2020
However, if I click on the textbox again the format is
21/03/2020
The slash is the desired functionality. When the initial date is selected I want it to display as dd/mm/yyyy. How can I stop the date parts being separated by .
I have tried examining the jquery-ui-1.10.3 file to see if I can work out where the . separator is being applied but I haven't been able to come up with anything.
Somewhere in your web page or script section you should have code that looks like the code below.
This is where you can set your date time picker format. Look at the format date section.
$(document).ready(function () {
$("#<%= TextBoxName.ClientID %>").datetimepicker({
dayOfWeekStart: 1,
lang: 'en',
startDate: '<%= TextBoxName.Text %>',
step: 30,
formatTime: 'H:i',
formatDate: 'Y.m.d'
});
});
See more help here: jquery datetime picker
I want to take two date string with textbox or editor in mvc.
The format should be
"MM/yyyy-MM/yyyy".
I need to force the user for entering the input like above format without posting model.
#Html.TextBox("tbxDateRange", "", "{0:dd/MM/yyyy}", new { #class = "form-control dropdown", placeholder = "MM/yyyy - MM/yyyy" })
Above code not working event get just a formatted date string.
The format is working as expected. You are telling tbxDateRange's value (the zero in the third parameter ("{0:dd/MM/yyyy}") to format as day/month/year. It will therefore take the input in the text box and display it in that format.
It is only a display format. It will not enforce this format. For that you will need to do your own client side javascript (since you mentioned without posting the model). You could look at using a masked input element. ASP.NET MVC does not have a masked input out of the box.
You could use a masked input control like maskedinput which is a plugin for jQuery.
Additionally, you might want to look at breaking this up into two controls. One for the start and one for the end. You could consider using the html5 input type of date and you will automatically get a calendar. Although, if the day of the month will be too confusing for your users/UI then you could look at using jquery UI's datepicker and you can configure it to show only month and year.
Once you include jQuery UI in your app you would do something like jQuery UI DatePicker to show month year only.
In that example the winning answer formats the control in such a way to only show the month and year items of the control.
<script type="text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
I have a jQuery UI datepicker on my page and I set a defaultDate using the below code - but it keeps picking the month after the month I set! For example the below is showing as 1st December, not November!
var datePickDate = new Date(2011, 11, 01);
$("#datepicker").datepicker({
defaultDate: datePickDate,
onSelect: function(dateText, inst){
$("#datepicker_value").val(dateText);
}
});
Your code is Ok, except the fact that in javascript months are 0-based. So you should put 10 for month if you want November. Check it here
How can I change the selected date of jquery Date picker dynamically on the fly?
I have say created a inline date picker.
Then after some time, I want to reflect a different date there without recreating the datepicker from the scratch.
I tried the setDate method, but did not work, and there is not much documentation in the doc.
There is another (extended?) plugin here, but I want to use the plugin which is shipped with jquery.ui.all.js.
What version of jQuery-UI are you using? I've tested the following with 1.6r6, 1.7 and 1.7.1 and it works:
//Set DatePicker to October 3, 2008
$('#dateselector').datepicker("setDate", new Date(2008,9,03) );
Check that the date you are trying to set it to lies within the allowed date range if the minDate or maxDate options are set.
This example shows of how to use default value in the dropdown calendar and value in the text box. It also shows how to set default value to previous date.
selectedDate is another variable that holds current selected date of the calendar control
var date = new Date();
date.setDate(date.getDate() - 1);
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
defaultDate: date,
onSelect: function () {
selectedDate = $.datepicker.formatDate("yy-mm-dd", $(this).datepicker('getDate'));
}
});
$("#datepicker").datepicker("setDate", date);
Noted that for DatePicker by Keith Wood (http://keith-wood.name/datepickRef.html) the following works - note that the setting of the default date is last:
$('#datepicker').datepick({
minDate: 0,
maxDate: '+145D',
multiSelect: 7,
renderer: $.datepick.themeRollerRenderer,
***defaultDate: new Date('1 January 2008')***
});
$('.date-pick').datePicker().val(new Date()).trigger('change')
finally, that what i look for the last few hours! I need initiate changes, not just setup date in text field!
For some reason, in some cases I couldn't make the setDate work.
A workaround I found is to simply update the value attribute of the given input.
Of course the datepicker itself won't be updated but if what you just look for is to display the date, it works fine.
var date = new Date(2008,9,3);
$("#your-input").val(date.getMonth()+"/"+date.getDate()+"/"+date.getFullYear());
// Will display 9/3/2008 in your #your-input input
This is a old thread but I just want to give some information how I have used. If you want to set today date you can simply apply it like below.
$("#datepickerid").datepicker("setDate", "0");
If you want to set some days before/after the current date then use the symbol -/+ symbol of how many days you want like below.
$("#datepickerid").datepicker("setDate", "-7");
$("#datepickerid").datepicker("setDate", "+5");
This works for me:
$("#dateselector").datepicker("option", "defaultDate", new Date(2008,9,3));
please Find below one it helps me a lot to set data function
$('#datepicker').datepicker({dateFormat: 'yy-mm-dd'}).datepicker('setDate', '2010-07-25');
setDate only seems to be an issue with an inline datepicker used in jquery UI, the specific error is InternalError: too much recursion.
In Html you can add your input field with a date picker like this
<input class="form-control date-picker fromDates" id="myDate" type="text">
and then in java script, initialize your datepicker and set your value to the date like this,
$('.fromDates').datepicker({
maxDate: '0',
dateFormat: "dd/mm/yy",
changeYear: true,
changeMonth: true,
yearRange: "-100:+0"
});
var myDateVal = moment('${value}').format('DD/MM/YYYY');
$('#myDate').datepicker().datepicker('setDate', myDateVal );
(In here fromdate attribute shows the previous dates of the current date)
var dt = new Date();
var renewal = moment(dt).add(1,'year').format('YYYY-MM-DD');
// moment().add(number, period)
// moment().subtract(number, period)
// period : year, days, hours, months, week...
I had a lot of trouble with the setDate method as well. seems to only work in v1. What does seem to work however is using the dpSetSelected method:
$("#dateselector").dpSetSelected(new Date(2010, 0, 26).asString());
good luck!
or you can simply have
$('.date-pick').datePicker().val(new Date()).trigger('change')