Good day folks. Please help me. I have Jquery datepicker:
$.datepicker.setDefaults($.datepicker.regional["ru"]);
$("#dateinput").datepicker({
dateFormat: "yy-mm-dd",
beforeShowDay: beforeShowDayHandler,
showOn: 'both',
onClose: function (dateText, inst) {
$(this).attr("disabled", false);
},
beforeShow: function (input, inst) {
$(this).attr("disabled", true);
}
});
function beforeShowDayHandler(date) {
if (self.SelectedDayValue != -1) {
if (date.getDate() != 1) {
return [false, '', 'selected'];
}
}
return [true, ''];
}
jQuery(function ($) {
Presently I have locale on russian. How can I take locale parameter for my date picker on jsp age.
My jsp page:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><spring:message code="label.input.head" var="headTitle"/></title>
<script type="text/javascript" src="resources/jsFiles/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="resources/jsFiles/select2.js"></script>
<link rel="stylesheet" href="resources/cssFiles/select2.css"/>
<script type="text/javascript" src="resources/jsFiles/select2_e.js"></script>
<link rel="stylesheet" href="resources/cssFiles/inputStyle.css"/>
<script type="text/javascript" src="resources/jsFiles/jquery-ui.js"></script>
<script type="text/javascript" src="resources/jsFiles/jquery-ui-i18n.js"></script>
<link rel="stylesheet" href="resources/cssFiles/jquery-ui.css"/>
<script type="text/javascript">
$(document).ready(function() {
$.datepicker.setDefaults($.datepicker.regional['<%response.getLocale().getLanguage(); %>']);
$("#dateinput").datepicker({
dateFormat: "yy-mm-dd",
beforeShowDay: beforeShowDayHandler,
showOn: 'both',
onClose: function (dateText, inst) {
$(this).attr("disabled", false);
},
beforeShow: function (input, inst) {
$(this).attr("disabled", true);
}
});
function beforeShowDayHandler(date) {
if (self.SelectedDayValue != -1) {
if (date.getDate() != 1) {
return [false, '', 'selected'];
}
}
return [true, ''];
}
jQuery(function ($) {
console.log($('.widthclass').select2_e().on('change', function () { }));
});
});
</script>
</head>
<body>
//other omitted....
</body>
Spring servlet config locale:
<!-- Change my local over url variable lang. Example: ?lang=en -->
<interceptors>
<beans:bean id="localeChangeInterceptor" class="org.springframework.web.servlet.i18n.LocaleChangeInterceptor">
<beans:property name="paramName" value="lang"/>
</beans:bean>
</interceptors>
I hope this going to be enough information. I want when user change locale it will change datepicker locale automatically too. Thank you
Try to use request interceptor to populate model with locale:
public class PagePopulationInterceptor extends HandlerInterceptorAdapter {
#Override
public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
if(modelAndView != null) {
Locale locale = response.getLocale();
modelAndView.addObject("currentLocale", locale.getLanguage());
}
}
}
Also you need some configuration for interceptor:
<mvc:interceptors>
<mvc:interceptor>
<mvc:mapping path="/**"/>
<bean class="your.package.util.PagePopulationInterceptor" />
</mvc:interceptor>
</mvc:interceptors>
After that you can access locale language via ${currentLocale}
OR
Easier, but dirtier way is to use scriptlet:
<%= response.getLocale().getLanguage() %>
You dont need to register intercepter, but it is not clean to have java code in your jsp.
Related
I have a case where I use the daterangepicker library to retrieve the date, here is the jsfiddle link: https://jsfiddle.net/heriira_/0bgqxdLa/5/
$(function () {
var start = moment().subtract(1, "days");
$("#demo").daterangepicker(
{
singleDatePicker: true,
startDate: start,
},
function (start, end, label) {
console.log(start.format("YYYY-MM-DD"));
}
);
});
in the code above how to make a handle if, for example, the default value is yesterday, and when we choose a time that is more than yesterday, for example two days before it will return to the default, which is yesterday's date.
based on the documentation https://www.daterangepicker.com/#options
you just need to add minDate:
so the date before yesterday can't be selected
$(function() {
var start = moment().subtract(1, "days");
$("#demo").daterangepicker({
singleDatePicker: true,
startDate: start,
minDate: start
},
function(start, end, label) {
console.log(start.format("YYYY-MM-DD"));
}
);
});
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<input type="text" id="demo" value="10/24/1984" />
function getNext7WorkingDays(){
var d = new Date();
var day = d.getDay();
if(day>=0 && day<=3) return 9;
else if(day!=6) return 10;
else return 11;
}
$('.datepicker_quiz_dataa').datetimepicker({
timepicker:false,
format:'d-m-Y',
formatDate:'Y/m/d',
minDate: 1,
maxDate: '+'+getNext7WorkingDays()+'D'
});
In this code I using datetimepicker where I am getting only date in d-m-y format and I want that it show current date to next 7 days dates only but now I am getting previous 14 days dates. So, How can I do this? Please help me.
Thank You
Try this below :
$('.datepicker_quiz_dataa').datepicker({
minDate: 0,
maxDate: "7d",
dateFormat: "d-m-y"
});
OR
$('.datepicker_quiz_dataa').datepicker({
minDate: 0,
maxDate: "1w",
dateFormat: "d-m-y"
});
Hope it helps
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>datepicker demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="datepicker"></div>
<script>
$( "#datepicker").datepicker({
minDate: 0,
maxDate: 6,
dateFormat: "d-m-y",
onSelect : function(r) { console.log(r) }
});
</script>
</body>
</html>
I want to show my date-picker with out date view just like credit card expire view
For this i am following the below code but after selecting the month and view i am getting into the date view of the selected month....how to overcome this
angular.module('datepickerBasicUsage', ['ngMaterial'])
.controller('AppCtrl', function ($scope) {
var monthFormat = buildLocaleProvider("MMM-YYYY");
function buildLocaleProvider(formatString) {
return {
formatDate: function(date) {
if (date) return moment(date).format(formatString);
else return null;
},
parseDate: function(dateString) {
if (dateString) {
var m = moment(dateString, formatString, true);
return m.isValid() ? m.toDate() : new Date(NaN);
} else return null;
}
};
}
$scope.dateFields = {
type: 'date',
required: false,
binding: 'applicant.expectedGraduation',
//startView: 'month',
label: 'Credit Card Expiry - Year/Month picker',
locale: monthFormat
};
});
<!doctype html>
<html ng-app="datepickerBasicUsage">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment-with-locales.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.css">
<script src="app.js"></script>
</head>
<body>
<div ng-controller="AppCtrl" style='padding: 40px;'>
<md-datepicker ng-model="dateFields.selectedDate"
ng-required="dateFields.required"
md-date-locale="dateFields.locale"
md-current-view="year"
md-open-on-focus="true">
</md-datepicker>
</div>
</body>
</html>
I know there is so many similar question already been asked but none of them solved my problem. I tried so many times but the datepicker still not work.
So in my master page
<head>
<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>
<head/>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
In my content Page(head section inside asp content place holder 1)
// i tried this 4 way but still not work
// $("[id$=txtStart]")
// $("input[id$='date2']").datepicker();
<%--<%=txtStart.ClientID%>--%>
<%-- $("#<%=txtStart.ClientID %>")--%>
$(document).ready(function () {
$('[id$=txtStart]').datepicker({
minDate: 0,
dateFormat: 'dd/mm/yy',
numberOfMonths: 2,
onSelect: function (dateStr) {
var min = $(this).datepicker('getDate'); // Get selected date
min.setDate(min.getDate() + 1);
$('[id$=txtEnd]').datepicker('option', 'minDate', min); // Set other min, default to today
}
});
//another datepicker same as above
$('[id$=txtEnd]').datepicker({
.....
}
});
});
this is my control
<td class="auto-style3"><asp:TextBox ID="txtStart" runat="server" > </asp:TextBox>
<td class="auto-style3"><asp:TextBox ID="txtEnd" runat="server" > </asp:TextBox>
Your code should be
$(document).ready(function () {
$("#<%=txtStart.ClientID%>").datepicker({
minDate: 0,
dateFormat: 'dd/mm/yy',
numberOfMonths: 2,
onSelect: function (dateStr) {
var min = $(this).datepicker('getDate'); // Get selected date
min.setDate(min.getDate() + 1);
$("#<%=txtEnd.ClientID%>").datepicker('option', 'minDate', min); // Set other min, default to today
}
});
});
I've tested and works fine with this code:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script>
$(document).ready(function() {
$("[id$=txtStart]").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
onClose: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
});
$("[id$=txtEnd]").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
onClose: function (selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
}
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div>
from <asp:TextBox ID="txtStart" runat="server"/> to <asp:TextBox ID="txtEnd" runat="server"/>
</div>
</asp:Content>
Thought I would suggest another datepicker range.
then your code would be:
<script>
$(document).ready(function () {
var dtStart = $('[id$=txtStart]'),
dtEnd = $('[id$=txtEnd]');
$('[id$=txtStart]').dateRangePicker(
{
separator: ' to ',
getValue: function() {
if (dtStart.val() && dtEnd.val())
return dtStart.val() + ' to ' + dtEnd.val();
else
return '';
},
setValue: function(s, s1, s2) {
dtStart.val(s1);
dtEnd.val(s2);
}
});
});
</script>
and your master page:
<link rel="stylesheet" href="//longbill.github.io/jquery-date-range-picker/daterangepicker.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="//longbill.github.io/jquery-date-range-picker/jquery.daterangepicker.js"></script>
result:
I need your help.
How can some functionality be added onto the existing code below such that it will make the options below possible:
If the date1 field is blank and the user selects a date, an alert message will popup and say "User has selected [date]"
If the date1 field is not blank and the user selects a new date, an alert message will popup and say "User has change [old_date_value] to [new_date_value]
I am entirely new to jQuery, so go easy while criticizing me =\
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function() {
$("#date1").datepicker({
changeMonth: true,
changeYear: true
});
}
</script>
</head>
<body>
<input type="text" id="date1">
</body>
</html>
Change the datepicker part of code to this:
var prevDate = null;
$("#date1").datepicker({
changeMonth: true,
changeYear: true,
onSelect: function(date) {
if (prevDate === null) {
alert('User has selected ' + date);
} else {
alert('User has change ' + prevDate + ' to ' + date);
}
prevDate = date;
}
});
You can find a suitable place to put the prevDate.
Also jQuery-datepicker would help you a lot.
You'll want to use the onSelect option which is part of the datepicker. The onSelect function has two parameters, the dateText, which is the date string, and the datepicker instance. You can get the last value from the datepicker instance, as lastVal.
Using the above information, your javascript would look like this:
$("#date1").datepicker({
changeMonth: true,
changeYear: true,
onSelect: function(dateText,inst) {
if(dateText !== inst.lastVal){
if (inst.lastVal == null) {
alert("User has selected: "+dateText);
} else {
alert("User has change "+inst.lastVal+" to "+dateText)
}
}
}
});
With this solution, you do not need to manage the previous date value in a variable, which is nice.
I've replicated your setup in jsFiddle so you can play around with this while you get used to jQuery.