Skip to content

Commit 4528b72

Browse files
nehakadamnehakadam
committed
i18n Support, Month-Year Format and Human Date Formatting
- Improved support for **Internationalization**. i18n strings for a particular `language` can be added in a separate file and used in your application. This features is modified based on nehakadam#55. Added example of Internationalization. - Added 3 new `dateFormat` options ("MM yyyy", "MMM yyyy", "MMMM yyyy") and `monthYearSeparator` for these options. This features is modified based on nehakadam#18. Added example of new dateFormats. - Modified `formatHumanDate` callback function to work in all `mode`s ("date", "time", "datetime"). Modified example of Human Date Formatting.
1 parent 88fc2c9 commit 4528b72

27 files changed

+2811
-1852
lines changed

‎DateTimePicker.jquery.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929

3030
"docs": "http://curioussolutions.github.io/DateTimePicker/",
3131

32-
"version": "0.1.12",
32+
"version": "0.1.13",
3333

3434
"licenses": [
3535
{

‎Gruntfile.js

+32-4
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,41 @@ module.exports = function(grunt)
1515

1616
pkg: grunt.file.readJSON('package.json'),
1717

18-
copy: {
19-
main: {
18+
concat:
19+
{
20+
lang:
21+
{
22+
options:
23+
{
24+
separator: '\n\n\n\n',
25+
stripBanners: true,
26+
banner: sBanner
27+
},
28+
29+
src: ['src/i18n/*', '!src/i18n/DateTimePicker-i18n.js'],
30+
dest: 'src/i18n/DateTimePicker-i18n.js',
31+
nonull: true
32+
}
33+
},
34+
35+
copy:
36+
{
37+
38+
main:
39+
{
2040
expand: true,
2141
cwd: 'src/',
2242
src: '**',
2343
dest: 'dist'
2444
},
45+
46+
lang:
47+
{
48+
expand: true,
49+
cwd: 'src/i18n',
50+
src: '**',
51+
dest: 'dist/i18n'
52+
}
2553
},
2654

2755
uglify:
@@ -104,12 +132,11 @@ module.exports = function(grunt)
104132
"box-sizing": false,
105133
"display-property-grouping": false
106134
}
107-
108135
}
109-
110136
});
111137

112138
// Load the plugin that provides the "uglify" task.
139+
grunt.loadNpmTasks('grunt-contrib-concat');
113140
grunt.loadNpmTasks('grunt-contrib-uglify');
114141
grunt.loadNpmTasks('grunt-contrib-cssmin');
115142
grunt.loadNpmTasks('grunt-contrib-copy');
@@ -118,5 +145,6 @@ module.exports = function(grunt)
118145

119146
// Default task(s).
120147
grunt.registerTask('default', ['uglify', 'cssmin', 'copy']);
148+
grunt.registerTask('lang', ['concat:lang', 'copy:lang']);
121149
grunt.registerTask('lint', ['jshint', 'csslint']);
122150
};

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"input"
1616
],
1717

18-
"version": "0.1.12",
18+
"version": "0.1.13",
1919

2020
"homepage": "http://curioussolutions.github.io/DateTimePicker/",
2121

‎demo/BasicExamples-HumanDateFormatting.htm

+9-3
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,17 @@
4949

