When bind is set on an input with type date, and a number starting with 0 is entered in the month/day, existing data is lost • Playground • Svelte

App.svelte

DateInput.svelte

import DateInput from "./DateInput.svelte"

let date1 = "2024-01-01";

let date2 = "2024-01-02";

let date3 = "2024-01-03"

</script>

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

import * as $ from 'svelte/internal/client';

import DateInput from "./DateInput.svelte";

var root = $.template(`<p>date1: <input type="date" max="9999-12-31"></p> <p>date2: <input type="date" max="9999-12-31"></p> <p>date3: <!></p>`, 1);

export default function App($$anchor) {

let date1 = $.mutable_state("2024-01-01");

let date2 = "2024-01-02";

let date3 = $.mutable_state("2024-01-03");

var fragment = root();

var p = $.first_child(fragment);

var input = $.sibling($.child(p));

$.remove_input_defaults(input);

$.reset(p);

var p_1 = $.sibling(p, 2);

var input_1 = $.sibling($.child(p_1));

$.remove_input_defaults(input_1);

$.set_value(input_1, date2);

$.reset(p_1);

var p_2 = $.sibling(p_1, 2);

var node = $.sibling($.child(p_2));

DateInput(node, {

type: 'date',

max: '9999-12-31',

get value() {

return $.get(date3);

set value($$value) {

$.set(date3, $$value);

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

/* Add a <style> tag to see the CSS output */

		
			
				
					 Root {
 css: null
js: []
start: 146
end: 359
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (6)
  Text {...}
 type: "Text"
start: 144
end: 146
raw: "\n\n"
data: "\n\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 146
end: 217
name: "p"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (2)
  Text {...}
 type: "Text"
start: 149
end: 156
raw: "date1: "
data: "date1: "
 }
 RegularElement {...}
 type: "RegularElement"
start: 156
end: 213
name: "input"
attributes: [...] (3)
  Attribute {...}
 type: "Attribute"
start: 163
end: 174
name: "type"
value: [...] (1)
  Text {...}
 start: 169
end: 173
type: "Text"
raw: "date"
data: "date"
 }
 ]
 }
 BindDirective {...}
 start: 175
end: 193
type: "BindDirective"
name: "value"
expression: Identifier {...}
 type: "Identifier"
start: 187
end: 192
loc:  {...}
 start:  {...}
 line: 8
column: 41
 }
end:  {...}
 line: 8
column: 46
 }
 }
name: "date1"
 }
modifiers: []
 }
 Attribute {...}
 type: "Attribute"
start: 194
end: 210
name: "max"
value: [...] (1)
  Text {...}
 start: 199
end: 209
type: "Text"
raw: "9999-12-31"
data: "9999-12-31"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 217
end: 218
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 218
end: 284
name: "p"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (2)
  Text {...}
 type: "Text"
start: 221
end: 228
raw: "date2: "
data: "date2: "
 }
 RegularElement {...}
 type: "RegularElement"
start: 228
end: 280
name: "input"
attributes: [...] (3)
  Attribute {...}
 type: "Attribute"
start: 235
end: 246
name: "type"
value: [...] (1)
  Text {...}
 start: 241
end: 245
type: "Text"
raw: "date"
data: "date"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 247
end: 260
name: "value"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 253
end: 260
expression: Identifier {...}
 type: "Identifier"
start: 254
end: 259
loc:  {...}
 start:  {...}
 line: 9
column: 36
 }
end:  {...}
 line: 9
column: 41
 }
 }
name: "date2"
 }
 }
 }
 Attribute {...}
 type: "Attribute"
start: 261
end: 277
name: "max"
value: [...] (1)
  Text {...}
 start: 266
end: 276
type: "Text"
raw: "9999-12-31"
data: "9999-12-31"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 284
end: 285
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 285
end: 359
name: "p"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (2)
  Text {...}
 type: "Text"
start: 288
end: 295
raw: "date3: "
data: "date3: "
 }
 Component {...}
 type: "Component"
start: 295
end: 355
name: "DateInput"
attributes: [...] (3)
  Attribute {...}
 type: "Attribute"
start: 306
end: 317
name: "type"
value: [...] (1)
  Text {...}
 start: 312
