Mercurial > p > roundup > code
comparison doc/upgrading.txt @ 8285:2bf0c4e7795e
fix: issue2551390 - Replace text input/calendar popup with native date input
Docs, code and test changes for the changeover to a native date
element.
See issue for details.
| author | John Rouillard <rouilj@ieee.org> |
|---|---|
| date | Sat, 18 Jan 2025 12:23:23 -0500 |
| parents | b757cf509480 |
| children | 6445e63bb423 |
comparison
equal
deleted
inserted
replaced
| 8284:92dad05379f9 | 8285:2bf0c4e7795e |
|---|---|
| 221 | 221 |
| 222 If you have enabled the xmlrpc endpoint, you should install | 222 If you have enabled the xmlrpc endpoint, you should install |
| 223 defusedxml. | 223 defusedxml. |
| 224 | 224 |
| 225 .. _defusedxml: https://pypi.org/project/defusedxml/ | 225 .. _defusedxml: https://pypi.org/project/defusedxml/ |
| 226 | |
| 227 Use native date inputs (optional) | |
| 228 --------------------------------- | |
| 229 | |
| 230 Roundup now uses native date or datetime-local inputs for Date() | |
| 231 properties. These inputs take the place of the text input and | |
| 232 calendar popup from earlier Roundup versions. Modern browsers | |
| 233 come with a built-in calendar for date selection, so the | |
| 234 ``(cal)`` calendar link is no longer needed. These native inputs | |
| 235 show the date based on the browser's locale and translate terms | |
| 236 into the local language. | |
| 237 | |
| 238 If you do nothing, simple uses of the field() method will | |
| 239 generate date inputs to allow selection of a date. Input fields | |
| 240 for Date() properties will not have the ``(cal)`` link | |
| 241 anymore. Complex uses will not be upgraded and will operate like | |
| 242 earlier Roundup versions. | |
| 243 | |
| 244 To upgrade all date properties, there are four changes to make: | |
| 245 | |
| 246 1. Replace ``field`` calls with ``field_time`` where needed. | |
| 247 | |
| 248 2. Remove the format argument from field() calls on Date() | |
| 249 properties. | |
| 250 | |
| 251 3. Remove popcal() calls. | |
| 252 | |
| 253 4. Include datecopy.js in page.html. | |
| 254 | |
| 255 Use field_time() where needed | |
| 256 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ | |
| 257 | |
| 258 The format used by ``field`` does not include hours, minutes or | |
| 259 seconds. If your users need to enter times, you should change | |
| 260 these calls to use ``field_time``. The arguments are the same as | |
| 261 for field. | |
| 262 | |
| 263 Remove format argument | |
| 264 ~~~~~~~~~~~~~~~~~~~~~~ | |
| 265 | |
| 266 Speaking of arguments, avoid setting the date format if you want | |
| 267 to use native date inputs. The date value needs a specific format | |
| 268 for date or datetime-local inputs. If you include the `format` | |
| 269 argument in the `field` method, it should be removed. | |
| 270 | |
| 271 The `field` method uses the format ``%Y-%m-%d``. The | |
| 272 ``field_time`` method uses the format ``%Y-%m-%dT%H:%M:%S``. If | |
| 273 you use these exact formats, Roundup will accept them and use a | |
| 274 native date input. | |
| 275 | |
| 276 .. highlight:: text | |
| 277 | |
| 278 If you use an format that doesn't match, you will see a text | |
| 279 input and a logged warning message like:: | |
| 280 | |
| 281 Format '%Y-%m' prevents use of modern date input. | |
| 282 Remove format from field() call in template test.item. | |
| 283 Using text input. | |
| 284 | |
| 285 .. highlight:: default | |
| 286 | |
| 287 The log message will appear if your logging level is set to | |
| 288 WARNING or lower. (Refer to your tracker's :ref:`config.ini | |
| 289 logging section <config-ini-section-logging>` for details on | |
| 290 logging levels.) | |
| 291 | |
| 292 If you want to use a text input for a specific date format, you | |
| 293 can add ``type="text"`` to the field() argument list to suppress | |
| 294 the warning. By default using a format argument will show the | |
| 295 popup calendar link. You can disable the link by setting | |
| 296 ``popcal=False`` in the field() call. If you have:: | |
| 297 | |
| 298 tal:content="structure python:context.duedate.field( | |
| 299 placeholder='YYYY-MM, format='%Y-%m')" | |
| 300 | |
| 301 changing it to:: | |
| 302 | |
| 303 tal:content="structure python:context.duedate.field( | |
| 304 type='text', | |
| 305 placeholder='YYYY-MM, format='%Y-%m', | |
| 306 popcal=False)" | |
| 307 | |
| 308 will generate the input as in Roundup 2.4 or earlier without a | |
| 309 popcal link. | |
| 310 | |
| 311 If you are using a path expression like:: | |
| 312 | |
| 313 tal:content="context/duedate/field" | |
| 314 | |
| 315 change it to:: | |
| 316 | |
| 317 tal:content="structure python:context.duedate.field( | |
| 318 type='text')" | |
| 319 | |
| 320 to get the input from before Roundup 2.5 with a popcal link. | |
| 321 | |
| 322 Remove popcal | |
| 323 ~~~~~~~~~~~~~ | |
| 324 | |
| 325 If you use the ``popcal()`` method directly in your templates, you | |
| 326 can remove them. The browser's native date selection calendar can | |
| 327 be used instead. | |
| 328 | |
| 329 Add copy/paste/edit on double-click using datecopy.js | |
| 330 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ | |
| 331 | |
| 332 There is no way to copy/paste using a native datetime-local or | |
| 333 date input. With the datecopy.js file installed, double-clicking | |
| 334 on the input turns it into a normal text input with the ability | |
| 335 to copy, paste, or manually edit the date. | |
| 336 | |
| 337 To set this up, take either ``datecopy.js`` or the smaller | |
| 338 version, ``datecopy.min.js``, from the ``html`` folder of the | |
| 339 classic tracker template. Put the file in the ``html`` folder of | |
| 340 your tracker home. | |
| 341 | |
| 342 After you install the datecopy file, you can add the script | |
| 343 directly to a page using:: | |
| 344 | |
| 345 <script tal:attributes="nonce request/client/client_nonce" | |
| 346 tal:content="structure python:utils.readfile('datecopy.min.js')"> | |
| 347 </script> | |
| 348 | |
| 349 or get the file in a separate download using a regular script | |
| 350 tag:: | |
| 351 | |
| 352 <script type="text/javascript" src="@@file/datecopy.js"> | |
| 353 </script> | |
| 354 | |
| 355 You can place these at the end of ``page.html`` just before the | |
| 356 close body ``</body>`` tag. This is the method used in the | |
| 357 classic template. This forces the file to be run for every page | |
| 358 even those that don't have any date inputs. However, it is cached | |
| 359 after the first download. | |
| 360 | |
| 361 Alternatively you can inline or link to it using a script tag | |
| 362 only on pages that will have a date input. For example | |
| 363 ``issue.item.html``. | |
| 364 | |
| 365 There is no support for activating text mode using the | |
| 366 keyboard. Tablet/touch support is mixed. Chrome supports | |
| 367 double-tap to activate text mode input. Firefox does not. | |
| 226 | 368 |
| 227 Change in REST response for invalid CORS requests (info) | 369 Change in REST response for invalid CORS requests (info) |
| 228 -------------------------------------------------------- | 370 -------------------------------------------------------- |
| 229 | 371 |
| 230 CORS_ preflight requests that are missing required headers can | 372 CORS_ preflight requests that are missing required headers can |