Replace jquery-datetimepicker with native date input (go-gitea#11684)

silverwind · techknowlogick · Yohann Delafollye · commit 40341bf23fb7 · 2020-07-31T14:30:02.000-04:00
This removes the jQuery plugin as well as the associated config options.
Native input[type=date] does not require a language attribute as it is
localized by default, except for the placeholder attribute for which I
currently piggy-back the repo.issues.due_date_form localization option.

Implementation should pretty much match GH. Of note is that Safari does
not provide a UI for this input type, but I don't think providing one is
neccessary and GH did not bother either.

Co-authored-by: techknowlogick &lt;techknowlogick@gitea.io&gt;
diff --git a/custom/conf/app.ini.sample b/custom/conf/app.ini.sample
@@ -17,7 +17,7 @@ SCRIPT_TYPE = bash
 ; DETECTED_CHARSETS_ORDER tie-break order for detected charsets.
 ; If the charsets have equal confidence, tie-breaking will be done by order in this list
 ; with charsets earlier in the list chosen in preference to those later.
-; Adding "defaults" will place the unused charsets at that position. 
+; Adding "defaults" will place the unused charsets at that position.
 DETECTED_CHARSETS_ORDER=UTF-8, UTF-16BE, UTF-16LE, UTF-32BE, UTF-32LE, ISO-8859, windows-1252, ISO-8859, windows-1250, ISO-8859, ISO-8859, ISO-8859, windows-1253, ISO-8859, windows-1255, ISO-8859, windows-1251, windows-1256, KOI8-R, ISO-8859, windows-1254, Shift_JIS, GB18030, EUC-JP, EUC-KR, Big5, ISO-2022, ISO-2022, ISO-2022, IBM424_rtl, IBM424_ltr, IBM420_rtl, IBM420_ltr
 ; Default ANSI charset to override non-UTF-8 charsets to
 ANSI_CHARSET =
@@ -634,8 +634,8 @@ SUBJECT_PREFIX =
 ; Mail server
 ; Gmail: smtp.gmail.com:587
 ; QQ: smtp.qq.com:465
-; Using STARTTLS on port 587 is recommended per RFC 6409. 
-; Note, if the port ends with "465", SMTPS will be used. 
+; Using STARTTLS on port 587 is recommended per RFC 6409.
+; Note, if the port ends with "465", SMTPS will be used.
 HOST =
 ; Disable HELO operation when hostnames are different.
 DISABLE_HELO =
@@ -950,32 +950,6 @@ MAX_TOKEN_LENGTH=32767
 LANGS = en-US,zh-CN,zh-HK,zh-TW,de-DE,fr-FR,nl-NL,lv-LV,ru-RU,uk-UA,ja-JP,es-ES,pt-BR,pt-PT,pl-PL,bg-BG,it-IT,fi-FI,tr-TR,cs-CZ,sr-SP,sv-SE,ko-KR
 NAMES = English,简体中文,繁體中文（香港）,繁體中文（台灣）,Deutsch,français,Nederlands,latviešu,русский,Українська,日本語,español,português do Brasil,Português de Portugal,polski,български,italiano,suomi,Türkçe,čeština,српски,svenska,한국어
 
-; Used for datetimepicker
-[i18n.datelang]
-en-US = en
-zh-CN = zh
-zh-HK = zh-HK
-zh-TW = zh-TW
-de-DE = de
-fr-FR = fr
-nl-NL = nl
-lv-LV = lv
-ru-RU = ru
-uk-UA = uk
-ja-JP = ja
-es-ES = es
-pt-BR = pt-BR
-pt-PT = pt
-pl-PL = pl
-bg-BG = bg
-it-IT = it
-fi-FI = fi
-tr-TR = tr
-cs-CZ = cs-CZ
-sr-SP = sr
-sv-SE = sv
-ko-KR = ko
-
 [U2F]
 ; NOTE: THE DEFAULT VALUES HERE WILL NEED TO BE CHANGED
 ; Two Factor authentication with security keys
diff --git a/docs/content/doc/advanced/config-cheat-sheet.en-us.md b/docs/content/doc/advanced/config-cheat-sheet.en-us.md
@@ -614,32 +614,6 @@ NB: You must `REDIRECT_MACARON_LOG` and have `DISABLE_ROUTER_LOG` set to `false`
 - `LANGS`: **en-US,zh-CN,zh-HK,zh-TW,de-DE,fr-FR,nl-NL,lv-LV,ru-RU,ja-JP,es-ES,pt-BR,pt-PT,pl-PL,bg-BG,it-IT,fi-FI,tr-TR,cs-CZ,sr-SP,sv-SE,ko-KR**: List of locales shown in language selector
 - `NAMES`: **English,简体中文,繁體中文（香港）,繁體中文（台灣）,Deutsch,français,Nederlands,latviešu,русский,日本語,español,português do Brasil,Português de Portugal,polski,български,italiano,suomi,Türkçe,čeština,српски,svenska,한국어**: Visible names corresponding to the locales
 
-### i18n - Datepicker Language (`i18n.datelang`)
-Maps locales to the languages used by the datepicker plugin
-
-- `en-US`: **en**
-- `zh-CN`: **zh**
-- `zh-HK`: **zh-HK**
-- `zh-TW`: **zh-TW**
-- `de-DE`: **de**
-- `fr-FR`: **fr**
-- `nl-NL`: **nl**
-- `lv-LV`: **lv**
-- `ru-RU`: **ru**
-- `ja-JP`: **ja**
-- `es-ES`: **es**
-- `pt-BR`: **pt-BR**
-- `pt-PT`: **pt**
-- `pl-PL`: **pl**
-- `bg-BG`: **bg**
-- `it-IT`: **it**
-- `fi-FI`: **fi**
-- `tr-TR`: **tr**
-- `cs-CZ`: **cs-CZ**
-- `sr-SP`: **sr**
-- `sv-SE`: **sv**
-- `ko-KR`: **ko**
-
 ## U2F (`U2F`)
 - `APP_ID`: **`ROOT_URL`**: Declares the facet of the application. Requires HTTPS.
 - `TRUSTED_FACETS`: List of additional facets which are trusted. This is not support by all browsers.
diff --git a/docs/content/page/index.en-us.md b/docs/content/page/index.en-us.md
@@ -276,7 +276,6 @@ Windows, on architectures like amd64, i386, ARM, PowerPC, and others.
   * [Highlight](https://highlightjs.org/)
   * [Clipboard](https://zenorocha.github.io/clipboard.js/)
   * [CodeMirror](https://codemirror.net/)
-  * [jQuery Date Time Picker](https://github.com/xdan/datetimepicker)
   * [jQuery MiniColors](https://github.com/claviska/jquery-minicolors)
 * Database drivers:
   * [github.com/go-sql-driver/mysql](https://github.com/go-sql-driver/mysql)
diff --git a/docs/content/page/index.fr-fr.md b/docs/content/page/index.fr-fr.md
@@ -264,7 +264,6 @@ Le but de ce projet est de fournir de la manière la plus simple, la plus rapide
   * [Highlight](https://highlightjs.org/)
   * [Clipboard](https://zenorocha.github.io/clipboard.js/)
   * [CodeMirror](https://codemirror.net/)
-  * [jQuery Date Time Picker](https://github.com/xdan/datetimepicker)
   * [jQuery MiniColors](https://github.com/claviska/jquery-minicolors)
 * Connecteurs de base de données :
   * [github.com/go-sql-driver/mysql](https://github.com/go-sql-driver/mysql)
diff --git a/docs/content/page/index.zh-cn.md b/docs/content/page/index.zh-cn.md
@@ -57,7 +57,6 @@ Gitea的首要目标是创建一个极易安装，运行非常快速，安装和
   * [Highlight](https://highlightjs.org/)
   * [Clipboard](https://zenorocha.github.io/clipboard.js/)
   * [CodeMirror](https://codemirror.net/)
-  * [jQuery Date Time Picker](https://github.com/xdan/datetimepicker)
   * [jQuery MiniColors](https://github.com/claviska/jquery-minicolors)
 * 数据库驱动：
   * [github.com/go-sql-driver/mysql](https://github.com/go-sql-driver/mysql)
diff --git a/docs/content/page/index.zh-tw.md b/docs/content/page/index.zh-tw.md
@@ -57,7 +57,6 @@ Gitea 的首要目標是建立一個容易安裝，運行快速，安装和使
   * [Highlight](https://highlightjs.org/)
   * [Clipboard](https://zenorocha.github.io/clipboard.js/)
   * [CodeMirror](https://codemirror.net/)
-  * [jQuery Date Time Picker](https://github.com/xdan/datetimepicker)
   * [jQuery MiniColors](https://github.com/claviska/jquery-minicolors)
 * 資料庫：
   * [github.com/go-sql-driver/mysql](https://github.com/go-sql-driver/mysql)
diff --git a/modules/setting/setting.go b/modules/setting/setting.go
@@ -367,9 +367,8 @@ var (
 	}
 
 	// I18n settings
-	Langs     []string
-	Names     []string
-	dateLangs map[string]string
+	Langs []string
+	Names []string
 
 	// Highlight settings are loaded in modules/template/highlight.go
 
@@ -394,15 +393,6 @@ var (
 	UILocation = time.Local
 )
 
-// DateLang transforms standard language locale name to corresponding value in datetime plugin.
-func DateLang(lang string) string {
-	name, ok := dateLangs[lang]
-	if ok {
-		return name
-	}
-	return "en"
-}
-
 func getAppPath() (string, error) {
 	var appPath string
 	var err error
@@ -1012,7 +1002,6 @@ func NewContext() {
 			"español", "português do Brasil", "Português de Portugal", "polski", "български",
 			"italiano", "suomi", "Türkçe", "čeština", "српски", "svenska", "한국어"}
 	}
-	dateLangs = Cfg.Section("i18n.datelang").KeysHash()
 
 	ShowFooterBranding = Cfg.Section("other").Key("SHOW_FOOTER_BRANDING").MustBool(false)
 	ShowFooterVersion = Cfg.Section("other").Key("SHOW_FOOTER_VERSION").MustBool(true)
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,9 +22,7 @@
     "file-loader": "6.0.0",
     "fomantic-ui": "2.8.5",
     "highlight.js": "10.0.3",
-    "imports-loader": "0.8.0",
     "jquery": "3.5.1",
-    "jquery-datetimepicker": "2.5.21",
     "jquery.are-you-sure": "1.9.0",
     "less-loader": "6.1.0",
     "mini-css-extract-plugin": "0.9.0",
diff --git a/public/vendor/librejs.html b/public/vendor/librejs.html
@@ -60,11 +60,6 @@
           <td><a href="https://github.com/highlightjs/highlight.js/blob/master/LICENSE">BSD 3-Clause</a></td>
           <td><a href="https://github.com/highlightjs/highlight.js/archive/9.18.0.tar.gz">highlight.js.tar.gz</a></td>
         </tr>
-        <tr>
-          <td><a href="../js/datetimepicker.js">jQuery DateTimePicker</a></td>
-          <td><a href="https://github.com/xdan/datetimepicker/blob/master/MIT-LICENSE.txt">MIT</a></td>
-          <td><a href="https://github.com/xdan/datetimepicker/archive/master.zip">jquery.datetimepicker.tar.gz</a></td>
-        </tr>
         <tr>
           <td><a href="./plugins/jquery.minicolors/jquery.minicolors.min.js">jquery.minicolors.min.js</a></td>
           <td><a href="https://github.com/claviska/jquery-minicolors/blob/master/LICENSE.md">Expat</a></td>
diff --git a/routers/repo/milestone.go b/routers/repo/milestone.go
@@ -90,7 +90,6 @@ func NewMilestone(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.milestones.new")
 	ctx.Data["PageIsIssueList"] = true
 	ctx.Data["PageIsMilestones"] = true
-	ctx.Data["DateLang"] = setting.DateLang(ctx.Locale.Language())
 	ctx.HTML(200, tplMilestoneNew)
 }
 
@@ -99,7 +98,6 @@ func NewMilestonePost(ctx *context.Context, form auth.CreateMilestoneForm) {
 	ctx.Data["Title"] = ctx.Tr("repo.milestones.new")
 	ctx.Data["PageIsIssueList"] = true
 	ctx.Data["PageIsMilestones"] = true
-	ctx.Data["DateLang"] = setting.DateLang(ctx.Locale.Language())
 
 	if ctx.HasError() {
 		ctx.HTML(200, tplMilestoneNew)
@@ -136,7 +134,6 @@ func EditMilestone(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.milestones.edit")
 	ctx.Data["PageIsMilestones"] = true
 	ctx.Data["PageIsEditMilestone"] = true
-	ctx.Data["DateLang"] = setting.DateLang(ctx.Locale.Language())
 
 	m, err := models.GetMilestoneByRepoID(ctx.Repo.Repository.ID, ctx.ParamsInt64(":id"))
 	if err != nil {
@@ -160,7 +157,6 @@ func EditMilestonePost(ctx *context.Context, form auth.CreateMilestoneForm) {
 	ctx.Data["Title"] = ctx.Tr("repo.milestones.edit")
 	ctx.Data["PageIsMilestones"] = true
 	ctx.Data["PageIsEditMilestone"] = true
-	ctx.Data["DateLang"] = setting.DateLang(ctx.Locale.Language())
 
 	if ctx.HasError() {
 		ctx.HTML(200, tplMilestoneNew)
diff --git a/templates/repo/issue/milestone_new.tmpl b/templates/repo/issue/milestone_new.tmpl
@@ -23,26 +23,21 @@
 		{{template "base/alert" .}}
 		<form class="ui form grid" action="{{.Link}}" method="post">
 			{{.CsrfTokenHtml}}
-			<div class="eleven wide column">
+			<div class="twelve wide column">
 				<div class="field {{if .Err_Title}}error{{end}}">
 					<label>{{.i18n.Tr "repo.milestones.title"}}</label>
 					<input name="title" placeholder="{{.i18n.Tr "repo.milestones.title"}}" value="{{.title}}" autofocus required maxlength="50">
 				</div>
-				<div class="field">
-					<label>{{.i18n.Tr "repo.milestones.desc"}}</label>
-					<textarea name="content">{{.content}}</textarea>
-				</div>
-			</div>
-			<div class="four wide column">
 				<div class="field {{if .Err_Deadline}}error{{end}}">
 					<label>
 						{{.i18n.Tr "repo.milestones.due_date"}}
-						<a id="clear-date" href="#">{{.i18n.Tr "repo.milestones.clear"}}</a>
+						<a id="clear-date">{{.i18n.Tr "repo.milestones.clear"}}</a>
 					</label>
-					<input id="deadline" name="deadline" value="{{.deadline}}">
+					<input type="date" id="deadline" name="deadline" value="{{.deadline}}" placeholder="{{.i18n.Tr "repo.issues.due_date_form"}}">
 				</div>
 				<div class="field">
-					<input class="milestone datepicker" data-lang="{{.DateLang}}" data-start-date="{{.deadline}}">
+					<label>{{.i18n.Tr "repo.milestones.desc"}}</label>
+					<textarea name="content">{{.content}}</textarea>
 				</div>
 			</div>
 			<div class="ui container">
diff --git a/web_src/js/features/datetimepicker.js b/web_src/js/features/datetimepicker.js
diff --git a/web_src/js/index.js b/web_src/js/index.js
@@ -12,7 +12,6 @@ import initContextPopups from './features/contextpopup.js';
 import initGitGraph from './features/gitgraph.js';
 import initClipboard from './features/clipboard.js';
 import initUserHeatmap from './features/userheatmap.js';
-import initDateTimePicker from './features/datetimepicker.js';
 import initServiceWorker from './features/serviceworker.js';
 import attachTribute from './features/tribute.js';
 import createDropzone from './features/dropzone.js';
@@ -755,18 +754,6 @@ async function initRepository() {
 
   // Milestones
   if ($('.repository.new.milestone').length > 0) {
-    const $datepicker = $('.milestone.datepicker');
-
-    await initDateTimePicker($datepicker.data('lang'));
-
-    $datepicker.datetimepicker({
-      inline: true,
-      timepicker: false,
-      startDate: $datepicker.data('start-date'),
-      onSelectDate(date) {
-        $('#deadline').val(date.toISOString().substring(0, 10));
-      },
-    });
     $('#clear-date').on('click', () => {
       $('#deadline').val('');
       return false;
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
@@ -1309,10 +1309,6 @@
         textarea {
             height: 200px;
         }
-
-        #deadline {
-            width: 150px;
-        }
     }
 
     &.compare.pull {
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
diff --git a/webpack.config.js b/webpack.config.js
