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>
Related
How can I show date-time in a human-readable format in Alpine.js? I would add a filter in Vuejs to do the same and looking for a similar solution in Alpine.js.
<!DOCTYPE html>
<html>
<head>
<title>Data time display in AlpineJS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.3.0/alpine.js"
integrity="sha512-nIwdJlD5/vHj23CbO2iHCXtsqzdTTx3e3uAmpTm4x2Y8xCIFyWu4cSIV8GaGe2UNVq86/1h9EgUZy7tn243qdA=="
crossorigin="anonymous" defer></script>
</head>
<body>
<div x-data="mdata()">
<h3 x-text="name"></h3>
<h3 x-text="created_on"></h3>
</div>
<script>
const mdata = () => {
return {
name: "Carpet",
created_on: Date.now(),
};
};
</script>
</body>
</html>
After delving into the issues of Alpine.js Github repository, learnt that it is possible to call a function in x-text directive as Alpine.js can access any functions defined in the global scope as well as in the component scope.
For further details look at here and here
Declared the following function:
var date_format = function (value) {
if (value) {
return dayjs(value).format('YYYY-MM-DD hh:mm:ss');
}
else {
return value;
}
}
And referred it like this in x-text:
<div x-data="mdata()">
<h3 x-text="name"></h3>
<h3 x-text="date_format(created_on)"></h3>
</div>
<!DOCTYPE html>
<html>
<head>
<title>Data time display in AlpineJS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.3.0/alpine.js"
integrity="sha512-nIwdJlD5/vHj23CbO2iHCXtsqzdTTx3e3uAmpTm4x2Y8xCIFyWu4cSIV8GaGe2UNVq86/1h9EgUZy7tn243qdA=="
crossorigin="anonymous" defer></script>
<script src="https://unpkg.com/dayjs#1.8.21/dayjs.min.js"></script>
</head>
<body>
<div x-data="mdata()">
<h3 x-text="name"></h3>
<h3 x-text="date_format(created_on)"></h3>
</div>
<script>
const mdata = () => {
return {
name: "Carpet",
created_on: Date.now(),
};
};
var date_format = function (value) {
if (value) {
return dayjs(value).format('YYYY-MM-DD hh:mm:ss');
}
else {
return value;
}
}
</script>
</body>
</html>
I'm using bootstrap date picker in my project. It's a session booking project. From the admin panel, I add the sessions for specific dates and I want the user's of my website to be able to see the dates for which I have added a session. My frontend receives the data from database. The data contains all the dates for which I have added a session. I want my datepicker to display only these dates from the data and disable the other dates.
Currently I have temporarily used a select box to solve this issue. But a datepicker would be better as it looks good is easy to navigate.
See the picture below. This is how I have used a select box to temporarily solve the problem
Here is the desired output that I want
It should be a datepicker with only those dates enabled which I receive from the database. The other dates should be disabled
I tried searching it on google but I'm not able to find the solution. Is this possible using bootstrap date picker? If yes, please suggest a workaround.
You can use beforeShowDay function to enable only the dates returned from your back end system.
Documentation here
This function is executed for every date, it checks if it is present in the list of applicable dates, returns true if present and enables it, else returns false and disables it.
$(function () {
let enabledDates = ['2018-10-03', '2018-10-04', '2018-10-05', '2018-10-06', '2018-10-07', '2018-10-08'];
$('#datepicker').datepicker({
format: 'yyyy-mm-dd',
beforeShowDay: function (date) {
let fullDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
return enabledDates.indexOf(fullDate) != -1
}
});
});
beforeShowDay function also allows you to return classes for custom styling
beforeShowDay: function (date) {
let fullDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
if (enabledDates.indexOf(fullDate) != -1) {
return {
classes: 'enabled',
tooltip: 'You can select this date'
};
} else
return false
}
.enabled {
background: #DCDCDC;
}
None of the other solutions worked for me so here is my solution.
The documentation is not so clear and lacks of example but you can see a function that takes a date as a parameter and returns a Boolean, indicating whether or not this date is selectable
In this snippet, look at January 2020 for example in order to see only the active dates.
$(document).ready(function() {
var datesEnabled = [
'2021-01-01', '2021-01-11', '2021-01-21',
'2021-02-01', '2021-02-11', '2021-02-21',
'2021-03-01', '2021-03-11', '2021-03-21',
'2021-04-01', '2021-04-11', '2021-04-21',
'2021-05-01', '2021-05-11', '2021-05-21'
];
$("#datepicker-lorem").datepicker({
language: "fr",
autoclose: true,
todayHighlight: true,
todayBtn: true,
title: 'Test ;-)',
weekStart: 1,
format: 'dd/mm/yyyy',
// On n'active que les dates possibles
beforeShowDay: function(date) {
var allDates = date.getFullYear() + "-" + ('0' + (date.getMonth() + 1)).slice(-2) + "-" + ('0' + date.getDate()).slice(-2);
if (datesEnabled.indexOf(allDates) != -1) {
return {
classes: 'date-possible',
tooltip: 'Vous pouvez choisir cette date'
}
} else {
return false;
}
}
});
});
/* For better frontend result, add class to active date and add opacity to disabled date */
td.day.disabled {
opacity: 0.4;
}
td.date-possible {
background-color: red;
color: white;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.fr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<input class="form-text form-control" type="text" id="datepicker-lorem" name="date_demande" value="" size="60" maxlength="128">
</div>
</div>
</div>
Using 'beforeShowDay' parameter you can disable dates:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
//date list that you want to disable
disableddates = ['10-10-2018', '10-11-2018', '10-12-2018'];
$("#datepicker").datepicker({
format: 'dd-mm-yyyy',
beforeShowDay: function(date) {
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();
var currentdate = (m + 1) + '-' + d + '-' + y;
for (var i = 0; i < disableddates.length; i++) {
// Now check if the current date is in disabled dates array.
if ($.inArray(currentdate, disableddates) != -1) {
return [false];
}
}
return [true];
},
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
});
});
</script>
</head>
<body>
<p>Date:
<input type="text" id="datepicker">
</p>
</body>
</html>
</body>
</html>
I want to have a dialog window with an input. I could use the default jQuery-ui one, but I am using one that incorporate bootstrap. However, the input only appears the first time that it is opened, any subsequent times the dialog is opened, the input is missing. How would this be remedied?
Here is the HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" href="../bower_components/jquery-ui/themes/base/jquery.ui.all.css">
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../bower_components/bootstrap3-dialog/css/bootstrap-dialog.min.css">
<link rel="stylesheet" href="../bower_components/bootstrap-datepicker/css/datepicker3.css">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>Hello!</h3>
<div>
<span>Enter a Zip Code: </span>
<input type="text" id="zip">
<button id="getEvents" class="btn btn-primary">Get events!</button>
</div>
<div class="datepicker"></div>
<div id="events"></div>
<button id="addItemButton">Add an item</button>
<div id="addItemDialog"><input type="text" id="newItem"></div>
<script src="../bower_components/jquery/jquery.min.js"></script>
<script src="../bower_components/jquery-ui/ui/jquery-ui.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../bower_components/bootstrap3-dialog/js/bootstrap-dialog.js"></script>
<script src="../bower_components/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="js/calendar.js"></script>
</body>
</html>
Here is the JS:
$(function () {
"use strict";
var url,
year,
month,
zip,
date,
events = [],
newItem;
$("#addItemDialog").hide();
$(".datepicker").datepicker({dateFormat: "yy-mm-dd"}).click(function(){
$("#events").empty();
date = $(".datepicker").datepicker("getDate");
//console.dir(date.toISOString().substr(0, 10));
$(events).each(function(i, event){
//console.log(event);
if(event.date.substr(0, 10) === date.toISOString().substr(0, 10)){
console.log(event.title);
$("#events").append("<h4 class='event'>" + event.title + "</h4>");
}
});
});
$("#getEvents").on("click", function () {
zip = $("#zip").val();
if(isValidUSZip(zip)){
zip = zip.substr(0, 5);
getCalendar();
}else{
BootstrapDialog.show({
message: "You must enter a valid zip code!",
buttons: [{label:"OK", action: function(dialog){dialog.close();}}],
draggable: true
});
}
});
function isValidUSZip(sZip) {
return /^[0-9]{5}(?:-[0-9]{4})?$/.test(sZip);
}
function getCalendar() {
$.ajax({
type: "GET",
url: "http://www.hebcal.com/hebcal/?v=1&cfg=json&nh=on&nx=on&year=now&month=x&ss=on&mf=on&c=on&zip=" + zip +"&m=72&s=on",
success: function (data) {
console.dir(data);
$(data.items).each(function(index, item){
//console.dir(item.date.substr(0, 10));
events.push(item);
});
}
});
}
$("#addItemButton").on("click", function(){
BootstrapDialog.show({
message: $("#newItem"),
buttons: [{
label: "Enter",
action: function(dialog){
newItem = $("#newItem").val();
events.push({date: new Date(date).toISOString(), title: newItem});
dialog.close();
}
}]
});
});
});
I took a time and make this fiddle, aparently everything is working fine:
I doubt about this line for a moment, but still uncommented is going right:
$(function () {
//"use strict";
var url,
year,
month,
zip,
date,
events = [],
newItem;
http://jsfiddle.net/r2FyC/3/
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.
I have looked at some of the answers here to this type of question but could not get them to work how I needed them to. I need to have my jQuery UI datepicker only allow Sundays in the past to be selected. Is this possible to do?
Thank you
// Enable Sunday only
$("#datepickerID").datepicker({
dateFormat: 'dd-mm-yy',
minDate: 1,
beforeShowDay: enableSUNDAYS
});
// Custom function to enable SUNDAY only in jquery calender
function enableSUNDAYS(date) {
var day = date.getDay();
return [(day == 0), ''];
}
It's not exactly your situation, but contains what you need to know to do what you need to do:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css"
type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// 0 = monday, 1 = tuesday, 2 = wednesday, 3 = thursday,
// 4 = friday, 5 = saturday, 6 = sunday
var daysToDisable = [2, 4, 5];
$('#<%= txtDate.ClientID %>').datepicker({
beforeShowDay: disableSpecificWeekDays
});
function disableSpecificWeekDays(date) {
var day = date.getDay();
for (i = 0; i < daysToDisable.length; i++) {
if ($.inArray(day, daysToDisable) != -1) {
return [false];
}
}
return [true];
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
</form>
</body>
</html>