end: 316
type: "Text"
raw: "date"
data: "date"
 }
 ]
 }
 BindDirective {...}
 start: 318
end: 336
type: "BindDirective"
name: "value"
expression: Identifier {...}
 type: "Identifier"
start: 330
end: 335
loc:  {...}
 start:  {...}
 line: 10
column: 45
 }
end:  {...}
 line: 10
column: 50
 }
 }
name: "date3"
 }
modifiers: []
 }
 Attribute {...}
 type: "Attribute"
start: 337
end: 353
name: "max"
value: [...] (1)
  Text {...}
 start: 342
end: 352
type: "Text"
raw: "9999-12-31"
data: "9999-12-31"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 ]
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 144
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 135
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 6
column: 0
 }
 }
body: [...] (4)
  ImportDeclaration {...}
 type: "ImportDeclaration"
start: 10
end: 52
loc:  {...}
 start:  {...}
 line: 2
column: 1
 }
end:  {...}
 line: 2
column: 43
 }
 }
specifiers: [...] (1)
  ImportDefaultSpecifier {...}
 type: "ImportDefaultSpecifier"
start: 17
end: 26
loc:  {...}
 start:  {...}
 line: 2
column: 8
 }
end:  {...}
 line: 2
column: 17
 }
 }
local: Identifier {...}
 type: "Identifier"
start: 17
end: 26
loc:  {...}
 start:  {...}
 line: 2
column: 8
 }
end:  {...}
 line: 2
column: 17
 }
 }
name: "DateInput"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 32
end: 52
loc:  {...}
 start:  {...}
 line: 2
column: 23
 }
end:  {...}
 line: 2
column: 43
 }
 }
value: "./DateInput.svelte"
raw: "\"./DateInput.svelte\""
 }
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 55
end: 80
loc:  {...}
 start:  {...}
 line: 3
column: 2
 }
end:  {...}
 line: 3
column: 27
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 59
end: 79
loc:  {...}
 start:  {...}
 line: 3
column: 6
 }
end:  {...}
 line: 3
column: 26
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 59
end: 64
loc:  {...}
 start:  {...}
 line: 3
column: 6
 }
end:  {...}
 line: 3
column: 11
 }
 }
name: "date1"
 }
init: Literal {...}
 type: "Literal"
start: 67
end: 79
loc:  {...}
 start:  {...}
 line: 3
column: 14
 }
end:  {...}
 line: 3
column: 26
 }
 }
value: "2024-01-01"
raw: "\"2024-01-01\""
 }
 }
 ]
kind: "let"
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 83
end: 108
loc:  {...}
 start:  {...}
 line: 4
column: 2
 }
end:  {...}
 line: 4
column: 27
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 87
end: 107
loc:  {...}
 start:  {...}
 line: 4
column: 6
 }
end:  {...}
 line: 4
column: 26
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 87
end: 92
loc:  {...}
 start:  {...}
 line: 4
column: 6
 }
end:  {...}
 line: 4
column: 11
 }
 }
name: "date2"
 }
init: Literal {...}
 type: "Literal"
start: 95
end: 107
loc:  {...}
 start:  {...}
 line: 4
column: 14
 }
end:  {...}
 line: 4
column: 26
 }
 }
value: "2024-01-02"
raw: "\"2024-01-02\""
 }
 }
 ]
kind: "let"
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 110
end: 134
loc:  {...}
 start:  {...}
 line: 5
column: 1
 }
end:  {...}
 line: 5
column: 25
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 114
end: 134
loc:  {...}
 start:  {...}
 line: 5
column: 5
 }
end:  {...}
 line: 5
column: 25
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 114
end: 119
loc:  {...}
 start:  {...}
 line: 5
column: 5
 }
end:  {...}
 line: 5
column: 10
 }
 }
name: "date3"
 }
init: Literal {...}
 type: "Literal"
start: 122
end: 134
loc:  {...}
 start:  {...}
 line: 5
column: 13
 }
end:  {...}
 line: 5
column: 25
 }
 }
value: "2024-01-03"
raw: "\"2024-01-03\""
 }
 }
 ]
kind: "let"
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

The AST is not public API and may change at any point in time

modern