5050
$(document).ready(function()
5151
{
52-
$("#dtBox").DateTimePicker({
52+
$("#dtBox").DateTimePicker(
53+
{
5354

54-
formatHumanDate: function(date)
55+
formatHumanDate: function(oDate, sMode, sFormat)
5556
{
56-
return date.day + ", " + date.month + " " + date.dd + ", " + date.yyyy;
57+
if(sMode === "date")
58+
return oDate.dayShort + ", " + oDate.dd + " " + oDate.month+ ", " + oDate.yyyy;
59+
else if(sMode === "time")
60+
return oDate.HH + ":" + oDate.mm + ":" + oDate.ss;
61+
else if(sMode === "datetime")
62+
return oDate.dayShort + ", " + oDate.dd + " " + oDate.month+ ", " + oDate.yyyy + " " + oDate.HH + ":" + oDate.mm + ":" + oDate.ss;
5763
}
5864

5965
});

‎demo/Format-MonthYear.htm

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
5+
<head>
6+
7+
<title>Format - Month Year</title>
8+
9+
<link rel="stylesheet" type="text/css" href="../src/DateTimePicker.css" />
10+
11+
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
12+
<script type="text/javascript" src="../src/DateTimePicker.js"></script>
13+
14+
<!--[if lt IE 9]>
15+
<link rel="stylesheet" type="text/css" href="../src/DateTimePicker-ltie9.css" />
16+
<script type="text/javascript" src="../src/DateTimePicker-ltie9.js"></script>
17+
<![endif]-->
18+
19+
<style type="text/css">
20+
21+
p
22+
{
23+
margin-left: 20px;
24+
}
25+
26+
input
27+
{
28+
width: 200px;
29+
padding: 10px;
30+
margin-left: 20px;
31+
margin-bottom: 20px;
32+
}
33+
34+
</style>
35+
36+
</head>
37+
38+
<body>
39+
40+
<div class="separator-1">
41+
<p>Format - "MM-yyyy"</p>
42+
<input type="text" data-field="date" data-format="MM-yyyy" readonly>
43+
</div>
44+
45+
46+
<div class="separator-2">
47+
<p>Format - "MMM yyyy"</p>
48+
<input type="text" data-field="date" data-format="MMM yyyy" data-min="Jan 2015" data-max="Dec 2015" readonly>
49+
50+
<p>Format - "MMMM yyyy"</p>
51+
<input type="text" data-field="date" data-format="MMMM yyyy" readonly>
52+
</div>
53+
54+
<div id="dtBox-1"></div>
55+
56+
<div id="dtBox-2"></div>
57+
58+
<script type="text/javascript">
59+
60+
$(document).ready(function()
61+
{
62+
$("#dtBox-1").DateTimePicker(
63+
{
64+
parentElement: ".separator-1",
65+
monthYearSeparator: "-"
66+
});
67+
68+
$("#dtBox-2").DateTimePicker(
69+
{
70+
parentElement: ".separator-2",
71+
72+
defaultDate: "Jul 2015"
73+
});
74+
});
75+
76+
</script>
77+
78+
</body>
79+
80+
</html>

‎demo/Internationalization-German.htm

+18-10
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66

77
<title>Internationalization - German Locale</title>
88

9+
<meta charset="UTF-8">
910
<link rel="stylesheet" type="text/css" href="../src/DateTimePicker.css" />
1011

1112
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
@@ -58,21 +59,28 @@
5859

5960
dateTimeFormat: "dd-MMM-yyyy HH:mm:ss",
6061
dateFormat: "dd-MMM-yyyy",
62+
timeFormat: "HH:mm:ss",
63+
6164
shortDayNames: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
6265
fullDayNames: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
63-
shortMonthNames: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
64-
fullMonthNames: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
65-
66-
titleContentDate: "Datum auswählen",
67-
titleContentTime: "Zeit auswählen",
68-
titleContentDateTime: "Datum & Zeit auswählen",
66+
shortMonthNames: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
67+
fullMonthNames: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
68+
69+
titleContentDate: "Datum auswählen",
70+
titleContentTime: "Zeit auswählen",
71+
titleContentDateTime: "Datum & Zeit auswählen",
6972

70-
setButtonContent: "Auswählen",
71-
clearButtonContent: "Zurücksetzen",
73+
setButtonContent: "Auswählen",
74+
clearButtonContent: "Zurücksetzen",
7275

73-
formatHumanDate: function(date)
76+
formatHumanDate: function(oDate, sMode, sFormat)
7477
{
75-
return date.dayShort + ", " + date.dd + " " + date.month+ ", " + date.yyyy;
78+
if(sMode === "date")
79+
return oDate.dayShort + ", " + oDate.dd + " " + oDate.month+ ", " + oDate.yyyy;
80+
else if(sMode === "time")
81+
return oDate.HH + ":" + oDate.mm + ":" + oDate.ss;
82+
else if(sMode === "datetime")
83+
return oDate.dayShort + ", " + oDate.dd + " " + oDate.month+ ", " + oDate.yyyy + " " + oDate.HH + ":" + oDate.mm + ":" + oDate.ss;
7684
}
7785

7886
});

‎demo/Internationalization.htm

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
5+
<head>
6+
7+
<title>Internationalization</title>
8+
9+
<meta charset="UTF-8">
10+
<link rel="stylesheet" type="text/css" href="../src/DateTimePicker.css" />
11+
12+
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
13+
<script type="text/javascript" src="../src/DateTimePicker.js"></script>
14+
<script type="text/javascript" src="../src/i18n/DateTimePicker-i18n.js"></script>
15+
16+
<!--[if lt IE 9]>
17+
<link rel="stylesheet" type="text/css" href="../src/DateTimePicker-ltie9.css" />
18+
<script type="text/javascript" src="../src/DateTimePicker-ltie9.js"></script>
19+
<![endif]-->
20+
21+
<style type="text/css">
22+
23+
p
24+
{
25+
margin-left: 20px;
26+
}
27+
28+
input
29+
{
30+
width: 200px;
31+
padding: 10px;
32+
margin-left: 20px;
33+
margin-bottom: 20px;
34+
}
35+
36+
</style>
37+
38+
</head>
39+
40+
<body>
41+
42+
<label class="forSelLang"> Select Language : </label>
43+
<select class="selLang"></select>
44+
45+
<p>Date : </p>
46+
<input type="text" data-field="date" readonly>
47+
48+
<p>Time : </p>
49+
<input type="text" data-field="time" readonly>
50+
51+
<p>DateTime : </p>
52+
<input type="text" data-field="datetime" readonly>
53+
54+
<div id="dtBox"></div>
55+
56+
<script type="text/javascript">
57+
58+
// German Locale Strings Source - https://github.com/solala888/DateTimePicker
59+
60+
$(document).ready(function()
61+
{
62+
var sArrLang = Object.keys($.DateTimePicker.i18n),
63+
oDTP;
64+
65+
$.each(sArrLang, function (iIndex, sTempLang)
66+
{
67+
$(".selLang").append($('<option>', {
68+
value: sTempLang,
69+
text : sTempLang
70+
}));
71+
});
72+
73+
$(".selLang").change(function()
74+
{
75+
var sTempLang = $(".selLang").val();
76+
console.log("Language Changed From '" + oDTP.settings.language + "' to '" + sTempLang + "'");
77+
oDTP = oDTP.setLanguage(sTempLang);
78+
});
79+
80+
$("#dtBox").DateTimePicker(
81+
{
82+
init: function()
83+
{
84+
oDTP = this;
85+
},
86+
87+
language: "de"
88+
89+
});
90+
});
91+
92+
</script>
93+
94+
</body>
95+
96+
</html>

‎demo/index.htm

+8
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,10 @@ <h2 class="doc-header">DateTimePicker</h2>
160160
<a href="Format-Both.htm">
161161
DateFormat, TimeFormat or DateTimeFormat specified as Plugin Parameters as well as Data Attribute. In this case, Data Attribute has a higher priority.
162162
</a>
163+
164+
<a href="Format-MonthYear.htm">
165+
"MM yyyy", "MMM yyyy" and "MMMM yyyy" formats.
166+
</a>
163167

164168
<a href="PeriodRange-DataAttributes.htm">
165169
Maximum and Minimum Date, Time or DateTime can be specified as Data Attribute
@@ -196,6 +200,10 @@ <h2 class="doc-header">DateTimePicker</h2>
196200
<a href="View-BasedOnDocumentWidth.htm">
197201
DateTimePicker View selected based on Document Width
198202
</a>
203+
204+
<a href="Internationalization.htm">
205+
Internationalization
206+
</a>
199207

200208
<a href="Internationalization-German.htm">
201209
Internationalization German

‎dist/DateTimePicker-ltie9.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* -----------------------------------------------------------------------------
22
33
jQuery DateTimePicker - Responsive flat design jQuery DateTime Picker plugin for Web & Mobile
4-
Version 0.1.12
4+
Version 0.1.13
55
Copyright (c)2015 Curious Solutions LLP and Neha Kadam
66
http://curioussolutions.github.io/DateTimePicker
77
https://github.com/CuriousSolutions/DateTimePicker

‎dist/DateTimePicker-ltie9.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* -----------------------------------------------------------------------------
22
33
jQuery DateTimePicker - Responsive flat design jQuery DateTime Picker plugin for Web & Mobile
4-
Version 0.1.12
4+
Version 0.1.13
55
Copyright (c)2015 Curious Solutions LLP and Neha Kadam
66
http://curioussolutions.github.io/DateTimePicker
77
https://github.com/CuriousSolutions/DateTimePicker

‎dist/DateTimePicker-ltie9.min.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* -----------------------------------------------------------------------------
22
33
jQuery DateTimePicker - Responsive flat design jQuery DateTime Picker plugin for Web & Mobile
4-
Version 0.1.12
4+
Version 0.1.13
55
Copyright (c)2015 Curious Solutions LLP and Neha Kadam
66
http://curioussolutions.github.io/DateTimePicker
77
https://github.com/CuriousSolutions/DateTimePicker

‎dist/DateTimePicker-ltie9.min.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* -----------------------------------------------------------------------------
22
33
jQuery DateTimePicker - Responsive flat design jQuery DateTime Picker plugin for Web & Mobile
4-
Version 0.1.12
4+
Version 0.1.13
55
Copyright (c)2015 Curious Solutions LLP and Neha Kadam
66
http://curioussolutions.github.io/DateTimePicker
77
https://github.com/CuriousSolutions/DateTimePicker

‎dist/DateTimePicker.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* -----------------------------------------------------------------------------
22
33
jQuery DateTimePicker - Responsive flat design jQuery DateTime Picker plugin for Web & Mobile
4-
Version 0.1.12
4+
Version 0.1.13
55
Copyright (c)2015 Curious Solutions LLP and Neha Kadam
66
http://curioussolutions.github.io/DateTimePicker
77
https://github.com/CuriousSolutions/DateTimePicker

0 commit comments

Comments
 (0)