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

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 <techknowlogick@gitea.io>

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. 
+; Using STARTTLS on port 587 is recommended per RFC 6409.
-; Note, if the port ends with "465", SMTPS will be used. 
+; 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

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.

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)

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)

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)

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)

modules/setting/setting.go

@@ -367,9 +367,8 @@ var (
 	}
 
 	// I18n settings
-	Langs     []string
+	Langs []string
-	Names     []string
+	Names []string
-	dateLangs map[string]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)

package-lock.json

@@ -7157,22 +7157,6 @@
       "resolved": "https://registry.npmjs.org/import-regex/-/import-regex-1.1.0.tgz",
       "integrity": "sha1-pVxS5McFx2XKIQ6SQqBrvMiqf2Y="
     },
-    "imports-loader": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/imports-loader/-/imports-loader-0.8.0.tgz",
-      "integrity": "sha512-kXWL7Scp8KQ4552ZcdVTeaQCZSLW+e6nJfp3cwUMB673T7Hr98Xjx5JK+ql7ADlJUvj1JS5O01RLbKoutN5QDQ==",
-      "requires": {
-        "loader-utils": "^1.0.2",
-        "source-map": "^0.6.1"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
-      }
-    },
     "imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -7745,21 +7729,6 @@
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
       "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
     },
-    "jquery-datetimepicker": {
-      "version": "2.5.21",
-      "resolved": "https://registry.npmjs.org/jquery-datetimepicker/-/jquery-datetimepicker-2.5.21.tgz",
-      "integrity": "sha512-wDTpZ4f1PWd1XGaIIE0n6jLynlm+akBJ7/NjaB1bk2UJSS593CHJPZ3+FNEXoyvNVUeBlBC0oX6WTfCyfUhX/w==",
-      "requires": {
-        "jquery": ">= 1.7.2",
-        "jquery-mousewheel": ">= 3.1.13",
-        "php-date-formatter": "^1.3.4"
-      }
-    },
-    "jquery-mousewheel": {
-      "version": "3.1.13",
-      "resolved": "https://registry.npmjs.org/jquery-mousewheel/-/jquery-mousewheel-3.1.13.tgz",
-      "integrity": "sha1-BvAzXxbjU6aV5yBr9QUDy1I6buU="
-    },
     "jquery.are-you-sure": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/jquery.are-you-sure/-/jquery.are-you-sure-1.9.0.tgz",
@@ -9845,11 +9814,6 @@
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
       "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
     },
-    "php-date-formatter": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/php-date-formatter/-/php-date-formatter-1.3.4.tgz",
-      "integrity": "sha1-CaFa4HZroL6xkAwnwewxnvLkVj4="
-    },
     "picomatch": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",

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",

public/vendor/librejs.html

@@ -61,11 +61,6 @@
           <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>
           <td><a href="https://github.com/claviska/jquery-minicolors/archive/2.2.3.tar.gz">jquery.minicolors-2.2.3.tar.gz</a></td>

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)

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">

web_src/js/features/datetimepicker.js

@@ -1,8 +0,0 @@
-export default async function initDateTimePicker(locale) {
-  await Promise.all([
-    import(/* webpackChunkName: "datetimepicker" */'jquery-datetimepicker'),
-    import(/* webpackChunkName: "datetimepicker" */'jquery-datetimepicker/build/jquery.datetimepicker.min.css'),
-  ]);
-
-  $.datetimepicker.setLocale(locale);
-}

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;

web_src/less/_repository.less

@@ -1309,10 +1309,6 @@
         textarea {
             height: 200px;
         }
-
-        #deadline {
-            width: 150px;
-        }
     }
 
     &.compare.pull {

web_src/less/themes/theme-arc-green.less

@@ -1395,80 +1395,6 @@ a.ui.labels .label:hover {
     }
 }
 
-body .xdsoft_datetimepicker {
-    background: #2a2e39;
-    border: 1px solid #4c505c;
-    color: #9e9e9e;
-
-    .xdsoft_monthpicker {
-        height: 36px;
-        background: #464c5d;
-        margin: -2px -8px 2px;
-        padding: 2px 8px 0;
-
-        button {
-            background-image: none;
-            text-indent: 0;
-            text-align: center;
-            color: #9e9e9e;
-
-            &.xdsoft_prev::before {
-                content: "\f0d9";
-                font: normal normal normal 14px/1 FontAwesome, serif;
-                font-size: 1.7em;
-            }
-
-            &.xdsoft_next::before {
-                content: "\f0da";
-                font: normal normal normal 14px/1 FontAwesome, serif;
-                font-size: 1.7em;
-            }
-
-            &.xdsoft_today_button::before {
-                content: "\f015";
-                font: normal normal normal 14px/1 FontAwesome, serif;
-                font-size: 1.4em;
-            }
-        }
-
-        & > div.xdsoft_label {
-            background: #464c5d;
-
-            i {
-                line-height: 14px;
-                background-image: none;
-                text-indent: 0;
-                text-align: center;
-
-                ::before {
-                    content: "\f0dd";
-                    font: normal normal normal 14px/1 FontAwesome, serif;
-                    font-size: .7em;
-                }
-            }
-
-            .xdsoft_select {
-                background: #353945;
-            }
-        }
-    }
-
-    .xdsoft_datepicker .xdsoft_calendar {
-        td,
-        th {
-            border-color: #4c505c;
-            background-color: #2a2e39;
-        }
-
-        td.xdsoft_other_month,
-        td.xdsoft_disabled {
-            opacity: .8;
-            background: #a0cc75;
-            color: #000000;
-        }
-    }
-}
-
 .heatmap(@heat) {
     @heatmap-cold: #2d303b;
     @heatmap-hot: #a0cc75;

webpack.config.js

@@ -102,10 +102,6 @@ module.exports = {
         loader: 'vue-loader',
       },
       {
-        test: require.resolve('jquery-datetimepicker'),
-        use: 'imports-loader?define=>false,exports=>false',
-      },
-      {
         test: /\.worker\.js$/,
         exclude: /monaco/,
         use: [